angular - 如何使用 Angular [innerHTML] 修复 TrustedHTML 分配错误

Question

（看来我的问题与在 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 控制台；)

我尝试了什么：

在阅读了有关受信任类型的一些资料后，例如：

我尝试在我的 Angular 项目中使用https://github.com/cure53/DOMPurify 。只需添加包，创建一个 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"

当然，我用 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 类型......

score -1 · Accepted Answer

避免错误的方法：

添加 CSP require-trusted-types-for 'script';trusted-types default（来源https://w3c.github.io/webappsec-trusted-types/dist/spec/#default-policy-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）。

angular - 如何使用 Angular [innerHTML] 修复 TrustedHTML 分配错误

1 回答 1

Related

Reference