偶然碰到iframe跨域加载被拒绝的问题,原因是父页面默认不允许加载跨域的子页面,也就是的content-security-policy中没有设置允许跨域加载。
简单地说,content-security-policy能限制页面允许和不允许加载的所有资源,常见的包括:
- iframe加载的子页面url
- js文件
- 图片、视频、音频、字体等资源
设置content-security-policy有两个途径:
- 通过请求头设置(http header)
- 在html中head > meta设置
使用中注意:
- 1比2的优先级高,也就是浏览器优先使用请求头的配置
- content-security-policy各配置项默认使用
default-src
指令的值,该指令默认是不限制的
csp配置可以有效阻止跨站脚本攻击(xss),而且用起来也不麻烦,可以作为一个开发中的日常习惯。
具体使用方式就不赘述了,感兴趣的可以看下面的参考页面。
参考
- Content Security Policy 入门教程 —— 阮一峰
- 内容安全策略(CSP)—— MDN
- CSP常用配置项(指令)