聊聊 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.Add("X-Frame-Options", "SAMEORIGIN"); //context.Response.Headers.Add("X-Frame-Options", "DENY"); //context.Response.Headers.Add(HeaderNames.XFrameOptions, "ALLOW-FROM https://localhost:44338"); //context.Response.Headers.Add("Content-Security-Policy", "frame-ancestors self"); //context.Response.Headers.Add("Content-Security-Policy", "frame-ancestors"); //context.Response.Headers.Add(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)
相关文章
- 网络安全新资讯-《关键信息基础设施安全保护要求》于明年五月正式实施
- Cookies 的跨域脚本攻击 - Github 迁移域名的安全详解
- nginx安全日志分析脚本的编写
- 看雪安全接入KSA开放内测
- 《移动安全》(2)Android开发基础:使用Android Studio搭建Android开发环境
- 思科推出视频安全解决方案
- Qt之可重入与线程安全
- 10款中小企业必备的开源免费安全工具
- “安全政务本”通过专家评审国信灵通参与标准制定
- 配备指纹识别装置 华硕P453打造安全商务办公
- Office 365引入高级安全管理功能
- 微软:win10周年更新是最安全的版本
- 破解IDC运维难题 互联通安全防御服务来支招
- 告别“看家护院” 银行安防需树立“大安全”观
- 关于C/S架构系统的安全监测