业务场景
希望能集成一个weda开发出来的页面到开放平台上
实现方式
1 | <iframe src="https://lowcode-7gcbyr6cba0c6868-1312402421.tcloudbaseapp.com/app-v9spncjv/production/index" width="600" height="720" frameborder="0" allowfullscreen></iframe> |
通过iframe实现，虽然对iframe也不算很了解，但是简单的本地测试没问题
遇到问题
push到生产环境之后，浏览器直接报无法加载，console中类似报错，例子中用的script，实际是iframe
1 | Refused to load the script 'http://xxxxx' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' 'unsafe-inline' |
定位问题
之前做等保认证时，好像配置过csp（Content Security Policy），当时不知道具体作用根据需要就配置了下，现在重新梳理下
CSP作用
我们都应该听说过XSS（跨站脚本攻击）；它可能是最常见、危害最大的网络安全漏斗。大约十年前吧，W3C 网络应用安全工作组为防御 XSS、点击劫持等代码注入攻击，推荐 CSP 成为计算机安全标准，以阻止恶意内容在受信网页环境中执行；之后几乎所有的现代浏览器都支持了这一策略。
实现方式
配置在响应的标头里或者html网页的meta里的一串字符串，如下所示
1 | Content-Security-Policy: style-src 'unsafe-inline' 'self'; script-src blob: 'unsafe-inline' 'self'; |
我因为要引入https://lowcode-7gcbyr6cba0c6868-1312402421.tcloudbaseapp.com/这个网页作为iframe的源头，
就应该在iframe-src或者default-src中配置这个地址
遇到一些不明确的问题
一开始偷懒不想改nginx里的配置，在meta中直接添加了https://lowcode-7gcbyr6cba0c6868-1312402421.tcloudbaseapp.com/，
但是效果跟预期不一致，不清楚响应的标头和meta里都配置出现了什么问题
最后的解决方式
nginx里的csp直接删掉，下次等保再说吧