0

我已经构建了一个需要一些图像上传功能的 Facebook 应用程序,并使用 Fine Uploader 来实现它。

Facebook 应用程序本身是用 WordPress 构建的,一切正常。最终,WordPress 网站(即应用程序)将以 iframe 的形式出现在 Facebook 上,而事情就在这里变得有趣起来。

当我在本地机器上测试应用程序时,它可以工作(所有浏览器)。当我在暂存环境中的 iframe 之外测试应用程序时,它也可以工作(所有浏览器)。但是,当我在 Facebook (iframe) 上的测试页面中测试应用程序时,图像上传失败,仅在 IE 中。

作为参考,我将展示我的服务器和客户端代码:

public static function upload_receiver()
{
    $uploader = new qqFileUploader();
    $uploader->allowedExtensions = array("jpg", "jpeg");
    $uploader->sizeLimit = 2024 * 1024;

    $wp_upload_dir = wp_upload_dir();
    $wp_upload_url = $wp_upload_dir['baseurl'];
    $wp_upload_base = $wp_upload_dir['basedir'];

    $upload_dir = $wp_upload_base;
    $upload_filename = md5(mt_rand())/*.'_'.$uploader->getName()*/.".jpg";

    $result = $uploader->handleUpload( $upload_dir, $upload_filename );

    // Create the WordPress image thumbs.
    $img_target = "{$upload_dir}/{$upload_filename}";

    $wp_filetype = wp_check_filetype( $img_target );

    $attachment_data = array(
        'post_mime_type' => $wp_filetype['type'], 
        'guid' => $img_target,
        'post_title' => preg_replace('/\.[^.]+$/', '', $upload_filename ),
        'post_name' => preg_replace('/\.[^.]+$/', '', $upload_filename ),
        'post_content' => '',
        'post_status' => 'inherit',
    );

    $attachment_id = wp_insert_attachment( $attachment_data, $img_target );

    $meta = wp_generate_attachment_metadata($attachment_id, $img_target);

    wp_update_attachment_metadata($attachment_id, $meta);   

    $result['attachmentId'] = $attachment_id;
    $result['imageUrl'] = htmlspecialchars( get_image_url_from_attachment_id($attachment_id, "thumb-small") );

    header("Content-Type: text/plain");
    echo json_encode( $result );

    die();
}

和客户:

var el = $('#upload');
var el_img = el.find('span');

el.fineUploader( {
    uploaderType: 'basic',
    button: el,
    multiple: false,
    request: {
        endpoint: '<?php echo site_url("/wp-admin/admin-ajax.php") ?>',
        params: {
            action: 'upload_receiver'           
        }
    },
    validation: {
        allowedExtensions: ['jpeg', 'jpg']
    },
    debug: false
} ).on('upload', function(event, id, fileName, response) {
    $('.loader').show();
    $('.upload_button_container').hide();

} ).on('complete', function(event, id, fileName, response) {

    // ONLY IN IE "RESPONSE.SUCCESS" IS FALSE IN AN FB IFRAME. ALL OTHER
    // TIMES "RESPONSE.SUCCESS" IS TRUE AND ALL PROPERTIES CREATED ON THE
    // SERVER EXIST.

    $('.loader').hide();
    $('.upload_button_container').show();

    if( response.error )
    {
        alert( response.error );
        return;
    }

    // Display image coming in from the result.
    $(".img_upload_container img").attr('src', response.imageUrl).show();

    // Store the WordPress attachment Id for form submission.
    $("form input[name=bc_attachment_id]").val( response.attachmentId );
});

在过去的几个小时里,我一直在努力解决这个问题,但我已经想不出可能导致这个问题的想法了。

编辑

IE9 控制台输出:

LOG: [FineUploader] Processing 1 files or inputs... 
LOG: [FineUploader] Sending upload request for 0 
SEC7111: HTTPS security is compromised by res://ieframe.dll/forbidframing.htm 
SEC7111: HTTPS security is compromised by res://ieframe.dll/ErrorPageTemplate.css 
SEC7111: HTTPS security is compromised by res://ieframe.dll/errorPageStrings.js 
SEC7111: HTTPS security is compromised by res://ieframe.dll/httpErrorPagesScripts.js 
SEC7111: HTTPS security is compromised by res://ieframe.dll/red_x.png 
SEC7111: HTTPS security is compromised by res://ieframe.dll/bullet.png 
SEC7111: HTTPS security is compromised by res://ieframe.dll/background_gradient.jpg 
LOG: [FineUploader] Received response for 0 
[FineUploader] Error when attempting to access iframe during handling of upload response (Error: Access is denied.
) 
LOG: [FineUploader] iframe loaded 
[FineUploader] Error when attempting to parse form upload response (Error: Access is denied.
) 
4

2 回答 2

0

正如我所怀疑的,问题在于父窗口的域与包含响应的 iframe 的域不匹配。这是一种安全违规,并且没有简单的方法可以访问此 iframe 的内容,因为它位于不同的域中。浏览器禁止此类访问。解决这个问题有点棘手,但 Fine Uploader 提供了一种方法。

您需要在 Fine Uploader 中启用 CORS 功能。这可能是您最好的选择,这应该可以解决您的问题。Fine Uploader 最近增加了对跨域请求的支持(3.3 版)。这在涉及 iframe 的 IE 中特别有用。本质上,您将配置您的响应以导入一个 javascript 文件,该文件将向包含您的响应的父窗口发布一条消息。这就是 Fine Uploader 克服跨域问题的方式。我写了一篇关于 Fine Uploader 中的 CORS 支持的详细博客文章,以及如何启用它并正确处理 Fine Uploader 在服务器端代码中发送的跨域请求。

如果您阅读该帖子并按照服务器端说明进行操作,那么您应该没问题。

请注意,在您的情况下,这似乎只是您需要在 IE9 和更早版本中克服的问题。以下是您需要执行的操作的高级摘要:

  1. 在 Fine Uploader(客户端)中打开 CORS 支持。
  2. 服务器端:通过查看请求上的 X-Requested-With 标头来识别非 XHR 上传请求。
  3. 如果请求不是通过 XHR 发送的,则返回内容类型为“text/html”的响应,该响应以<script>从已知位置(任何地方)导入“iframe.xss.response.js”文件的标记开头. 在响应中的脚本标记之后,包括响应的正常有效 JSON 部分。

希望这可以帮助。

于 2013-04-20T03:43:40.717 回答
0

只是为了在iframe 属于同一域的不同场景中添加@Ray 的答案,但在 https 环境中仍然收到相同的内容:SEC7111: HTTPS security is compromised by res://ieframe.dll

对于 Apache,HTTP 服务器

在 Apache Web Server 的 httpd.conf 文件中添加/更改以下行

Header always append X-Frame-Options SAMEORIGIN

确保它没有设置为DENY. 重启网络服务器

还要检查响应标头以查看是否反映了上述更改

于 2014-04-25T07:22:38.633 回答