html表单动作跨域目标iframe答案

【问题标题】：html form action cross domain target iframehtml表单动作跨域目标iframe
【发布时间】：2015-04-26 05:56:28
【问题描述】：

我正在尝试设置一个带有输入类型文件的 html 表单。我想通过发布请求将此文件上传到侦听同一主机但端口不同的服务器。我的表单目标是一个 iframe，它在加载时接收带有新上传文件的 _id 的数据。问题是我收到“Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://192.168.0.105:3001" from access a frame with origin "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();

    ....

});

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

【问题讨论】：

标签： javascript html iframe

【解决方案1】：

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

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

或

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

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

【讨论】：

CORS 标头适用于 XMLHttpRequest 2 而不是 <iframe> 所以你必须使用 XHR 然后从同源设置<iframe> 的内容（例如将其指向about:blank 也许？）。

【解决方案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();
});

这似乎没有一点帮助。

【讨论】：

“这似乎没有一点帮助”——这使得这个不是成为一个答案。如果您有任何要添加到原始问题的内容，请通过编辑来完成，而不是滥用答案功能。
嗯，这是一个线程，所有回复都与线程相关。并且线程更容易按时间顺序跟踪，但总有人手里拿着公牛的球。
“嗯，这是一个线程”——不，不是。 SO 不是您标准的 xxBB 论坛类型的网站，因此请尊重这一点并采取相应的行动。
“而且线程更容易按时间顺序跟踪” – 好吧，一旦对答案进行投票，默认排序顺序就会改变。如果你以前不相信，至少那应该让你接受你的论点在 SO 上是无效的。

【解决方案3】：

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

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

“一个页面可能会改变它自己的来源，但有一些限制。脚本可以将document.domain 的值设置为当前域的子集。如果这样做，则较短的域将用于后续的来源检查。” […]

“端口号由浏览器单独保存。对设置器的任何调用，包括document.domain = document.domain 都会导致端口号被null 覆盖。因此，仅在第一个中设置 document.domain = "company.com" 是无法使 company.com:8080 与 company.com 对话的。必须在两者中设置，以便端口号都是null。”

【讨论】：