問題タブ [dompurify]

(私の問題は'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 コンソールを確認してください ;)

私が試したこと：

信頼できるタイプに関するいくつかのソースを読んだ後、次のようになります。

• 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"

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

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

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

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

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

データベースに保存する前に、DOMPurify を使用してフォームのユーザー入力をサニタイズできるかどうか疑問に思っていました。フォーム投稿用に routes.js フォルダーにあるものは次のとおりです。

ページの上部にあるパッケージもインポートしました

サーバーを実行してポスト リクエストを送信すると、500 エラーがスローされ、dompurify.sanitize は関数ではないと主張されます。間違った場所で使用していますか、またはバックエンドで使用するのは正しいですか?

私は現在、dangerouslySetInnerHTML を使用して、実際に html をレンダリングするかどうかを確認しています。ただし、使用すると、指定された正確なhtmlが実際にレンダリングされないようです。

p タグはまったくレンダリングされていないように見えますが、それがdangerouslySetInnerHTMLの単なる機能なのか、それとも状態をdivに渡す方法に問題があるのか​​ 疑問に思っていました. また、html を DOM に直接挿入するより安全な方法はありますか?