Chapter 03無料公開

React と Vue のエスケープ機構について

yu fujioka
yu fujioka
2020.10.11に更新
このチャプターの目次

React にも Vue にも、インプットされる文字列にはエスケープ処理が施されます。

そのため、React では以下の式が等価であり

<MyComponent message="&lt;3" />

<MyComponent message={'<3'} />

Vue では以下の式は

'<script>alert("hi")</script>'

以下の式に変換されます。

&lt;script&gt;alert(&quot;hi&quot;)&lt;/script&gt;

一般的に XSS 脆弱性を防ぐためにエスケープ処理を施すことはグッドパターンであり、ユーザーが直接入力した文字列リテラルをそのまま処理することは高いリスクを伴います。
※一方で、攻撃を無害化してアラートを挙げずに処理することは OWASP TOP 10 - A10:2017-Insufficient Logging & Monitoring が示す「不十分なロギングと監視」に該当することに留意が必要です。

これらのエスケープ機構によって React や Vue は XSS によるリスクを低減していますが、いくつかのパターンではこれらのエスケープ機構が機能しないケースが存在するため、「React だから大丈夫」「Vue を使っていれば XSS は起こらない」と断定することはできません。

代表的な例では dangerouslySetInnerHTMLv-html の使用が挙げられますが、残念ながらそれだけではありません。
次章からは、それぞれのフレームワークで混入し得る XSS 脆弱性について説明します。

References