3

DomSanitizer を使用して、HTML コンテンツをデータベースからサニタイズし、ページに表示しました。

<div [innerHtml]="safeHtml(article.text)"></div>

safeHtml の場所:

safeHtml(html){
    return this.sanitize.bypassSecurityTrustHtml(html);
}

それは完璧に機能します。しかし、このテキストを Web ページに表示するときに、このテキストを選択したりコピーしたりできないことに気付きました。それ以外の場合は、通常の文字列フィールドから表示されるテキストを通常どおりコピーまたは選択できます。

4

2 に答える 2

3

一見、bypassSecurityTrustHtml()は必要ないように見えますが、ドキュメントでは、このメソッドを一般的に使用しないように警告しています。<script>データベースのコンテンツにbypassSecurityTrustHtml が含まれていないと仮定するのは、間違った方法です。また、挿入された html のテキストが選択/コピーされない可能性もあります。

セキュリティをバイパスし、指定された値が安全な HTML であると信頼します。これは、バインドされた HTML が安全でなく (タグが含まれているなど)、コードを実行する必要がある場合にのみ使用してください。サニタイザーは安全な HTML をそのまま残すため、ほとんどの場合、この方法は使用しないでください。

<div [innerHtml]="article.text | keepHtml"></div>

import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'keepHtml', pure: false })
export class EscapeHtmlPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}

    transform(content) {
        return this.sanitizer.sanitize(SecurityContext.HTML, content);
    }
}

特定の状況では、サニタイズを無効にする必要がある場合があります。たとえば、アプリケーションが動的な値を含む javascript: スタイル リンクを本当に生成する必要がある場合です。ユーザーは、bypassSecurityTrust... メソッドの 1 つを使用して値を作成し、テンプレートからその値にバインドすることで、セキュリティをバイパスできます。

このような状況は非常にまれであり、クロス サイト スクリプティング (XSS) のセキュリティ バグを作成しないように細心の注意を払う必要があります。

bypassSecurityTrust... を使用する場合は、メソッドをできるだけ早く、値のソースにできるだけ近い場所で呼び出して、その使用によってセキュリティ バグが作成されていないことを簡単に確認できるようにしてください。

疑わしいプロトコルで始まらない URL や、危険なコードを含まない HTML スニペットなど、値が安全な場合は、セキュリティをバイパスする必要はありません (推奨されません)。サニタイザーは安全な値をそのまま残します。

サニタイズ()

値がコンテキストに対して信頼されている場合、このメソッドは含まれている安全な値をアンラップし、それを直接使用します。それ以外の場合、値は特定のコンテキストで安全になるようにサニタイズされます。たとえば、安全でないプロトコル部分 (javascript: など) を持つ URL を置き換えることによって行われます。実装は、値が特定のコンテキストで確実に安全に使用できることを確認する責任があります。

于 2020-02-25T18:09:06.817 に答える