Reactのセキュリティ対策ベストプラクティス10選

Reactアプリを安全に保つ最善の方法をお探しですか？ それなら、ここがぴったりです。チームでReactアプリケーションのセキュリティ問題を見つけて修正できるよう、ベストプラクティスのチェックリストを作成しました。さらに、ReactのReactアプリケーションのコードを自動でテストしてセキュリティ上の問題を検出し、自動的に修正する方法もご紹介します。

さっそく始めましょう。

チートシートをダウンロード。

Reactのセキュリティ対策ベストプラクティス10選

1. データバインディングで標準のXSS保護を活用する

2. 危険なURLやURLを介したスクリプトインジェクションに注意する

3. HTMLをサニタイズしてレンダリングする

4. DOMへの直接アクセスを避ける

5. Reactのサーバーサイドレンダリングを安全に行う

6. 依存関係に既知の脆弱性がないか確認する

7. JSONインジェクション攻撃を避ける

8. 脆弱性のないバージョンのReactを使う

9. リンターの設定を活用する

10. 危険なライブラリコードを避ける

1. データバインディングでReact標準のXSS保護を活用する

Reactにはクロスサイトスクリプティング（XSS）の脆弱性がありますか？

Reactはデフォルトでは脆弱性が生じないように設計されていますが、開発者が有効にできるオプションによっては、クロスサイトスクリプティングに対して脆弱になる可能性があります。

ReactのXSS攻撃を防ぐにはどうすればよいですか？

波かっこ（{}）を使った標準のデータバインディングを使用すると、Reactが値を自動的にエスケープしてXSS攻撃を防ぎます。この保護が適用されるのはtextContentをレンダリングする場合のみで、HTML属性をレンダリングする場合には適用されない点に注意してください。

JSXのデータバインディング構文（{}）を使って、要素にデータを設定します。

このようにします：

<div>{data}</div>

独自の検証を行わずに、動的な属性値を使用するのは避けてください。

これは避けてください：

<form action={data}>...

2. 危険なURLやURLを介したスクリプトインジェクションに注意する

URLには、javascript:プロトコルを使って動的なスクリプトコンテンツを含めることができます。javascript:URLを介したスクリプトインジェクションを防ぐため、リンクがhttp:またはhttps:であることを検証してください。ネイティブのURL解析関数でURLを検証し、解析したプロトコルの値を許可リストと照合します。

このようにします：

function validateURL(url) {
  const parsed = new URL(url)
  return ['https:', 'http:'].includes(parsed.protocol)
}

<a href={validateURL(url) ? url : ''}>Click here!</a>

これは避けてください：

<a href={attackerControlled}>Click here!</a>

3. HTMLをサニタイズしてレンダリングする

dangerouslySetInnerHTMLを使うと、レンダリングされたDOMノードにHTMLを直接挿入できます。この方法で挿入するコンテンツは、必ず事前にサニタイズしてください。dangerouslySetInnerHTMLプロパティに値を設定する前に、dompurifyなどのサニタイズライブラリを使ってください。

DOMにHTMLを挿入するときはdompurifyを使いましょう。

このようにします：

import purify from "dompurify";
<div dangerouslySetInnerHTML={{ __html:purify.sanitize(data) }} />

4. DOMへの直接アクセスを避ける

DOMノードにコンテンツを直接挿入するためにDOMへアクセスすることは、常に避けてください。どうしても必要な場合は、dangerouslySetInnerHTMLを使ってHTMLを挿入し、挿入前にdompurifyでサニタイズしてください。

ReactのdangerouslySetInnerHTMLとは？

dangerouslySetInnerHTMLは、Reactアプリ内のHTML要素にHTMLコンテンツを直接挿入できるプロパティです。

このようにします：

import purify from "dompurify";
<div dangerouslySetInnerHTML={{__html:purify.sanitize(data) }} />

refsやfindDomNode()を使ってレンダリング済みのDOM要素にアクセスし、innerHTMLなどのプロパティやメソッドを介してコンテンツを直接挿入することは避けてください。

これは避けてください：

this.myRef.current.innerHTML = attackerControlledValue;

5. Reactのサーバーサイドレンダリングを安全に行う

ReactDOMServer.renderToString()やReactDOMServer.renderToStaticMarkup()などのサーバーサイドレンダリング関数を使用すると、データバインディングによってコンテンツが自動的にエスケープされます。

クライアントに文字列を送ってハイドレーションする前に、renderToStaticMarkup()の出力に文字列を連結することは避けてください。

XSSを防ぐため、サニタイズされていないデータをrenderToStaticMarkup()の出力に連結しないでください。

このようにします：

app.get("/", function (req, res) {
  return res.send(
    ReactDOMServer.renderToStaticMarkup(
      React.createElement("h1", null, "Hello World!")
    ) + otherData
  );
});

6. 依存関係に既知の脆弱性がないか確認する

サードパーティ製コンポーネントのバージョンによっては、JavaScriptのセキュリティ上の問題が含まれている場合があります。プロジェクトに追加する前に、ソフトウェア構成分析（SCA）ツールで依存関係を必ず確認し、新しいバージョンがリリースされたら更新してください。

Snyk VS Code拡張機能

VS CodeでReactアプリケーションを開発する際、Snyk拡張機能を使うと、プロジェクト内の既知の脆弱性について通知を受け取れます。package.jsonファイル内の波線の警告、Snyk拡張機能のパネル、VS Codeの問題パネルで確認できます。開発環境を離れることなく脆弱性を把握できるため、作業の流れを妨げません。

Snykアプリ（https://app.snyk.io）

Snykを使えば、Reactの脆弱性を修正するプルリクエスト（PR）はわずか3クリックで作成できます。まず、Snykのウェブアプリでアプリ内の修正対象の脆弱性を特定します。次に、この脆弱性を修正（複数ある場合はこれらの脆弱性を修正）をクリックします。Snyk製品の詳細はこちら。

続いて、Snykを使って脆弱性を修正するPRを作成するかどうか確認する画面が表示されます。

確認すると、Snykが作成したPRが表示されます。マージする前に、変更内容を確認してテストし、アプリが期待どおりに動作することを確かめられます。

Snyk CLI

無料のSnyk CLIで脆弱性をチェックすることもできます。ソースコード管理システムと連携して自動修正を受け取り、Snykで脆弱性を自動修正しましょう。

$ npx snyk test

7. JSONインジェクション攻撃を避ける

ReactのサーバーサイドレンダリングページとともにJSONデータを送信するのは一般的です。インジェクション攻撃を防ぐため、<文字は必ず無害な値にエスケープしてください。

JSON内のHTMLで特別な意味を持つ文字は、必ず同等の無害な文字にエスケープしてください。

このようにします：

window.__PRELOADED_STATE__ =   ${JSON.stringify(preloadedState).replace( /</g, '\\u003c')}

8. 脆弱性のないバージョンのReactを使う

Reactライブラリでは過去に深刻度の高い脆弱性がいくつか見つかっているため、常に最新バージョンを使うことをおすすめします。

reactとreact-domの脆弱なバージョンを避けるため、npm outdatedを実行して最新バージョンを確認し、最新の状態に保ってください。

9. リンターの設定を活用する

コード内のセキュリティ問題を自動的に検出し、修正方法を提案するリンターの設定やプラグインをインストールしてください。

ESLint React security configを使って、コードベースのセキュリティ問題を検出しましょう。

huskyなどのライブラリを使って、セキュリティ関連のリンター問題が検出された場合に失敗するコミット前フックを設定しましょう。

使用中のバージョンに脆弱性がある場合は、Snykを使って新しいバージョンに自動更新しましょう。

10. 危険なライブラリコードを避ける

ライブラリコードは、DOMへのHTMLの直接挿入など、危険な操作によく使われます。ライブラリコードを手動またはリンターで確認し、Reactのセキュリティ機構が安全でない方法で使われていないか検出してください。

dangerouslySetInnerHTML、innerHTML、未検証のURLなど、安全でないパターンを使うライブラリは避けてください。node_modulesフォルダにセキュリティリンターを適用し、ライブラリコード内の安全でないパターンを検出しましょう。

Reactセキュリティのチートシートをダウンロード

便利なPDFはこちらからダウンロードし、Reactアプリケーションのセキュリティを確認する際のチェックリストとしてご活用ください。