开发环境下如何覆盖内容安全策略（CSP）？

为啥会报错 #

测试环境的域名在目标iframe资源的frame-ancestors白名单里，所以能正常嵌入；但本地开发常用的localhost、127.0.0.1不在名单内，直接触发CSP拦截。

几个简便的解决办法 #

• 改Hosts伪装成白名单域名
  编辑本地hosts文件：Windows找C:\Windows\System32\drivers\etc\hosts，Mac/Linux找/etc/hosts，添加一行：

  127.0.0.1 dev.somedomain.com
  

  把dev.somedomain.com换成目标资源白名单里的任意子域名即可，之后用这个域名访问本地项目，就能绕开CSP限制。

• 用浏览器插件临时关掉CSP检查
  安装Chrome的「Disable Content-Security-Policy」或同类插件，开启后浏览器会跳过所有CSP验证，适合快速调试。注意只在开发场景使用，别在生产环境开启。

• 反向代理转一下请求
  给本地开发服务器配置反向代理，比如用Webpack Dev Server的proxy功能或者Nginx，让本地页面的域名匹配目标资源的白名单规则，这样也能正常嵌入iframe。

内容的提问来源于stack exchange，提问作者Arkadiusz Kałkus