フロントエンドはどのようにして HTML 文字列を安全にレンダリングするのでしょうか?

プログラミング 2023-08-23 03:27:40 訪問数: null

HTML 文字列を動的に生成およびレンダリングすることは、最新の Web アプリケーションにおける一般的な要件です。ただし、HTML 文字列を正しくレンダリングしないと、クロスサイト スクリプティング (XSS) などのセキュリティ上の脆弱性が発生する可能性があります。アプリケーションのセキュリティを確保するには、安全な環境で HTML 文字列をレンダリングするための対策を講じる必要があります。この記事では、潜在的なセキュリティ リスクを効果的に回避するために、HTML 文字列を安全にレンダリングするためのベスト プラクティスをいくつか紹介します。

目次

  • 一般的なレンダリング方法

    • HTML
    • 反応する
    • ヴュー
    • 角度のある

  • HTMLサニタイザーAPI

    • それは何ですか
    • 使い方？
    • カスタマイズ
    • ブラウザのサポート

  • サードパーティのライブラリ

    • DOMPurify
    • js-xss
    • サニタイズ-html

1. 一般的なレンダリング方法

まず、HTML、React、Vue、Angular で HTML 文字列をレンダリングする方法を見てみましょう。

HTML

HTML 文字列を HTML でレンダリングするには、ネイティブ JavaScriptinnerHTML属性を使用するか、要素ノードを作成してappendChild()メソッドを使用します。

  1. 属性の使用innerHTML: HTML をレンダリングするターゲット要素を取得し、HTMLinnerHTML文字列をその属性に割り当てることで、HTML 文字列をレンダリングできます。例えば：
<div id="targetElement"></div>

<script>
  const htmlString = "<h1>Hello, World!</h1>";
  document.getElementById("targetElement").innerHTML = htmlString;
</script>

これは<div id="targetElement"></div>内部的にレンダリングされます<h1>Hello, World!</h1>。

  1. 要素ノードとappendChild()メソッドの作成:document.createElement()メソッドを使用して要素ノードを作成し、appendChild()メソッドを使用してノードを親要素に追加できます。例えば：
<div id="targetElement"></div>

<script>
  const htmlString = "<h1>Hello, World!</h1>";
  const parentElement = document.getElementById("targetElement");
  const tempElement = document.createElement("div");
  tempElement.innerHTML = htmlString;

  while (tempElement.firstChild) {
    
    
    parentElement.appendChild(tempElement.firstChild);
  }
</script>

これは<div id="targetElement"></div>内部的にレンダリングされます<h1>Hello, World!</h1>。

反応する

HTML 文字列は、属性を使用してdangerouslySetInnerHTMLReact でレンダリングできます。ただし、この属性の名前が示すように、セキュリティ上のリスクがあり、HTML がエスケープされず、XSS の問題が発生する可能性があるため、注意して使用してください。

import React from 'react';

const MyComponent = () => {
    
    
  const htmlString = '<p>Hello, <strong>React</strong>!</p>';

  return (
    <div dangerouslySetInnerHTML={
    
    {
    
     __html: htmlString }} />
);
}

export default MyComponent;

ここでは、レンダリングされる HTML 文字列がhtmlString変数に保存され、dangerouslySetInnerHTML属性の__htmlプロパティに渡されます。React は、その文字列を HTML コンテンツとしてレンダリングされたコンポーネントに挿入します。

ヴュー

HTML 文字列は、ディレクティブを使用してv-htmlVue でレンダリングできます。React で使用する場合と同様にdangerouslySetInnerHTML、v-html使用する際には注意が必要です。

<template>
  <div v-html="htmlString"></div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      htmlString: '<p>Hello, <strong>Vue</strong>!</p>',
    };
  },
};
</script>

ここでは、レンダリングされる HTML 文字列が格納され、htmlStringディレクティブ(ここ)v-htmlを介してレンダリングする必要がある要素にバインドされます。<div>Vue はhtmlStringHTML 内の文字列を解析し、レンダリングされた要素に挿入します。

角度のある

HTML 文字列は、属性を使用して[innerHTML]Angular でレンダリングできます。

<div [innerHTML]="htmlString"></div>

ここで、レンダリングされる HTML 文字列は、htmlString名前付きの変数に格納され、[innerHTML]プロパティにバインドされます。Angular はhtmlString文字列を HTML に解析し、対応する DOM ノードに挿入します。

他のフレームワークと同様に、[innerHTML]プロパティ バインディングを使用する場合は特別な注意が必要です。レンダリングされた HTML 文字列が信頼性があり安全であることを確認し、XSS 攻撃などのセキュリティ問題を防ぐために、ユーザー入力または信頼できないソースから HTML 文字列を直接取得しないようにします。

さらに、Angular は、アプリケーションをセキュリティの脅威から保護するために、いくつかの組み込みセキュリティ メカニズムも提供します。DomSanitizerたとえば、 HTML 文字列のエスケープや検証など、Angular の組み込みの機能を使用してアプリのセキュリティを向上させることができます。

import {
    
     Component } from '@angular/core';
import {
    
     DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
    
    
  selector: 'app-example',
  template: `
    <div [innerHTML]="getSafeHtml()"></div>
  `,
})
export class ExampleComponent {
    
    
  htmlString: string = '<p>Hello, <strong>Angular</strong>!</p>';

  constructor(private sanitizer: DomSanitizer) {
    
    }

  getSafeHtml(): SafeHtml {
    
    
    return this.sanitizer.bypassSecurityTrustHtml(this.htmlString);
  }
}

ここではまず、Angular の組み込みサービスとタイプである と をDomSanitizerインポートします。SafeHtml次に、コンポーネントのDomSanitizercallメソッドを使用してbypassSecurityTrustHtml()HTML 文字列をエスケープし、検証します。最後に、安全な HTML レンダリングのために、返されたSafeHtmlオブジェクトをプロパティにバインドします[innerHTML]。

DomSanitizerサービスを使用することで、Angular は HTML 文字列のセキュリティ チェックを実行し、信頼できるコンテンツのみのレンダリングを許可するため、潜在的なセキュリティ リスクが軽減されます。

を使用する場合はDomSanitizer、信頼できる検証済みの HTML 文字列のみを操作し、ユーザー入力や信頼できないソースから HTML 文字列を直接取得しないように注意してください。これにより、アプリケーションのセキュリティが確保され、潜在的な XSS 攻撃などのセキュリティ問題が防止されます。

2、HTMLサニタイザーAPI

上記の例からわかるように、HTML だけでなく一般的なフレームでも HTML 文字列をレンダリングする際には、特定のセキュリティ リスクが存在します。ユーザーが指定した、または信頼できない HTML 文字列がアプリケーションに直接レンダリングされると、クロスサイト スクリプティング (XSS) などのセキュリティ上の脆弱性が発生する可能性があります。したがって、HTML 文字列を処理およびレンダリングする際の潜在的なセキュリティ問題を防ぐために、適切なセキュリティ対策を講じる必要があります。

では、HTML 文字列を安全にレンダリングできる方法は HTML にあるのでしょうか? はい、それは HTML Sanitizer API です。ただし、この API はまだ実験段階にあるため、すべての主要なブラウザーがこの API をサポートするまで実稼働環境で使用しないでください。将来のこの API の一般提供に備えて、この API がどのように使用されるかを見てみましょう。

それは何ですか

HTML Sanitizer API は、2021 年初めに仕様草案で初めて発表されました。Web サイト上で動的に更新される HTML に対するネイティブ ブラウザ サポートを提供し、そこから悪意のあるコードを削除できます。HTML サニタイザー API を使用すると、安全でない HTML 文字列やオブジェクトを DOM に挿入する前にサニタイズDocumentおよびサニタイズすることができます。DocumentFragment

クリーニング用に別の API を構築する主な目的は次のとおりです。

  • Web アプリケーションにおけるクロスサイト スクリプティング攻撃の攻撃対象領域を削減します。
  • 現在のユーザー エージェントでの HTML 出力の安全性を保証します。
  • クリーナーの操作性を向上させ、より使いやすくなりました。

HTML Sanitizer API は、潜在的なセキュリティ リスクを軽減し、ユーザー エージェントのセキュリティを向上させるために HTML を処理およびサニタイズする便利で安全な方法を提供するために登場しました。

Sanitizer API は、文字列のサニタイズ プロセスに一連の新しい関数を提供します。

  • ユーザー入力のサニタイズ: この API の主な機能は、文字列を受け入れて、より安全な形式に変換することです。これらの変換された文字列によって JavaScript が誤って実行されることはなく、アプリケーションがクロスサイト スクリプティング攻撃から確実に保護されます。
  • ブラウザのメンテナンス: このライブラリはブラウザにプリインストールされており、バグや新しい攻撃ベクトルが発見されると更新されます。これで、外部ライブラリをインポートしなくても、組み込みのピュリファイアが完成しました。
  • 安全で使いやすい: サニタイズをブラウザに移行することで、より簡単、安全、高速になりました。ブラウザには強力で安全なパーサーがすでに備わっているため、DOM 内のすべてのアクティブな要素をどう処理するかを認識しています。JavaScript で開発された外部パーサーは、ブラウザーに比べて高価であり、すぐに時代遅れになる可能性があります。

使い方？

Sanitizer API の使用は、Sanitizer()コンストラクターを使用してクラスをインスタンス化しSanitizer、インスタンスを構成するだけで簡単です。

データ クレンジングのために、API は 3 つの基本的なメソッドを提供します。いつ、どのように使用するかを見てみましょう。

  • 暗黙的なコンテキストを使用して文字列をサニタイズする

Element.setHTML()文字列を解析してサニタイズし、すぐに DOM に挿入するために使用されます。これは、ターゲット DOM 要素がわかっていて、HTML コンテンツが文字列として存在する場合に機能します。

const $div = document.querySelector('div');
const user_input = `<em>Hello There</em><img src="" οnerrοr=alert(0)>`;
const sanitizer = new Sanitizer() // Our Sanitizer

$div.setHTML(user_input, sanitizer); // <div><em>Hello There</em><img src=""></div>

ここでは、のターゲット要素user_stringに HTML を挿入します。つまり、XSS と同じ効果をリスクなしで実現することが望ましいということです。idtargettarget.innerHTML = value

  • 指定されたコンテキストを使用して文字列をサニタイズします

Sanitizer.sanitizeFor()後で DOM に追加する文字列を解析、サニタイズし、準備するために使用されます。この方法は、HTML コンテンツが文字列として存在し、ターゲットの DOM 要素タイプがわかっている場合 (たとえばdiv、 、 ) に最適に機能します。span

const user_input = `<em>Hello There</em><img src="" οnerrοr=alert(0)>`
const sanitizer = new Sanitizer()

sanitizer.sanitizeFor("div", user_input) // HTMLDivElement <div>

Sanitizer.sanitizeFor()最初の引数は、この結果が対象とするノードのタイプを記述します。

このメソッドを使用する場合sanitizeFor()、HTML 文字列の解析結果は、その文字列が含まれるコンテキスト/要素によって異なります。<td>たとえば、要素を含む HTML 文字列を要素に挿入する場合は<table>許可されます。ただし<div>、要素に挿入された場合は削除されます。したがって、Sanitizer.sanitizeFor()このメソッドを使用する場合は、引数に対象要素のラベルを指定する必要があります。

sanitizeFor(element, input)

ここで、HTML 要素で使用して、.innerHTML文字列形式でクリーニング結果を取得することもできます。

sanitizer.sanitizeFor("div", user_input).innerHTML // <em>Hello There</em><img src="">
  • ノードで浄化する

ユーザー制御可能な がすでに存在する場合、このメソッドを使用してDOM ツリー ノードをサニタイズDocumentFragmentできます。Sanitizer.sanitize()

const sanitizer = new Sanitizer()
const $userDiv = ...;
$div.replaceChildren(s.sanitize($userDiv));

特に、Sanitizer API は、属性とタグを削除およびフィルタリングすることによって HTML 文字列を変更します。たとえば、サニタイザー API は次のとおりです。

  • 特定のタグ (スクリプト、マーキー、ヘッド、フレーム、メニュー、オブジェクトなど) を削除しますが、コンテンツ タグは保持します。
  • ほとんどの属性を削除します。タグ上のとのみが<a>保持され、他の属性は削除されます。href<td><th>colspans
  • スクリプトの実行を引き起こす可能性のある文字列をフィルターします。

カスタマイズ

デフォルトでは、Sanitizer インスタンスは XSS 攻撃を防ぐためにのみ使用されます。ただし、場合によっては、カスタム構成のクリーナーが必要になる場合があります。次に、Sanitizer API をカスタマイズする方法を見てみましょう。

カスタム サニタイザー構成を作成する場合は、サニタイザー API の初期化時に構成オブジェクトを作成し、それをコンストラクターに渡すだけです。

const config = {
    
    
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {
    
    },
  dropAttributes: {
    
    },
  allowCustomElements: true,
  allowComments: true
};
// 清理结果由配置定制
new Sanitizer(config)

次の設定パラメータは、サニタイザーが特定の要素のサニタイズ結果をどのように処理するかを定義します。

  • allowElements: クリーナーが保持する必要がある入力内の要素を指定します。
  • blockElements: クリーナーが入力から削除するが、その子は保持する必要がある要素を指定します。
  • dropElements: クリーナーが子を含む要素を入力から削除することを指定します。
const str = `hello <b><i>there</i></b>`

new Sanitizer().sanitizeFor("div", str)
// <div>hello <b><i>there</i></b></div>

new Sanitizer({
    
    allowElements: [ "b" ]}).sanitizeFor("div", str)
// <div>hello <b>there</b></div>

new Sanitizer({
    
    blockElements: [ "b" ]}).sanitizeFor("div", str)
// <div>hello <i>there</i></div>

new Sanitizer({
    
    allowElements: []}).sanitizeFor("div", str)
// <div>hello there</div>

allowAttributesおよびパラメータを使用してdropAttributes、どの属性を許可または削除するかを定義します。

const str = `<span id=foo class=bar style="color: red">hello there</span>`

new Sanitizer().sanitizeFor("div", str)
// <div><span id="foo" class="bar" style="color: red">hello there</span></div>

new Sanitizer({
    
    allowAttributes: {
    
    "style": ["span"]}}).sanitizeFor("div", str)
// <div><span style="color: red">hello there</span></div>

new Sanitizer({
    
    dropAttributes: {
    
    "id": ["span"]}}).sanitizeFor("div", str)
// <div><span class="bar" style="color: red">hello there</span></div>

AllowCustomElementsカスタム要素の使用を許可または拒否するパラメーター。

const str = `<elem>hello there</elem>`

new Sanitizer().sanitizeFor("div", str);
// <div></div>

new Sanitizer({
    
     allowCustomElements: true,
                allowElements: ["div", "elem"]
              }).sanitizeFor("div", str);
// <div><elem>hello there</elem></div>

注: r がSanitize引数なしで、明示的に定義された構成もなしに作成された場合、デフォルトの構成値が適用されます。

ブラウザのサポート

現在、サニタイザー API に対するブラウザーのサポートは制限されており、仕様はまだ開発中です。API はまだ実験段階であるため、運用環境で使用する前に変更に注意してください。

写真

3. サードパーティのライブラリ

現時点では、ネイティブ API も一般的に使用されているフロントエンド フレームワークも、HTML を安全にレンダリングするための有効な方法を提供していないことがわかります。実際の開発では、既存のサードパーティ ライブラリを使用して HTML を安全にレンダリングできます。一般的に使用されるライブラリをいくつか紹介します。

DOMPurify

DOMPurify は、ブラウザ環境での HTML サニタイズとクロスサイト スクリプティング (XSS) からの保護のための人気のある JavaScript ライブラリです。悪意のあるコードを削除し、危険なタグと属性をフィルタリングすることにより、Web ページを XSS 攻撃から保護します。DOMPurify は厳密な解析および検証戦略を使用し、開発者がニーズに応じてカスタマイズできる構成可能なオプションを提供します。既存の Web アプリケーションに簡単に統合でき、安全で信頼できる HTML サニタイズ ソリューションとして広く認められています。

DOMPurify は次の手順で使用できます。

  1. まず、DOMPurify ライブラリをインストールします。次のコマンドを実行してインストールできます。
npm install dompurify
  1. 使用する必要があるコンポーネント ファイルに、DOMPurify ライブラリを導入します。
import DOMPurify from 'dompurify';
  1. コンポーネントの適切な位置で、DOMPurify を使用して HTML 文字列を精製します。以下では例として React を使用します。
import React from 'react';

const MyComponent = () => {
    
    
  const userInput = '<script>alert("XSS");</script><p>Hello, World!</p>';
  const cleanedHtml = DOMPurify.sanitize(userInput);

  return <div dangerouslySetInnerHTML={
    
    {
    
     __html: cleanedHtml }}></div>;
};

ここでは、dangerouslySetInnerHTMLReact コンポーネントの props にサニタイズされた HTML コンテンツを渡すことで、安全な HTML が表示されます。

DOMPurify には、DOMPurify の動作をカスタマイズするために使用できるいくつかのオプションと構成が用意されています。

import DOMPurify from 'dompurify';

// 创建自定义的白名单（允许的标签和属性）
const myCustomWhiteList = DOMPurify.sanitize.defaults.allowedTags.concat(['custom-tag']);
const myCustomAttributes = ['data-custom-attr'];

// 创建自定义选项
const myOptions = {
    
    
  ALLOWED_TAGS: myCustomWhiteList,
  ATTRIBUTES: {
    
    
    ...DOMPurify.sanitize.defaults.ALLOWED_ATTR,
    'custom-tag': myCustomAttributes,
  },
};

const userInput = '<script>alert("XSS");</script><p>Hello, World!</p><custom-tag data-custom-attr="custom-value">Custom Content</custom-tag>';

const cleanedHtml = DOMPurify.sanitize(userInput, myOptions);

console.log(cleanedHtml);
// 输出: <p>Hello, World!</p><custom-tag data-custom-attr="custom-value">Custom Content</custom-tag>

カスタム ホワイトリストはここで定義されておりmyCustomWhiteList、DOMPurify のデフォルトの許可タグが含まれており、custom-tagという名前のカスタム タグが追加されます。data-custom-attrカスタム プロパティを含むオブジェクトも定義しますmyCustomAttributes。次に、と をmyOptionsオーバーライドすることでカスタム ホワイトリストと属性ルールを適用するカスタム オプションが作成されました。最後に、このメソッドを使用し、HTML とユーザーが入力したカスタム オプションを渡すと、DOMPurify はカスタム ルールに従ってフィルタリングし、精製します。ALLOWED_TAGSATTRIBUTESDOMPurify.sanitize()myOptions

必要に応じて独自のホワイトリスト (許可されたタグ) とプロパティを定義し、それらをカスタム オプションで使用して DOMPurify の動作をカスタマイズできます。

js-xss

js-xss は、クロスサイト スクリプティング攻撃 (XSS) を防止およびフィルタリングするための JavaScript ライブラリです。これは、ブラウザ環境でレンダリングされる HTML が安全であることを保証するために、ユーザーが入力した HTML コンテンツをサニタイズおよびエスケープできる一連のメソッドと関数を提供します。

js-xss ライブラリは、ホワイトリスト フィルターの概念を使用して XSS 攻撃を防御します。これは、許可される HTML タグと属性のセットを定義し、フィルタリング ルールをカスタマイズするためのいくつかのオプションと構成も提供します。js-xss を使用すると、ユーザーが送信した HTML コンテンツをサニタイズし、潜在的に危険なコードをすべて削除またはエスケープし、安全な HTML タグと属性のみを保持することができます。

js-xss は次の手順で使用できます。

  1. js-xss ライブラリをインストールする: npm または Yarn を介して js-xss ライブラリをインストールします。
npm install xss
  1. js-xss ライブラリをインポートする: React コンポーネント ファイルに js-xss ライブラリをインポートします。
import xss from 'xss';
  1. js-xss を使用して HTML コンテンツをフィルタリングします。HTML をフィルタリングする必要がある場合は、js-xss メソッドを呼び出して HTML を精製します。
import React from 'react';
import xss from 'xss';

const MyComponent = () => {
    
    
  const userInput = '<script>alert("XSS");</script><p>Hello, World!</p>';
  const cleanedHtml = xss(userInput);

  return <div dangerouslySetInnerHTML={
    
    {
    
     __html: cleanedHtml }} />;
};

export default MyComponent;

ここでは、HTML コンテンツをレンダリングするためにMyComponentコンポーネント内で属性が使用されます。この関数を呼び出してユーザーが入力した HTML を渡すことdangerouslySetInnerHTMLで、それをフィルタリングしてサニタイズし、結果をコンポーネントのコンテンツとして設定できます。xss()

js-xss ライブラリには、カスタム フィルタリング ルールの定義に使用できるいくつかのオプションと構成が用意されています。

import xss from 'xss';

// 创建自定义WhiteList过滤规则
const myCustomWhiteList = {
    
    
  a: ['href', 'title', 'target'], // 只允许'a'标签的'href', 'title', 'target'属性
  p: [], // 允许空白的'p'标签
  img: ['src', 'alt'], // 只允许'img'标签的'src', 'alt'属性
};

// 创建自定义选项
const myOptions = {
    
    
  whiteList: myCustomWhiteList, // 使用自定义的WhiteList过滤规则
};

const userInput = '<script>alert("XSS");</script><p>Hello, World!</p><a href="https://example.com" target="_blank">Example</a>';

const cleanedHtml = xss(userInput, myOptions);

console.log(cleanedHtml);
// 输出: <p>Hello, World!</p><a href="https://example.com" target="_blank">Example</a>

カスタムWhiteListフィルター ルールがここで定義されmyCustomWhiteList、定義されたオプションに渡されますmyOptions。次に、xss()関数が呼び出されると、ユーザーが入力した HTML とカスタム オプションが渡され、js-xss ライブラリがカスタム ルールに従ってフィルタリングおよび精製します。

サニタイズ-html

sanitize-html は、HTML コードをサニタイズおよびフィルタリングするための JavaScript ライブラリです。これは、潜在的に悪意のあるコンテンツや安全でないコンテンツを削除し、クロスサイト スクリプティング (XSS) などのセキュリティ脆弱性からアプリケーションを保護するように設計されています。これは、ユーザーが入力した HTML コードをサニタイズする簡単で柔軟な方法を提供し、安全なタグ、属性、スタイルのみが残り、悪意のあるコードや潜在的に危険なコンテンツが含まれないようにします。

sanitize-html は、ホワイトリスト (構成オプション) を使用して、許可されるタグ、属性、スタイルを定義し、ホワイトリストにないすべてのコンテンツをフィルタリングして削除します。また、タグの不一致、タグのネストの問題、その他の HTML 関連の問題も処理できます。

Sanitize-html は次の手順で使用できます。

  1. sanitize-html ライブラリをプロジェクトにインストールします。
npm install sanitize-html
  1. コンポーネントに sanitize-html ライブラリを導入します。
import sanitizeHtml from 'sanitize-html';
  1. コンポーネント内の関数を使用して、sanitizeHtmlHTML コードをサニタイズおよびフィルタリングします。たとえば、ユーザーが入力した HTML をコンポーネントの状態またはプロパティに保存し、sanitizeHtmlレンダリング時に関数を適用できます。
import React from 'react';
import sanitizeHtml from 'sanitize-html';

function MyComponent() {
    
    
  const userInput = '<script>alert("XSS");</script><p>Hello, World!</p>';
  const cleanedHtml = sanitizeHtml(userInput);

  return (
    <div>
      <div dangerouslySetInnerHTML={
    
    {
    
     __html: cleanedHtml }}></div>
    </div>
  );
}

ここでは、ユーザーが入力した HTML コードがコンポーネント内で定義され、sanitizeHtmlそれをサニタイズするために関数が使用されます。dangerouslySetInnerHTMLサニタイズされた HTML コードは、属性を使用してページ上にレンダリングされます。

sanitize-html が提供する関数を使用しsanitize、設定オブジェクトをパラメータとして渡して、sanitize-html の設定をカスタマイズできます。設定オブジェクトには、フィルタリング ルールおよび許可される HTML タグと属性を定義するための一連のオプションを含めることができます。

import sanitizeHtml from 'sanitize-html';

const customConfig = {
    
    
  allowedTags: ['b', 'i', 'u'], // 允许的标签
  allowedAttributes: {
    
    
    a: ['href'] // 允许的a标签属性
  },
  allowedSchemes: ['http', 'https'], // 允许的URL协议
  allowedClasses: {
    
    
    b: ['bold', 'highlight'], // 允许的b标签的class
    i: ['italic'] // 允许的i标签的class
  },
  transformTags: {
    
    
    b: 'strong', // 将b标签转换为strong标签
    i: 'em' // 将i标签转换为em标签
  },
  nonTextTags: ['style', 'script', 'textarea', 'noscript'] // 不允许解析的标签
};

const userInput = '<b class="bold">Hello</b> <i class="italic">World</i> <a href="https://example.com">Link</a>';

const cleanedHtml = sanitizeHtml(userInput, customConfig);

ここで config という名前の構成オブジェクトが作成されますcustomConfig。このオブジェクトには、いくつかのカスタム フィルタリング ルールとオプションが含まれています。この構成オブジェクトは、許可されるタグ、許可される属性、許可される URL プロトコル、許可される CSS クラス名、タグ変換ルール、および解析が許可されないタグを定義します。

次に、ユーザーが入力した HTML コードが最初のパラメーターとして関数に渡されsanitizeHtml、さらにcustomConfig2 番目のパラメーターとしても渡されます。sanitizeHtmlこの関数は、構成オブジェクトで定義されたルールに従って HTML コードをフィルタリングおよび精製し、精製された HTML コードを返します。

おすすめ

転載: blog.csdn.net/weixin_44733660/article/details/132279747
おすすめ
大規模な言語モデルに基づくオープンソースのナレッジベースの質問と回答システムである MaxKB GitHub Star の数が 5,000 を超えました。
ランキング
短线选股的一种方法
Javaクライアントでのユーバーのリズムワークフローで睡眠時間をキャンセルし、再スケジュール
CALIPSOデータバッチダウンロード方式
LeetCode アルゴリズム再帰クラス - ソードはオファー 26 を参照します。 ツリーの部分構造
HTMLのインポート外部CSS、JavaScriptの論文
PostgreSQL 13.1、12.5、11.10、10.15、9.6.20、および9.5.24がリリースされました
アップルは、エラーメッセージがポテトに接続されていた実行する方法ポテトポテトショーをダウンロードすることができません
あなたは空腹で突然電話を切っていますか？これはテクノロジーの裏側ですか、それともテスト用の銃ですか？
VIMエディタのヒント
動的計画法の最長共通部分列（LCS）
アーカイブ
もっと
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

コードワールド

© 2018 codetd.com