问题标签 [trusted-types]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
google-chrome - 我在 Chrome 77 上的网站不加载任何数据,但在 Chrome 76 上运行良好
更糟糕的是,我的测试通过了使用 Chrome 77 和 Chromedriver 77(测试通过,数据加载到网页等)。只有当我手动启动 Chrome 77 浏览器并对其进行测试时,它才会失败。
这基本上是我的代码在做什么:
问题是在 Chrome 77param === "View"
中是假的!但单独使用 Chrome 77 时,这并不是错误的。
javascript - 如何使用新的 Trusted Types 标头和 reCAPTCHA?
我正在尝试使用require-trusted-types-for 'script'
Chrome 83 中可用的新标头,它给我的网站中的 reCAPTCHA 表单带来了问题。
为了进行测试,我使用了这个版本的标头,它有助于将问题记录到控制台:
当我导航到我的站点中包含 reCAPTCHA 的页面时,我可以提供 URL https://www.google.com/recaptcha/api.js包裹在一个TrustedType
对象中作为一个TrustedScriptURL
没有问题的对象。那没问题。
但是,api.js
文件本身包含src
触发此错误的赋值:
触发错误的代码api.js
是:
代码本身也会触发相同类型的recaptcha__en.js
错误,但这次需要一个受信任的 html 对象:
由于 Google 未对其中的代码进行api.js
清理,因此无法在标头生效的情况下执行它。有解决方法吗?或者是否有一个标志强制谷歌返回一个api.js
将src
赋值包装在TrustedType
对象中的版本?
reCAPTCHA 如何与可信类型强制结合使用?
angular - 如何使用 Angular [innerHTML] 修复 TrustedHTML 分配错误
(看来我的问题与在 chrome 中出现错误“此文档需要 'TrustedHTML' assignment”有关,但我使用的是 Angular v10)
描述:
当我[innerHTML]="myVar"
在 Angular 10(或更低版本)项目上使用该指令时,使用严格的 CSP require-trusted-types-for 'script';
,它会失败并显示以下消息:
此文档需要“TrustedHTML”分配。错误类型错误:无法在“元素”上设置“innerHTML”属性:此文档需要“TrustedHTML”分配。
如何重现:
- 打开一个 Angular X 项目
[innerHTML]="someVar"
在模板中使用指令- 添加
require-trusted-types-for 'script';
CSP 标头 - 检查 Chrome 控制台;)
我尝试了什么:
在阅读了有关受信任类型的一些资料后,例如:
- https://web.dev/trusted-types/
- https://www.intricatecloud.io/2019/10/using-angular-innerhtml-to-display-user-generated-content-without-sacrificing-security/
我尝试在我的 Angular 项目中使用https://github.com/cure53/DOMPurify 。只需添加包,创建一个 Angular 管道,然后在模板中使用它。
可以使用以下代码创建管道:
它可以像这样使用:[innerHTML]="myVar | safeHtml"
当然,我用 a 检查了返回console.log
,它给了我一个真正的 TrustedHTML 对象。Chrome 控制台中弹出了新错误,因此我不得不添加一个新的 CSP 标头来授权 DOMPurify:
require-trusted-types-for 'script';trusted-types dompurify
在那之后,Chrome 很高兴看到了 DOMPurify 字符串操作。
然而,最初的错误再次出现!
我不明白我错过了什么 - Chrome 抱怨 innerHTML 调用中的 TrustedHTML 类型,所以我做了一个 TrustedHTML 转换。在那之后 Chrome 想要一个明确的 dompurify 授权,所以我这样做了,然后 Chrome 再次抱怨 TrustedHTML 类型......
angular - Angular:如何设置 Content-Security-Policy 和 Trusted Types?
阅读Angular 安全指南后,我想:
到目前为止,这是我更改index.html的方式:
现在,我的控制台中有很多错误:
我的问题:
- 是否可以定义
Content-Security-Policy
两次/两者:
一个用于“经典”CSP 配置,一个用于受信任类型?
是否有意义? - 它们如何相互关联?
- 我如何使它在本地和生产中工作?
- 我知道这个配置可能应该只在生产环境中激活(因为 JIT),
使用特定的index.production.html文件(参见参考资料)。我不是只为两个元属性复制index.html
的忠实粉丝...... - 我还看到我可以在 my 中使用该
headers
属性architect.serve.configurations.production
,
但我不确定它是否更好和/或等效
- 我知道这个配置可能应该只在生产环境中激活(因为 JIT),
- 我什至应该使用
trusted-types
?
Angular 安全指南推荐使用它,但仍处于试验阶段
我阅读了一些有趣的资源,但它们没有展示如何具体使用 CSP 属性。
我正在使用 Angular 13。