JavaScript で文字列をサニタイズする

Tahseen Tauseef 2023年10月12日

JavaScript JavaScript String

sanitize() メソッドを使用して JavaScript の文字列をサニタイズする
JavaScript で DomPurify の sanitize() メソッドを使用して文字列をサニタイズする

この記事では、サニタイズについて詳しく説明します。 HTML のデータのサニタイズや XSS 攻撃の防止に使用されるパッケージについても詳しく説明されています。

`sanitize()` メソッドを使用して JavaScript の文字列をサニタイズする

Web アプリケーションでは、HTML 入力が必要になることがよくあります。ただし、クロスサイトスクリプティング (XSS) 攻撃の対象となるため、Web ページに安全に表示することは困難です。

Sanitizer インターフェイスの sanitize() メソッドは、DOM ノードのツリーをサニタイズし、不要な要素や属性を削除します。フレーム内の Document インスタンスをサニタイズする場合など、データがすでに DOM ノードとして利用可能な場合に使用する必要があります。

デフォルトの sanitizer() 構成では、スクリプトタグ、カスタム要素、コメントなど、XSS 関連の入力が自動的に削除されます。この構成は、sanitizer() コンストラクタオプションを使用してカスタマイズできます。

構文：

sanitize(input)

パラメータ:

input: サニタイズする DocumentFragment または Document にすることができます。

戻り値:

戻り値はサニタイズされた DocumentFragment です。

ID username の iframe からのデータをサニタイズします。

例：

const sanitizer = new Sanitizer();  // Default sanitizer;

// Get the frame and its Document object
const frame_element = document.getElementById('username')
const unsanitized_frame_tree = frame_element.contentWindow.document;

// Sanitize the document tree and update the frame.
const sanitized_frame_tree = sanitizer.sanitize(unsanitized_frame_tree);
frame_element.replaceChildren(sanitized_frame_tree);

JavaScript で DomPurify の `sanitize()` メソッドを使用して文字列をサニタイズする

DOMPurify は、HTML、MathML、および SVG 用の DOM 専用の XSS サニタイザーであり、超高速で過度に寛容です。また、簡単に使用して開始できます。

DOMPurify は JavaScript で構築されており、最新のすべてのブラウザー (Safari (10+)、Opera (15+)、Internet Explorer (10+)、Edge、Firefox、Chrome など、Blink または WebKit を使用) と互換性があります。 MSIE6 やその他の古いブラウザーの影響を受けず、フォールバックを利用するか、何もしません。

自動化されたテストは現在、19 の異なるブラウザーをカバーしており、さらに追加する必要があります。また、Node.js v14.15.1、v15.4.0、v16.13.0、v17.0.0、およびそれ以前のバージョンも、JSDOM で DOMPurify を実行する場合に対象となります。

セキュリティの専門家は、オンライン攻撃と XSS に関する豊富な経験を持つ DOMPurify を作成しました。

DOMPurify の機能

DOMPurify は HTML をクリーンアップし、XSS 攻撃から保護します。汚れた HTML を含む文字列を DOMPurify にフィードすることができます。DOMPurify はクリーンな HTML を含む文字列を返します (特に設定されていない場合)。

DOMPurify は、有害な HTML を含むものをすべて削除します。それも比較的早い。

ブラウザーの技術を利用して XSS フィルターに変換するため、ブラウザーが高速であれば DOMPurify も高速になります。あなたのウェブサイトにDOMPurifyを含めるだけで、使い始めることができます。

縮小されていない開発バージョンを使用する

<script type="text/javascript" src="src/pure.js"></script>

縮小およびテスト済みの製品版を使用する

<script type="text/javascript" src="dist/pure.min.js"></script>

その後、次のコードを実行して文字列をサニタイズできます。

let clean = DOMPurify.sanitize(dirty);

生成された HTML は、innerHTML を使用して DOM 要素に書き込むか、document.write(). を使用して直接 DOM に書き込むことができます。それはあなた次第です。

デフォルトで HTML、SVG、および MathML が許可されることに注意してください。頻繁に使用される HTML だけが必要な場合は、簡単に配置することもできます。

let clean = DOMPurify.sanitize(dirty, {USE_PROFILES: {html: true}});

最初に HTML をサニタイズしてから編集すると、サニタイズの利点が失われる可能性があることに注意してください。サニタイズ後にサニタイズされたマークアップを別のライブラリに送信する場合は、ライブラリが HTML 自体に干渉しないことを確認してください。

マークアップをサニタイズした後、DOMPurify.removed プロパティを見て、削除された要素と属性を確認できます。

ノート

このプロパティを使用して、重要なセキュリティの選択を行わないでください。これは単なる好奇心のためのツールです。

Require.js のような AMD モジュールローダーを使用している場合は、このスクリプトを非同期で読み込むことができます。

import DOMPurify from 'dompurify';

var clean = DOMPurify.sanitize(dirty);

DOMPurify は、Node.js を使用するサーバー側と、Browserify または同等のトランスレーターを使用するクライアント側の両方で使用できます。 Node.js 4.x 以降が必要です。

DOMPurify は、アクティブとしてマークされているすべてのバージョンをサポートすることを目的としています。同時に、メンテナンスとしてマークされたバージョンのサポートを段階的に廃止します。

DOMPurify は、メンテナンス中のすべてのバージョンですぐに壊れるわけではありませんが、特定の以前のバージョンに対するテストの実行を停止します。

npm install dompurify

JSDOM v10 以降の場合:

const createDOMPurify = require('dompurify');
const {JSDOM} = require('jsdom');

const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);

const clean = DOMPurify.sanitize(dirty);

v10 より古い JSDOM バージョンの場合:

const createDOMPurify = require('dompurify');
const jsdom = require('jsdom').jsdom;

const window = jsdom('').defaultView;
const DOMPurify = createDOMPurify(window);

const clean = DOMPurify.sanitize(dirty);

DOMPurify でサポートされているもの

DOMPurify は、デフォルトで CSS および HTML カスタムデータ属性をサポートします。さらに、Shadow DOM をサポートし、DOM テンプレートを再帰的にサニタイズします。

また、JQuery の $() および elm.html() API で使用するために HTML をサニタイズしますが、問題は発生しません。

sanitize() メソッドを使用して JavaScript の文字列をサニタイズする

JavaScript で DomPurify の sanitize() メソッドを使用して文字列をサニタイズする