SecurityError:阻止了具有原点的框架访问跨域框架

2020/09/23 20:21 · javascript ·  · 0评论

<iframe>在HTML页面中加载,并尝试使用Javascript访问其中的元素,但是当我尝试执行代码时,出现以下错误:

SecurityError: Blocked a frame with origin "http://www.<domain>.com" from accessing a cross-origin frame.

您能否帮助我找到解决方案,以便我可以访问框架中的元素?

我正在使用此代码进行测试,但徒劳无功:

$(document).ready(function() {
    var iframeWindow = document.getElementById("my-iframe-id").contentWindow;

    iframeWindow.addEventListener("load", function() {
        var doc = iframe.contentDocument || iframe.contentWindow.document;
        var target = doc.getElementById("my-target-id");

        target.innerHTML = "Found it!";
    });
});

同源政策

无法<iframe>使用JavaScript 访问其他来源的内容,如果可以的话,这将是一个巨大的安全漏洞。对于同源策略, 浏览器会阻止脚本尝试访问来源不同的框架

如果未保留地址的以下至少其中之一,则认为起源是不同的:

协议:// 主机名端口 / ...

如果要访问框架,协议,主机名和端口必须与您的域相同。

注意:众所周知,Internet Explorer并不严格遵循此规则,有关详细信息,请参见此处

例子

尝试从中访问以下URL会发生以下情况 http://www.example.com/home/index.html

URL                                             RESULT 
http://www.example.com/home/other.html       -> Success 
http://www.example.com/dir/inner/another.php -> Success 
http://www.example.com:80                    -> Success (default port for HTTP) 
http://www.example.com:2251                  -> Failure: different port 
http://data.example.com/dir/other.html       -> Failure: different hostname 
https://www.example.com/home/index.html:80   -> Failure: different protocol
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different protocol, port & hostname 

解决方法

即使同源策略阻止脚本访问源不同的站点的内容,但是如果您同时拥有两个页面,则可以使用window.postMessage及其相对message事件在两个页面之间发送消息来解决此问题,如下所示:

  • 在您的主页中:

    const frame = document.getElementById('your-frame-id');
    frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');

    的第二个参数postMessage()可以是'*'指示对目的地的起点没有任何偏好。在可能的情况下,应始终提供目标来源,以避免泄露您发送到任何其他站点的数据。

  • 在您的<iframe>(包含在主页中):

    window.addEventListener('message', event => {
        // IMPORTANT: check the origin of the data! 
        if (event.origin.startsWith('http://your-first-site.com')) { 
            // The data was sent from your site.
            // Data sent with postMessage is stored in event.data:
            console.log(event.data); 
        } else {
            // The data was NOT sent from your site! 
            // Be careful! Do not use it. This else branch is
            // here just for clarity, you usually shouldn't need it.
            return; 
        } 
    }); 

此方法可以在两个方向上应用,也可以在主页上创建侦听器,并从框架接收响应。相同的逻辑也可以在弹出窗口中实现,并且基本上也可以在主页上(例如使用window.open()生成任何新窗口,而没有任何区别。

在禁用同源策略您的浏览器

关于此主题已经有了一些不错的答案(我刚刚找到了它们),因此,对于可能的浏览器,我将链接相对答案。但是,请记住,禁用同源策略只会影响您的浏览器此外,运行禁用了同源安全设置的浏览器会授予任何网站访问跨域资源的权限,因此,这是非常不安全的,如果您不确切知道自己在做什么(例如,出于开发目的),则永远不要这样做

补充Marco Bonelli的回答:当前,在框架/ iframe之间进行交互的最佳方式是使用window.postMessage所有浏览器均支持

检查域的Web服务器以进行http://www.<domain>.com配置,X-Frame-Options
这是一项旨在防止clickJacking攻击,

clickJacking如何工作?

  1. 邪恶页面看起来与受害者页面完全一样。
  2. 然后,它欺骗了用户输入用户名和密码。

从技术上讲,邪恶iframe与受害者页面的来源有关。

<html>
    <iframe src='victim_domain.com'/>
    <input id="username" type="text" style="display: none;/>
    <input id="password" type="text" style="display: none;/>
    <script>
        //some JS code that click jacking the user username and input from inside the iframe...
    <script/>
<html>

安全功能如何工作

如果要防止在iframe添加x-frame-options中呈现Web服务器请求

X-Frame-Options拒绝

选项包括:

  1. SAMEORIGIN //仅允许我自己的域在iframe中呈现我的HTML。
  2. DENY //不允许在任何iframe中呈现我的HTML
  3. “ ALLOW-FROM https://example.com/ ” //允许特定域在iframe中呈现我的HTML

这是IIS配置示例:

   <httpProtocol>
       <customHeaders>
           <add name="X-Frame-Options" value="SAMEORIGIN" />
       </customHeaders>
   </httpProtocol>

问题的解决方案

如果Web服务器激活了安全功能,则可能会导致客户端安全错误。

对我来说,我想实现两向握手,这意味着:

-父窗口将比iframe加载得更快


-iframe应该在准备好后立即与父窗口进行对话


-父准备接收iframe消息并重播

此代码用于使用[CSS自定义属性]

代码
在iframe中设置白色标签

iframe

$(function() {
    window.onload = function() {
        // create listener
        function receiveMessage(e) {
            document.documentElement.style.setProperty('--header_bg', e.data.wl.header_bg);
            document.documentElement.style.setProperty('--header_text', e.data.wl.header_text);
            document.documentElement.style.setProperty('--button_bg', e.data.wl.button_bg);
            //alert(e.data.data.header_bg);
        }
        window.addEventListener('message', receiveMessage);
        // call parent
        parent.postMessage("GetWhiteLabel","*");
    }
});

父母

$(function() {
    // create listener
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    eventer(messageEvent, function (e) {
        // replay to child (iframe) 
        document.getElementById('wrapper-iframe').contentWindow.postMessage(
            {
                event_id: 'white_label_message',
                wl: {
                    header_bg: $('#Header').css('background-color'),
                    header_text: $('#Header .HoverMenu a').css('color'),
                    button_bg: $('#Header .HoverMenu a').css('background-color')
                }
            },
            '*'
        );
    }, false);
});

当然,您可以限制原点和文本,这是易于使用的代码,

我发现此示例非常有用:

[使用postMessage进行跨域消息传递]

我想添加特定于Java Spring的配置,对此可能会产生影响。

在网站或网关应用程序中,有一个contentSecurityPolicy设置

在Spring中,您可以找到WebSecurityConfigurerAdapter子类的实现

contentSecurityPolicy("
script-src 'self' [URLDomain]/scripts ; 
style-src 'self' [URLDomain]/styles;
frame-src 'self' [URLDomain]/frameUrl...

...

.referrerPolicy(ReferrerPolicyHeaderWriter.ReferrerPolicy.STRICT_ORIGIN_WHEN_CROSS_ORIGIN)

如果您在此处未定义安全的外部网络,浏览器将被阻止。

如果您可以控制iframe的内容-也就是说,如果仅将iframe的内容加载到跨域设置中(例如在Amazon Mechanical Turk上),则可以使用<body onload='my_func(my_arg)'>内部html 属性来规避此问题

例如,对于内部html,请使用thishtml参数(是- this已定义,它指向内部body元素的父窗口):

<body onload='changeForm(this)'>

在内部html中:

    function changeForm(window) {
        console.log('inner window loaded: do whatever you want with the inner html');
        window.document.getElementById('mturk_form').style.display = 'none';
    </script>

尝试嵌入iframe,然后使用Brave打开网站时遇到了此错误。当我将相关站点更改为“ Shields Down”时,错误消失了。显然,这不是一个完整的解决方案,因为任何其他使用Brave访问该网站的人都会遇到同样的问题。要真正解决它,我需要执行此页面上列出的其他事情之一。但是至少我现在知道问题出在哪里。

  • 打开开始菜单
  • 键入Windows + R或打开“运行
  • 执行以下命令。

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security

本文地址:http://javascript.askforanswer.com/securityerrorzuzhilejuyouyuandiandekuangjiafangwenkuayukuangjia.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!