sanitize-htmlとは

ユーザーが入力したテキストを安全な形式に変換するライブラリです。ユーザーが入力したテキストをHTMLとして表示する際、セキュリティ上の問題が発生する可能性があります。悪意あるユーザーからのクロスサイトスクリプティング攻撃（XSS攻撃）などです。 sanitize-htmlは不正なタグや属性を削除することができ、脆弱性を減らせます。

XSS攻撃
悪意のあるスクリプトを埋め込み、ページを閲覧しているユーザーのブラウザに実行させる攻撃手法です。入力されたデータを書き換えたり、ブラウザで実行されるスクリプトを埋め込んだりすることで、攻撃します。

例えば、攻撃者が書き込んだコメント欄に悪意のあるスクリプトを埋め込んでおき、Webページを閲覧したユーザーのブラウザがそのスクリプトを実行してしまうと、攻撃者はユーザーのCookie情報を盗み取ることができてしまいます。

sanitize-htmlは、このようなXSS攻撃を防ぐために開発されたライブラリの一つであり、HTMLやCSSなどのコードに含まれる悪意のある部分を削除し、安全な形に変換することができます。

sanitize-htmlのユースケース

主にWebアプリの開発で使用されます。例えば、ユーザーが入力したコメントや投稿内容などをHTMLとして表示する場合、sanitize-htmlを使用することで、不正なスクリプトが含まれていた場合に安全な形式に変換することができます。

また、sanitize-htmlはセキュリティ面だけでなく、デザイン面においても活用でき、ユーザーが入力したテキストを表示する場合、フォントや色、スタイルなどを一元管理することができます。

sanitize-htmlの特徴

XSS攻撃を防げる上に、テキストのデザインを一元管理することができるため、コードの見通しが良くなります。一方で、入力テキストを変換するための処理が追加されるので、レスポンス時間が遅くなります。

sanitize-htmlの書き方

ドキュメントより

インストール

npm

$ npm i sanitize-html -D
$ npm i @types/sanitize-html -D

sanitize.js

import * as sanitizeHtml from 'sanitize-html'

const html = "<strong>hello world</strong>";
console.log(sanitizeHtml(html));
console.log(sanitizeHtml("<img src=x onerror=alert('img') />"));
console.log(sanitizeHtml("console.log('hello world')"));
console.log(sanitizeHtml("<script>alert('hello world')</script>"));

sanitizeHtml関数(importで呼び出している)に引数としてHTMLコードを渡し、不正なスクリプトを取り除いた結果をログに出力しています。

console.log(sanitizeHtml(html)); : "hello world"の文字列が出力されます。sanitizeHtml関数が安全なHTMLとして認識したためです。

console.log(sanitizeHtml("<img src=x onerror=alert('img') />")); : onerror属性を利用して悪意のあるスクリプトを実行しようとしていますが、sanitizeHtml関数はこのスクリプトを取り除いたため、ログ出力されるのは空の文字列です。

console.log(sanitizeHtml("console.log('hello world')")); : console.log('hello world')を実行しようとしていますが、sanitizeHtml関数はscriptタグ自体を取り除くため、ログ出力されるのは空の文字列です。

console.log(sanitizeHtml("<script>alert('hello world')</script>")); : alert('hello world')を実行しようとしていますが、sanitizeHtml関数によってこのスクリプトが取り除かれているため、ログ出力されるのは空の文字列です。

このように、XSS攻撃を防いでいるわけですね。