Fine Uploader 在 Facebook iframe 中失败

Question

我已经构建了一个需要一些图像上传功能的 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.
) 

Answer 1

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

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

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

请注意，在您的情况下，这似乎只是您需要在 IE9 和更早版本中克服的问题。以下是您需要做的简要总结：

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

希望这会有所帮助。

Answer 2

只是为了在 不同的场景 中添加 @Ray 的答案，其中 iframe 属于同一域，但在 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。 重启网络服务器

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