html表单操作跨域目标iframe

Question

我正在尝试设置一个包含输入类型文件的html表单。我想通过post请求将此文件上传到一个监听相同主机但不同端口的服务器。我的表单目标是iframe，它在加载时接收带有新上传文件_id的数据。问题是我收到了"Uncaught SecurityError:未能从'HTMLIFrameElement'读取'contentDocument'属性：阻止了一个具有原点的帧"http://192.168.0.105:3001"从访问具有原点的帧"http://192.168.0.105:3011".协议、域和端口必须匹配。"下方提供了带有一些不必要硬编码的示例代码

'<form id="{id}_form" action="http://192.168.0.105:3011/private/profile_picture/upload" enctype="multipart/form-data" method="post" target="{id}_uploadframe">',
'<span id="{id}_wrapper" class="file-wrapper">',
    '<input id="{id}_real" type="file" accept="image/*" name="photo" />',
    '<span class="button">{0}</span>',
'</span>',
'</form>',
'<iframe id="{id}_uploadframe" name="{id}_uploadframe" class="mc-hidden"></iframe>'

Ext.fly( this.id + '_uploadframe' ).on( 'load', function( evt, el )
{
    var data = el.contentDocument.body.innerHTML;
    try
    {
        data = Ext.JSON.decode( data, true );
    }
    catch( ex )
    {
        data = {};
    }
    ........
    if( data && data.success === true )
    {
        if (me.cbUpload) {
            me.cbUpload(data);
        }
        .......
    }, this );
}

Ext.fly( this.id + '_real' ).on( 'change', function( evt, el )
{
    ....
    var form = document.getElementById( me.id + '_form' );
    form.submit();
    ....
});

我知道我违反了跨域策略，但有什么简单的方法可以绕过或破解它吗？

Answer 1

如果你控制了另一个URL，你可以在那里使用PHP来修复它：

header('Access-Control-Allow-Origin: *');

或

header('Access-Control-Allow-Origin: http://permitted_domain.com');

如果你不这样做，就必须在没有框架的情况下进行！

Answer 2

我的服务器都是节点服务器。在两者中，我都有类似的配置：

// Add headers
app.use(function (req, res, next) {
    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://192.168.0.105:3011');
    // THE OTHER ONE IS CONFIGURED SIMILAR
    res.setHeader('Access-Control-Allow-Origin', 'http://192.168.0.105:3001');
    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
});

这似乎一点帮助都没有。

Answer 3

在两个文档中将document.domain设置为相同的值应该可以实现这一点。

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#Changing_origin:

"页面可能会更改自己的原点，但有一些限制。脚本可以将document.domain的值设置为当前域的子集。如果这样做，则较短的域将用于后续的原点检查。"〔…〕

端口号由浏览器单独保存。任何对setter的调用，包括document.domain = document.domain，都会导致端口号被null覆盖。因此，不能只在第一个中设置document.domain = "company.com"，就让company.com:8080与company.com通话。必须在两者中都设置，这样端口号都是null。