聊聊 iframe, CSP, 安全, 跨域

refer :

https://www.cnblogs.com/kunmomo/p/12131818.html (跨域)

https://segmentfault.com/a/1190000004502619 (iframe)

https://imququ.com/post/content-security-policy-reference.html (CSP)

https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame (post message example)

上面写的很好了, 记入一些重点就好

怎样算跨域? 

什么东西会被影响 

还有 iframe 之间沟通

如果要跨域沟通怎么办? 

ajax 的做法是通过服务器添加 header access-control-allow-origin

ifame 有 2 个方法

如果是子域名的话可以通过修改 document.domain 来实现跨域

2 个页面都设置成顶级域名这样.

另一个方法是使用 html5 的 post message, 这个比较厉害, 任何网站都可以沟通哦. 如果我没有记错的话, web worker 也是类似的方式沟通的.

Iframe 使用

iframe 有 2 个方向, 第一个是我们使用 iframe 嵌套人家网站进来.

另一个是反过来，我们被人家网站嵌套.

我先说说被嵌套的情况.

如果我们不想被嵌套可以在服务器返回的 response header 里头加入

X-Frame-Options, 或者比较新的 CSP

app.Use(async (context, next) =>
{
    //context.Response.Headers.Append("X-Frame-Options", "SAMEORIGIN");
    //context.Response.Headers.Append("X-Frame-Options", "DENY");
    //context.Response.Headers.Append(HeaderNames.XFrameOptions, "ALLOW-FROM https://localhost:44338");

    //context.Response.Headers.Append("Content-Security-Policy", "frame-ancestors self");
    //context.Response.Headers.Append("Content-Security-Policy", "frame-ancestors");
    //context.Response.Headers.Append(HeaderNames.ContentSecurityPolicy, "frame-ancestors https://localhost:44338");
    await next();
});

same origin 就是说只有同域才可以嵌套 (怎样算跨域上面已经说了)

deny 就是完全不行咯

allow-from 就是自己写允许哪些网站可以嵌套.

这里只是说它能不能嵌套你, 虽然它可以嵌套你, 也不代表它就可以操作你哦. (沟通依然是受保护的, 这个防嵌套主要是用来防 clickjacking 的)

iframe 通讯

parent page

在跨域的情况下, 虽然我们无法直接访问 frame.contentWindow, 但是却可以调用 post message 哦

<iframe id="iframe3" src="https://192.168.1.152:44300"></iframe>
<script>
    setTimeout(() => {
        const frame = document.getElementById('iframe3');
        frame.contentWindow.postMessage('message', 'https://192.168.1.152:44300');
    }, 4000);

    window.addEventListener('message', event => {
        if (event.origin.startsWith('https://192.168.1.152:44300')) {
            console.log('callback data here : ' + event.data);
        } else {
            return;
        }
    });
</script>

嵌套的 page

window.addEventListener('message', event => {
    document.getElementById('target').innerHTML = 'masuk';
    if (event.origin.startsWith('https://localhost:44338')) {
        document.getElementById('target').innerHTML = 'get message' + event.data;
        window.top.postMessage('callback' + event.data, 'https://localhost:44338');
    } else {
        return;
    }
});

记得一定要判断 event.origin, 因为各种情况下都有可能会收到 message 的 (比如你安装了 angular 的游览器 debug 插件, 它就会一直出发 message event)