Reactの脆弱性を理解し、安全な開発を行うための対策

Reactの脆弱性を理解し、安全な開発を行うための対策

近年、Webアプリケーション開発の現場では、Reactおよび関連フレームワークにおけるセキュリティ脆弱性への関心が高まっています。

特に、2025年12月3日に公表された「React Server Components (RSC)」のリモートコード実行の脆弱性（CVE-2025-55182、通称「React2Shell」）は、CVSSスコア10.0（Critical）と評価される極めて深刻な問題です。

本記事では、この新たな脅威を深く掘り下げるとともに、Reactアプリケーションの安全性を確保するための多角的な対策について解説します。

React Server Componentsにおける脆弱性の現状

CVE-2025-55182「React2Shell」の概要と深刻度

「React2Shell」（CVE-2025-55182）は、React Server Components (RSC) において発生した、認証なしにリモートで任意のコードを実行できる極めて危険な脆弱性です。

この脆弱性は、RSCがクライアントから受け取ったデータを安全でない方法でデシリアライズ（復号）することに起因します。

攻撃者は、細工されたHTTPリクエストを送信するだけで、サーバー上で不正なコードを実行し、システムの完全な制御を奪う可能性があります。

CVSSスコアは最高評価の10.0（Critical）であり、これは2021年に世界中で猛威を振るったLog4Shell（CVE-2021-44228）と同等の深刻度を示しています。

JPCERT/CCは、本脆弱性に関する注意喚起を行い、速やかな対策を強く推奨しています（参考情報より）。

このスコアは、脆弱性の悪用が非常に容易であり、かつ成功した場合の影響が甚大であることを意味します。

開発者や運用者は、この深刻なリスクを十分に認識し、迅速な対応が求められます。

影響を受けるバージョンと関連フレームワーク

CVE-2025-55182の影響範囲は非常に広範です。具体的には、以下のReactおよび関連パッケージのバージョンが影響を受けます。

• React本体: 19.0, 19.1.0, 19.1.1, 19.2.0
• 関連パッケージ: react-server-dom-webpack, react-server-dom-parcel, react-server-dom-turbopack

また、React Server Componentsをサポートする主要なフレームワークやバンドラーも、その利用状況に応じて影響を受ける可能性があります。

具体例としては、Next.js (特に15.x、16.x、14.3.0-canary.77以降のCanaryリリース)、React Router (RSCモード)、Wakuなどが挙げられます。

注目すべきは、アプリケーションがReact Server Functionsエンドポイントを明示的に実装していなくても、React Server Componentsをサポートしているだけで脆弱性の影響を受ける可能性があるという点です（参考情報より）。

サーバーを使用しない静的なReactアプリケーションを除く多くのプロジェクトで、潜在的なリスクが存在すると言えるでしょう。

自身のプロジェクトがどのバージョンを使用し、どの関連フレームワークに依存しているかを正確に把握することが、対策の第一歩となります。

公的機関による注意喚起と悪用状況

このような重大な脆弱性に対して、各国の公的機関も迅速な対応を促しています。

日本のJPCERT/CC（Japan Computer Emergency Response Team Coordination Center）は、CVE-2025-55182に関する注意喚起を行い、開発者に対し修正済みバージョンへの更新を強く推奨しています（参考情報より）。

現時点（2025年12月4日時点）で実際の悪用事例は確認されていないものの、概念実証（PoC）コードがすでに公開されており、実際に悪用を試みる通信が観測されているとの報告もあります（参考情報より）。

これは、脆弱性が技術的に悪用可能であることが示されており、いつ大規模な攻撃が発生してもおかしくない状況であることを意味します。

また、IPA（独立行政法人 情報処理推進機構）やNICT（国立研究開発法人 情報通信研究機構）といった機関も、サイバーセキュリティに関する情報提供や研究開発を通じて、社会全体のセキュリティレベル向上に貢献しています（参考情報より）。

これらの公的機関が発信する最新情報を常に確認し、自社のシステムを守るための最善策を講じることが不可欠です。

Reactの主要な脆弱性とその影響

クライアントサイド脆弱性の種類と防御策

Reactアプリケーションは、多くの場合、ブラウザ上で動作するクライアントサイドコードを含んでいます。そのため、古典的なWeb脆弱性も依然として重要な脅威となります。

代表的なものとして、クロスサイトスクリプティング (XSS) が挙げられます。

ReactはJSXを使用しており、デフォルトで出力される文字列をエスケープする機構を持っていますが、dangerouslySetInnerHTML を不適切に使用したり、サードパーティライブラリの欠陥があったりすると、XSSの温床となる可能性があります。

ユーザーから受け取ったデータを表示する際には、必ず適切なエスケープ処理やサニタイズ（無害化）が必要です。

また、クロスサイトリクエストフォージェリ (CSRF) も注意すべき脆弱性の一つです。

セッション管理が不適切な場合、攻撃者が作成した悪意のあるページをユーザーが訪問するだけで、意図しない操作を実行させられる可能性があります。

CSRFトークンの導入や、SameSite Cookie属性の活用が有効な防御策となります。

さらに、APIエンドポイントを介したインジェクション攻撃も、クライアントサイドからの入力が最終的にサーバーサイドで処理されるため、注意が必要です。

Reactアプリケーション開発においては、これらの基本的なWebセキュリティ原則を常に意識したコーディングが求められます。

サーバーサイドレンダリング(SSR)特有の脆弱性とRSCの影響

Reactアプリケーションがサーバーサイドレンダリング（SSR）を利用する場合、クライアントサイドのみのアプリケーションとは異なるセキュリティ上の考慮事項が発生します。

SSRでは、サーバーでHTMLを生成しクライアントに返すため、サーバーサイドのコードに脆弱性があると、より深刻な影響を及ぼす可能性があります。

例えば、SSR中に機密データが誤ってHTMLに埋め込まれてしまい、クライアントに公開されるデータ流出のリスクが考えられます。

また、サーバーサイドで実行されるテンプレートエンジンやデータ取得ロジックに脆弱性があると、サーバーサイドインジェクションにつながる恐れもあります。

今回のReact Server Components (RSC) の脆弱性「React2Shell」は、まさにこのサーバーサイドのデータ処理、特にデシリアライズの過程で発生するものでした。

RSCはサーバーでコンポーネントをレンダリングし、その結果をクライアントにストリーミングする強力な機能ですが、その実装方法によっては、開発者が意図しないセキュリティ上の盲点となり得ます（参考情報より）。

サーバーサイドで実行されるコードが増えることは、それだけ攻撃ベクトルの増加を意味するため、SSRやRSCを利用する際は、サーバーサイドのセキュリティプラクティスを徹底する必要があります。

サードパーティライブラリの脆弱性とサプライチェーンリスク

現代のReact開発は、npmなどのパッケージマネージャーを通じて数多くのサードパーティライブラリに依存しています。

これらのライブラリは開発効率を飛躍的に向上させる一方で、そのライブラリ自体に脆弱性が潜んでいる場合、自社のアプリケーションもその影響を受けてしまいます。

これが「サプライチェーンリスク」と呼ばれるものです。

過去には、著名なパッケージがマルウェアに感染したり、意図しない脆弱性を含んでいたりする事例が数多く報告されています。

今回のCVE-2025-55182も、React本体と同時に複数の関連パッケージ（react-server-dom-webpackなど）が影響を受ける脆弱性でした（参考情報より）。

このようなリスクを軽減するためには、プロジェクトの依存関係を定期的にスキャンし、既知の脆弱性がないかを確認することが非常に重要です。

npm audit や yarn audit といったコマンドは、依存関係の脆弱性を自動的に検出してくれる便利なツールです。

また、利用するライブラリを選定する際には、活発にメンテナンスされているか、セキュリティに関するアナウンスが適切に行われているかなども確認し、信頼できるものを選ぶように心がけるべきです。

開発ツールのセキュリティもまた、サプライチェーンリスクの一部として考慮に入れる必要があります。

Reactの脆弱性を確認・診断する方法

依存関係のスキャンと脆弱性データベースの活用

Reactアプリケーションのセキュリティ診断において、最も基本的ながら重要なステップは、プロジェクトの依存関係に含まれる既知の脆弱性を特定することです。

これには、パッケージマネージャーに組み込まれた監査ツールが非常に有効です。

例えば、npm audit や yarn audit コマンドを実行するだけで、現在インストールされているパッケージに既知の脆弱性がないか、その解決策とともに報告してくれます。

これらのツールは、NPM Public Advisories や Yarn Audit Service といった公開された脆弱性データベースと連携しています。

より高度な分析には、Snyk や OWASP Dependency-Check のような専門の脆弱性スキャナーの利用も推奨されます。

これらのツールは、直接の依存関係だけでなく、間接的な依存関係（あるライブラリがさらに別のライブラリに依存している場合など）も深く掘り下げて分析し、潜在的なリスクを可視化してくれます。

また、JVN (Japan Vulnerability Notes) や NVD (National Vulnerability Database) といった公的な脆弱性データベースを定期的にチェックすることも重要です（参考情報より）。

最新の脆弱性情報をいち早くキャッチし、自身のプロジェクトに影響がないかを確認することで、迅速な対応が可能になります。

セキュリティスキャナーと静的コード解析(SAST)

依存関係のスキャンに加えて、アプリケーション自身のコードに潜在する脆弱性を特定するためには、セキュリティスキャナーや静的コード解析 (Static Application Security Testing: SAST) ツールが非常に有効です。

SASTツールは、実行することなくソースコードを分析し、SQLインジェクション、XSS、不適切な認証メカニズムなどの脆弱性を自動的に検出します。

Reactアプリケーションに特化したSASTツールやプラグインも存在し、JSXの記述方法、コンポーネントのライフサイクル、データフローなどを分析して、セキュリティ上の問題点を指摘してくれます。

例として、SonarQube, Checkmarx, Fortify といったツールが挙げられます。

これらのツールをCI/CDパイプラインに組み込むことで、開発プロセスのできるだけ早い段階で脆弱性を発見し、修正コストを削減することができます。

開発者は、これらのツールのレポートを参考に、自身のコーディングプラクティスを改善し、よりセキュアなコードを書くための学習に役立てることができます。

ただし、SASTツールは万能ではなく、すべての脆弱性を検出できるわけではないため、他の診断方法と組み合わせることが重要です。

侵入テスト( penetration test )と脆弱性診断サービスの活用

自動ツールによる診断だけでは発見が難しい、論理的な脆弱性や複雑な攻撃経路を特定するためには、侵入テスト（ペネトレーションテスト）が不可欠です。

侵入テストは、セキュリティ専門家が実際に攻撃者の視点に立ってシステムへの侵入を試みることで、現実的な脅威を洗い出す手法です。

Reactアプリケーションの場合、APIエンドポイントの認証・認可の不備、ビジネスロジックの脆弱性、不適切なデータ処理などが発見されることがあります。

特に、OWASP Top 10に挙げられるような主要なWeb脆弱性をターゲットにしたテストは、包括的なリスク評価に繋がります。

また、自社で専門家を確保することが難しい場合は、外部の脆弱性診断サービスを積極的に活用することも有効な手段です。

多くのベンダーが、Webアプリケーション診断、モバイルアプリケーション診断など、専門性の高いサービスを提供しています。

これらのサービスは、最新の攻撃手法やトレンドを熟知した専門家によって実施されるため、より網羅的で信頼性の高い診断結果を得ることができます。

一度だけでなく、システムの大きな変更があった際や、定期的に診断を実施することで、常に最新のセキュリティ状況を把握し、安全性を維持することが重要です。

具体的なReact脆弱性対策とその実装

最優先事項：アップデートとバージョン管理

Reactアプリケーションのセキュリティ対策において、最も重要かつ緊急性の高い対応は、影響を受けるコンポーネントやフレームワークを最新の修正済みバージョンにアップデートすることです。

CVE-2025-55182「React2Shell」のようなCVSSスコア10.0の脆弱性に対しては、アップデートが根本的な解決策となります。

具体的な修正済みバージョンは以下の通りです（参考情報より）。

• React: 19.0.1, 19.1.2, 19.2.1
• Next.js: 15.0.5, 15.1.9, 15.2.6, 15.3.6, 15.4.8, 15.5.7, 16.0.7

これらのバージョンには、脆弱性パッチが適用されており、システムを安全に保つために不可欠です。

アップデートを実施する際は、セマンティックバージョニング（Semantic Versioning）の原則を理解し、メジャーバージョンアップが伴う場合は、破壊的変更がないかドキュメントを十分に確認し、テスト環境で入念な検証を行う必要があります。

また、単にアップデートするだけでなく、依存関係を常に最新の状態に保つための仕組みを構築することが重要です。

CI/CDパイプラインに自動的な依存関係更新チェックや脆弱性スキャンを組み込むことで、新しい脆弱性が発見された際に迅速に対応できる体制を整えましょう。

これにより、セキュリティリスクを最小限に抑えることが可能になります。

安全なコーディングプラクティスとフレームワークの活用

アップデートは重要ですが、それだけでは不十分です。

開発者自身が日々のコーディングにおいて、セキュリティを意識したプラクティスを実践することが、より強固なアプリケーションを構築するために不可欠です。

基本的ながら効果的な対策として、入力値の厳格な検証と出力のエスケープが挙げられます。

ユーザーからの入力はすべて信頼せず、サーバーサイドとクライアントサイドの両方で、期待される形式や内容に合致しているかを徹底的に検証する必要があります。

Reactでは、dangerouslySetInnerHTML の使用は極力避け、どうしても利用する場合は、その内容を徹底的にサニタイズ（無害化）することが重要です。

また、適切な認証・認可の仕組みを実装し、ユーザーの権限に基づいたアクセス制御を徹底することも不可欠です。

フレームワークやライブラリが提供するセキュリティ機能を積極的に活用しましょう。

例えば、Reactの最新バージョンやNext.jsのようなフレームワークは、セキュリティを考慮した設計がなされています。

TypeScriptの導入も、型安全性を高めることで、一部のインジェクション攻撃やプログラミングミスによる脆弱性を予防する効果が期待できます。

開発チーム全体でセキュリティ意識を共有し、セキュアコーディングガイドラインを策定して遵守することが、アプリケーション全体の安全性を高めます。

環境とデプロイメントにおけるセキュリティ対策

アプリケーションのコードレベルの対策に加え、その稼働環境とデプロイメントプロセスにおけるセキュリティ対策も極めて重要です。

Webアプリケーションファイアウォール（WAF）の導入は、外部からの様々な攻撃（例: SQLインジェクション、XSS、RCEなど）を検知・防御する効果的な手段となります（参考情報より）。

WAFは、攻撃パターンを学習し、不審なトラフィックをブロックすることで、アプリケーションへの到達前に脅威を排除します。

また、HTTPヘッダーの強化も忘れてはなりません。

Content Security Policy (CSP) を設定することで、読み込みを許可するリソースのドメインを制限し、XSS攻撃の影響を軽減できます。

Strict-Transport-Security (HSTS) や X-Frame-Options などのヘッダーも、セキュリティを向上させる上で役立ちます。

サーバー環境では、最小権限の原則を徹底し、アプリケーションが必要とする最小限の権限のみを付与するべきです。

不要なポートの閉鎖、OSやミドルウェアの定期的なアップデートもセキュリティ基盤を強化します。

CI/CDパイプラインにおいては、脆弱性スキャンだけでなく、コンテナイメージのスキャンや、設定ファイルのセキュリティチェックなども組み込むことで、デプロイされる成果物の安全性を高めることができます。

これらの多層的なセキュリティ対策を講じることで、Reactアプリケーションはより堅牢なものとなるでしょう。

React Router, React Native, react-scriptsの脆弱性にも注目

React Routerにおけるセキュリティ上の考慮事項

Reactアプリケーションでルーティング機能を提供する「React Router」は非常に広く利用されていますが、その実装方法によってはセキュリティ上の脆弱性を生む可能性があります。

主な懸念点の一つは、ルーティング設定の不備による情報漏洩やアクセス制御のバイパスです。

例えば、認証が必要なページへのルーティングガードが適切に機能していない場合、URLを直接入力するだけで機密情報にアクセスできてしまう可能性があります。

また、動的なリダイレクトを実装する際に、ユーザー入力に基づいてリダイレクト先を決定すると、オープンリダイレクトの脆弱性につながることがあります。

これは、攻撃者がフィッシングサイトへユーザーを誘導するために悪用される可能性があります。

常に安全なリダイレクト先のみを許可するホワイトリスト方式を採用することが推奨されます。

React Routerを使用する際は、常に最新の安定版を利用し、公式ドキュメントで推奨されているセキュリティプラクティスに従うべきです。

特に、RSCモードが有効なNext.jsやその他のフレームワークと組み合わせる場合は、今回発表されたRSC関連の脆弱性（CVE-2025-55182）の影響を受ける可能性も考慮に入れる必要があります（参考情報より）。

ルーティングのテストには、認証・認可のテストケースを十分に含めることが重要です。

React Nativeアプリケーションの特有の脆弱性

React Nativeは、ネイティブモバイルアプリケーションを開発するためのフレームワークであり、Webアプリケーションとは異なる特有のセキュリティ上の課題を抱えています。

最も重要な点の1つは、モバイルデバイス上でのデータの保存方法です。

機密情報（認証トークン、個人情報など）をセキュアに保存せず、平文でストレージに保存してしまうと、デバイスの紛失やマルウェア感染によって情報が漏洩するリスクが高まります。

iOSのKeychainやAndroidのKeystoreといった、プラットフォーム固有のセキュアなストレージメカニズムを利用することが不可欠です。

また、APIキーやシークレット情報をアプリケーションのバンドルに直接ハードコーディングすることも避けるべきです。

これらの情報はビルド時に環境変数として注入するか、バックエンドから安全に取得する仕組みを構築する必要があります。

WebViewの利用も注意が必要です。

WebView内で外部のコンテンツを読み込む場合、XSSや他のWeb脆弱性のリスクが持ち込まれる可能性があります。

信頼できないコンテンツの読み込みは避け、JavaScriptの実行を制限するなど、厳格なセキュリティ設定を行うべきです。

さらに、React Nativeアプリケーションは、ネイティブモジュールを介してデバイスの機能にアクセスするため、パーミッションの適切な管理や、各プラットフォームのセキュリティガイドラインへの準拠が求められます。

`create-react-app` (`react-scripts`) とその依存関係の安全性

多くのReactプロジェクトで開発の初期段階に利用されてきた`create-react-app`は、手軽にReact開発環境を構築できるツールとして普及しました。

しかし、`create-react-app`が内部で利用する`react-scripts`パッケージとその依存関係には、既知の脆弱性が含まれる可能性があります。

`react-scripts`は、WebpackやBabel、ESLintといった複数のビルドツールやリンターを抽象化して提供しているため、そのどれか一つに脆弱性が見つかれば、アプリケーション全体に影響を及ぼすことになります。

例えば、かつてはWebpackのバージョンに起因する脆弱性や、依存する開発パッケージに脆弱性が見つかり、アップデートが推奨されることがありました。

重要なのは、`create-react-app`自体が現在、メンテナンスモードに入っており、活発な開発が停止しているという点です。

これは、将来的に新しい脆弱性が発見されても、公式な修正が提供されない可能性があることを意味します。

現在では、ViteやNext.jsのような、よりモダンでパフォーマンスに優れ、かつメンテナンスが継続されている代替ツールやフレームワークへの移行が強く推奨されています。

既存の`create-react-app`プロジェクトを使用している場合は、定期的にnpm auditなどを実行し、脆弱性がないかを確認するとともに、可能な限り新しい環境への移行を検討することが、長期的なセキュリティ維持の観点からも重要です。

常に依存関係を最新に保ち、利用するツールのメンテナンス状況にも注意を払うことで、サプライチェーンリスクを軽減できます。