React で XSS 攻撃を防ぐにはどうすればよいですか? (コード例)

[関連チュートリアルの推奨事項: React ビデオ チュートリアル ]

クロスサイト スクリプティング (XSS) 攻撃は、悪意のあるコードをシステムに挿入する一種の攻撃です。 Web ページにアクセスして攻撃を実行します。これは、フロントエンド Web 開発者が対処しなければならないサイバー攻撃の最も一般的な形式の 1 つであるため、攻撃がどのように機能するか、そしてそれを防ぐ方法を理解することが重要です。

この記事では、あなたもサイトとユーザーを保護できるように、React で書かれたいくつかのコード例を見ていきます。

例 1: React での XSS 攻撃の成功

すべての例で、同じ基本機能を実装します。ページには、ユーザーがテキストを入力できる検索ボックスが表示されます。 [実行] ボタンをクリックすると、検索の実行がシミュレートされ、確認テキストが画面に表示され、検索した用語がユーザーに繰り返し表示されます。これは、検索が可能な Web サイトの標準的な動作です。

# とてもシンプルですね。何が問題になる可能性がありますか?

さて、検索ボックスに HTML を入力したらどうなるでしょうか?次のコード スニペットを試してみましょう:

<img  alt="React で XSS 攻撃を防ぐにはどうすればよいですか? (コード例)" >

今何が起きますか?

おお、

onerror イベント ハンドラーが実行されました。それは私たちが望んでいることではありません!信頼できないユーザー入力から無意識のうちにスクリプトを実行していただけです。

#そうすると、ページ上に壊れた画像が表示されますが、これも私たちが望んでいることではありません。

それでは、どうやってここにたどり着いたのでしょうか?さて、検索結果をレンダリングする JSX のこの例では、次のコードを使用します。

<p>
  You searched for:
  <b><span></span></b>
</p>

ユーザー入力が解析されてレンダリングされる理由は、

dangerouslySetInnerHTML 属性を使用するためです。これは、ネイティブの innerHTML ブラウザ API と同じように動作する React の機能です。このため、この属性を使用することは一般的に安全ではないと考えられています。

例 2: React での XSS 攻撃の失敗

次に、XSS 攻撃に対する防御の成功例を見てみましょう。ここでの修正は非常に簡単です。ユーザー入力を安全にレンダリングするために、

dangerouslySetInnerHTML 属性を使用すべきではありません。代わりに、出力を次のようにコーディングしましょう:

<p>
  You searched for: <b>{this.state.submittedSearch}</b>
</p>

同じ入力を使用しますが、今回の出力は次のとおりです:

素晴らしい!ユーザー入力は画面上にテキストとして表示され、脅威は無力化されます。 ＃＃＃＃＃＃これは良い知らせです！ React はデフォルトでレンダリングされたコンテンツをエスケープし、すべてのデータをテキスト文字列として扱います。これはネイティブの

textContent

ブラウザ API を使用するのと同じです。

例 3: React での HTML コンテンツのクリーンアップ

したがって、ここでのアドバイスは簡単に思えます。 React コードでは dangerouslySetInnerHTML

を使用しないでください。大丈夫です。しかし、この機能を使用する必要がある場合はどうすればよいでしょうか?

たとえば、Drupal などのコンテンツ管理システム (CMS) からコンテンツを取得しており、そのコンテンツの一部にはマークアップが含まれているとします。 (ところで、そもそもテキスト コンテンツや CMS からの翻訳にタグを含めることはお勧めしませんが、この例では、あなたの意見が却下され、タグ付けされたコンテンツが残ると仮定します。)

この場合、本当に HTML を解析してページ上にレンダリングしたいと考えています。では、これを安全に行うにはどうすればよいでしょうか?

答えは、レンダリングする前に HTML をクリーンアップすることです。 HTML を完全にエスケープするのではなく、レンダリング前に関数を通じてコン​​テンツを実行し、悪意のある可能性のあるコードを削除します。

使用できる優れた HTML サニタイズ ライブラリが多数あります。サイバーセキュリティに関するあらゆることと同様、このような内容は自分で書かないほうが良いでしょう。良い人も悪い人も、あなたよりもはるかに賢い人もいます。彼らはあなたよりも考えています。必ず実証済みのソリューションを使用してください。

私のお気に入りのサニタイザー ライブラリの 1 つは sanitize-html (https://www.npmjs.com/package/sanitize-html) と呼ばれるもので、まさにその名前が示すとおりの機能を果たします。汚い HTML から始めて、それを関数を通して実行すると、出力としてきれいで安全な HTML が得られます。デフォルト設定よりもさらに制御したい場合は、許可される HTML タグと属性をカスタマイズすることもできます。

終了

以上です。 XSS 攻撃を実行する方法、それを防ぐ方法、必要に応じて HTML コンテンツを安全に解析する方法。

祝您程式愉快，安全無虞！

完整的程式碼範例可在GitHub 上找到：https://github.com/thawkin3/xss-demo

原文網址：https://blog. zhangbing.site/2019/11/24/protecting-against-xss-attacks-in-react/

##更多程式相關知識，請造訪：

程式學習！ ！

以上がReact で XSS 攻撃を防ぐにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。