如何修复Angular〔innerHTML〕的TrustedHTML分配错误

Question

(我的问题似乎与chrome中出现错误"This document requires'；TrustedHTML'；assignment"有关，但我使用的是Angular v10(

描述：

当我在Angular 10(或更低(项目上使用[innerHTML]="myVar"指令时，使用严格的CSPrequire-trusted-types-for 'script';，它会失败，并显示消息：

此文档需要"TrustedHTML"赋值。错误类型错误：未能设置"Element"的"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/

我试着使用https://github.com/cure53/DOMPurify我的Angular项目。只需添加包，创建一个Angular管道，并在模板中使用它。

可以使用以下代码创建管道：

import { Pipe, PipeTransform } from '@angular/core';
import * as DOMPurify from 'dompurify';
@Pipe({
name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
transform(value: string): TrustedHTML {
return DOMPurify.sanitize(value, {RETURN_TRUSTED_TYPE: true});
}
}

它可以这样使用：[innerHTML]="myVar | safeHtml"

当然，我用console.log检查了返回，它给了我一个真正的TrustedHTML对象。Chrome控制台中弹出了新的错误，所以我不得不添加一个新的CSP头来授权DOMPurify:

require-trusted-types-for 'script';trusted-types dompurify

之后，Chrome很高兴看到DOMPurify字符串操作。

然而，最初的错误再次出现！

我不明白我错过了什么——Chrome抱怨innerHTML调用中的TrustedHTML类型，所以我进行了TrustedHTML转换。在那之后，Chrome想要对dompurify进行明确的授权，所以我这样做了，之后Chrome再次抱怨TrustedHTML类型。。。

Answer 1

避免错误的方法：

添加CSPrequire-trusted-types-for 'script';trusted-types default(上的源代码https://w3c.github.io/webappsec-trusted-types/dist/spec/#default-策略hdr(

添加一个特定于innerHTML方法的小片段：

if (window.trustedTypes && window.trustedTypes.createPolicy) {
window.trustedTypes.createPolicy('default', {
createHTML: (string, sink) => string
});
}

这里有一些提示：https://github.com/angular/angular/pull/32353

使用这种方法要小心，因为它会将对innerHTML的每一个赋值标记为可信，而不会确保它实际上是安全的。本质上，它避开了受信任类型的观点，因为这种方法不再阻止注入漏洞(例如this.div.nativeElement.innerHTML=userInput(。