聊聊 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)