Reactで外部から取得したHTMLを表示したいことがあります。マークダウンをHTMLに変換した結果や、CMSから取得したリッチテキストなどです。このとき<code>dangerouslySetInnerHTML</code>を使いますが、名前の通り危険が伴います。DOMPurifyを使ってこの問題を解決したので備忘録です。
<h2 id="xss%E8%84%86%E5%BC%B1%E6%80%A7%E3%81%A8%E3%81%AF" data-line="3" class="code-line"><a class="header-anchor-link" href="#xss%E8%84%86%E5%BC%B1%E6%80%A7%E3%81%A8%E3%81%AF" aria-hidden="true"></a> XSS脆弱性とは</h2>
XSS（クロスサイトスクリプティング）は、Webアプリケーションの脆弱性の一つです。攻撃者が悪意のあるスクリプトを注入し、他のユーザーのブラウザで実行させます。
たとえば、ブログ記事のコメント欄で以下のような入力があった場合を考えます。
<div class="code-block-container"><pre class="language-html"><code class="language-html code-line" data-line="9">&lt;script&gt;alert('XSS攻撃!')&lt;/script&gt;
</code></pre></div>これをそのまま表示すると、スクリプトが実行されてしまいます。攻撃者はこれを悪用して、ログイン中のユーザーのCookieを盗んだり、偽のログインフォームを表示してパスワードを取得したりできます。
<h2 id="dangerouslysetinnerhtml%E3%81%A8%E3%81%AF" data-line="15" class="code-line"><a class="header-anchor-link" href="#dangerouslysetinnerhtml%E3%81%A8%E3%81%AF" aria-hidden="true"></a> dangerouslySetInnerHTMLとは</h2>
Reactは通常、文字列をそのままテキストとして表示します。<code>&lt;b&gt;太字&lt;/b&gt;</code>という文字列を渡しても、タグがエスケープされてそのまま表示されます。
HTMLとして解釈させたい場合は<code>dangerouslySetInnerHTML</code>を使います。
<div class="code-block-container"><pre class="language-tsx"><code class="language-tsx code-line" data-line="21">// そのまま表示 → &amp;lt;b&amp;gt;太字&amp;lt;/b&amp;gt;
&lt;div&gt;{htmlString}&lt;/div&gt;

// HTMLとして解釈 → **太字**
&lt;div dangerouslySetInnerHTML={{ __html: htmlString }} /&gt;
</code></pre></div>名前に「dangerously」とあるように、信頼できないHTMLを渡すとXSS脆弱性になります。マークダウンから変換したHTMLやCMSからのコンテンツなど、外部データを表示する場合はサニタイズが必要です。
<h2 id="html%E3%82%B5%E3%83%8B%E3%82%BF%E3%82%A4%E3%82%BA%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E6%AF%94%E8%BC%83" data-line="31" class="code-line"><a class="header-anchor-link" href="#html%E3%82%B5%E3%83%8B%E3%82%BF%E3%82%A4%E3%82%BA%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E6%AF%94%E8%BC%83" aria-hidden="true"></a> HTMLサニタイズライブラリの比較</h2>
HTMLをサニタイズするライブラリはいくつかあります。
<table data-line="35" class="code-line">
<thead data-line="35" class="code-line">
<tr data-line="35" class="code-line">
<th>ライブラリ</th>
<th>サイズ</th>
<th>特徴</th>
</tr>
</thead>
<tbody data-line="37" class="code-line">
<tr data-line="37" class="code-line">
<td>DOMPurify</td>
<td>約10KB</td>
<td>最も広く使われている。XSS攻撃パターンを網羅</td>
</tr>
<tr data-line="38" class="code-line">
<td>sanitize-html</td>
<td>約50KB</td>
<td>サーバーサイドでも動作。設定が柔軟</td>
</tr>
<tr data-line="39" class="code-line">
<td>xss</td>
<td>約30KB</td>
<td>中国語ドキュメントが充実</td>
</tr>
</tbody>
</table>
DOMPurifyを選ぶ理由は以下の通りです。
<ul data-line="43" class="code-line">
<li data-line="43" class="code-line">軽量で高速</li>
<li data-line="44" class="code-line">セキュリティ専門家によるメンテナンス</li>
<li data-line="45" class="code-line">新しいXSSベクターへの迅速な対応</li>
<li data-line="46" class="code-line">TypeScriptの型定義が公式提供</li>
</ul>
<h2 id="dompurify%E3%81%A8%E3%81%AF" data-line="48" class="code-line"><a class="header-anchor-link" href="#dompurify%E3%81%A8%E3%81%AF" aria-hidden="true"></a> DOMPurifyとは</h2>
DOMPurifyは、HTMLをサニタイズ（無害化）するJavaScriptライブラリです。危険なタグや属性を除去し、安全なHTMLだけを残します。

 <iframe 
 class="hatenablogcard" 
 style="width:100%;height:155px;max-width:680px;" 
 src="https://hatenablog-parts.com/embed?url=https://github.com/cure53/DOMPurify" 
 width="300" 
 height="150" 
 frameborder="0" 
 scrolling="no">
 </iframe> 
 
<h2 id="%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" data-line="54" class="code-line"><a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> インストール</h2>
npmでインストールします。
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="58">npm install dompurify
</code></pre></div>TypeScriptを使う場合は型定義もインストールします。
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="64">npm install -D @types/dompurify
</code></pre></div><h2 id="%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E4%BD%BF%E3%81%84%E6%96%B9" data-line="68" class="code-line"><a class="header-anchor-link" href="#%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> 基本的な使い方</h2>
<code>sanitize</code> メソッドにHTMLを渡すだけです。
<div class="code-block-container"><pre class="language-typescript"><code class="language-typescript code-line" data-line="72">import DOMPurify from 'dompurify'

const dirtyHtml = '&lt;script&gt;alert("XSS")&lt;/script&gt;&lt;p&gt;安全なテキスト&lt;/p&gt;'
const cleanHtml = DOMPurify.sanitize(dirtyHtml)

console.log(cleanHtml)
// 出力: &lt;p&gt;安全なテキスト&lt;/p&gt;
</code></pre></div><code>&lt;script&gt;</code> タグが除去され、安全な <code>&lt;p&gt;</code> タグだけが残ります。
<h2 id="react%E3%81%A7%E3%81%AE%E5%AE%9F%E8%A3%85%E4%BE%8B" data-line="84" class="code-line"><a class="header-anchor-link" href="#react%E3%81%A7%E3%81%AE%E5%AE%9F%E8%A3%85%E4%BE%8B" aria-hidden="true"></a> Reactでの実装例</h2>
<code>dangerouslySetInnerHTML</code>とDOMPurifyを組み合わせたコンポーネントを作ります。
<div class="code-block-container"><pre class="language-tsx"><code class="language-tsx code-line" data-line="88">import DOMPurify from 'dompurify'

type Props = {
 html: string
}

export const SafeHtml = ({ html }: Props) =&gt; {
 return (
 &lt;div
 dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html) }}
 /&gt;
 )
}
</code></pre></div>使い方はシンプルです。
<div class="code-block-container"><pre class="language-tsx"><code class="language-tsx code-line" data-line="106">// マークダウンから変換したHTMLを表示
&lt;SafeHtml html={markdownToHtml(content)} /&gt;

// CMSから取得したリッチテキストを表示
&lt;SafeHtml html={article.body} /&gt;
</code></pre></div><h2 id="%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA" data-line="114" class="code-line"><a class="header-anchor-link" href="#%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA" aria-hidden="true"></a> 設定のカスタマイズ</h2>
デフォルト設定で多くのケースに対応できますが、必要に応じてカスタマイズも可能です。
<h3 id="%E8%A8%B1%E5%8F%AF%E3%81%99%E3%82%8B%E3%82%BF%E3%82%B0%E3%82%92%E5%88%B6%E9%99%90%E3%81%99%E3%82%8B" data-line="118" class="code-line"><a class="header-anchor-link" href="#%E8%A8%B1%E5%8F%AF%E3%81%99%E3%82%8B%E3%82%BF%E3%82%B0%E3%82%92%E5%88%B6%E9%99%90%E3%81%99%E3%82%8B" aria-hidden="true"></a> 許可するタグを制限する</h3>
<div class="code-block-container"><pre class="language-typescript"><code class="language-typescript code-line" data-line="120">const cleanHtml = DOMPurify.sanitize(dirtyHtml, {
 ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
 ALLOWED_ATTR: ['href']
})
</code></pre></div><h3 id="%E3%81%99%E3%81%B9%E3%81%A6%E3%81%AE%E5%B1%9E%E6%80%A7%E3%82%92%E9%99%A4%E5%8E%BB%E3%81%99%E3%82%8B" data-line="127" class="code-line"><a class="header-anchor-link" href="#%E3%81%99%E3%81%B9%E3%81%A6%E3%81%AE%E5%B1%9E%E6%80%A7%E3%82%92%E9%99%A4%E5%8E%BB%E3%81%99%E3%82%8B" aria-hidden="true"></a> すべての属性を除去する</h3>
<div class="code-block-container"><pre class="language-typescript"><code class="language-typescript code-line" data-line="129">const cleanHtml = DOMPurify.sanitize(dirtyHtml, {
 ALLOWED_ATTR: []
})
</code></pre></div><h3 id="%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E3%81%BF%E3%82%92%E6%8A%BD%E5%87%BA%E3%81%99%E3%82%8B" data-line="135" class="code-line"><a class="header-anchor-link" href="#%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E3%81%BF%E3%82%92%E6%8A%BD%E5%87%BA%E3%81%99%E3%82%8B" aria-hidden="true"></a> テキストのみを抽出する</h3>
<div class="code-block-container"><pre class="language-typescript"><code class="language-typescript code-line" data-line="137">const textOnly = DOMPurify.sanitize(dirtyHtml, {
 ALLOWED_TAGS: [],
 ALLOWED_ATTR: []
})
</code></pre></div><h2 id="%E7%95%99%E6%84%8F%E7%82%B9" data-line="144" class="code-line"><a class="header-anchor-link" href="#%E7%95%99%E6%84%8F%E7%82%B9" aria-hidden="true"></a> 留意点</h2>
DOMPurifyを使っても完全な安全性は保証されません。以下の点に注意してください。
<ul data-line="148" class="code-line">
<li data-line="148" class="code-line">サーバーサイドでも検証する ：クライアントサイドだけでなく、サーバーサイドでも入力を検証してください。</li>
<li data-line="149" class="code-line">最新版を使う ：新しいXSS攻撃パターンに対応するため、定期的にアップデートしてください。</li>
<li data-line="150" class="code-line">CSPと組み合わせる ：Content Security Policy（CSP）を設定し、多層防御を実現してください。</li>
</ul>
<h2 id="%E5%8F%82%E8%80%83%E8%B3%87%E6%96%99" data-line="152" class="code-line"><a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E8%B3%87%E6%96%99" aria-hidden="true"></a> 参考資料</h2>
DOMPurifyの詳細な設定オプションは公式READMEを参照してください。

 <iframe 
 class="hatenablogcard" 
 style="width:100%;height:155px;max-width:680px;" 
 src="https://hatenablog-parts.com/embed?url=https://github.com/cure53/DOMPurify#can-i-configure-dompurify" 
 width="300" 
 height="150" 
 frameborder="0" 
 scrolling="no">
 </iframe> 
 
XSS脆弱性についてはOWASPのガイドが参考になります。

 <iframe 
 class="hatenablogcard" 
 style="width:100%;height:155px;max-width:680px;" 
 src="https://hatenablog-parts.com/embed?url=https://owasp.org/www-community/attacks/xss/" 
 width="300" 
 height="150" 
 frameborder="0" 
 scrolling="no">
 </iframe>

ReactのdangerouslySetInnerHTMLをDOMPurifyで安全に使う