1

(私の問題は'This document requires 'TrustedHTML' assignment' in chrome というエラーが発生することに関連しているようですが、代わりに Angular v10 を使用しています)

説明：

[innerHTML]="myVar"厳密な CSP を使用して Angular 10 (またはそれ以下) のプロジェクトでディレクティブを使用すると、次require-trusted-types-for 'script';のメッセージで失敗します。

このドキュメントには「TrustedHTML」の割り当てが必要です。エラー TypeError: 'Element' に '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"

もちろん、戻り値を でチェックしたconsole.logところ、本物の TrustedHTML オブジェクトが得られました。Chrome コンソールに新しいエラーが表示されたため、DOMPurify を承認するために新しい CSP ヘッダーを追加する必要がありました。

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

その後、Chrome は DOMPurify 文字列操作を確認して満足しました。

しかし、初期エラーが再発！

何を見逃したのか理解できません - innerHTML 呼び出しの TrustedHTML タイプに関する Chrome の苦情のため、TrustedHTML 変換を行います。その後、Chrome は dompurify の明示的な承認を求めているので、それを行います。その後、Chrome は TrustedHTML タイプについて再び苦情を言います...

4

1 に答える 1