フロントエンドで特に注意すべき攻撃
XSS（Cross Site Scripting / クロスサイトスクリプティング）
悪意のあるスクリプトがウェブサイトに注入される攻撃。ユーザーからの入力を検証またはエンコードせずに生成する出力内で使用する場合に発生しやすい。ブラウザが保持し、そのサイトで使用されているクッキー、セッション・トークン、その他の機密情報にアクセスすることができ、HTMLページのコンテンツを書き換えることもできる。
– OWASP 「Cross Site Scripting (XSS)」より抜粋。
※悪意のあるCSSを注入する「CSSインジェクション」も存在する。
CSRF（Cross-Site Request Forgeries / クロスサイトリクエストフォージェリ）
エンドユーザーが現在認証されているウェブアプリケーション上で、望ましくない動作を実行させる攻撃。攻撃者が選択したアクションを実行させることができる。被害者が一般ユーザの場合、CSRF 攻撃が成功すると、ユーザは送金、電子メールアドレスの変更など、状態を変更する要求を実行させられる。犠牲者が管理者アカウントの場合、CSRF はウェブアプリケーション全体を危険にさらす可能性がある。
– OWASP 「Cross Site Request Forgery (CSRF)」より抜粋。
XSS対策
不明な値をHTML/CSS/各属性として出力する際は事前にサニタイズする
文字列をHTMLとして出力する場合があるかと思いますが、悪意のあるスクリプトが入ると、簡単に実行されるため、事前にサニタイズしましょう。
最近のフロントライブラリでは基本的には自動でエスケープしてくれますが、ReactではdangerouslySetInnerHTML、Vueではv-htmlを使用すると、文字列がエスケープされずに出力されます。
また、文字列をHTMLとして挿入する場合に限らず、CSSでもurl()を利用してスクリプトを実行されたり、CSSインジェクションが可能になることもあります。
また、aタグのhref属性でもjavascript:から始まるとJavaScriptが実行可能なので、不明な値が来る場合は事前にサニタイズするべきです。
サニタイズしてくれるライブラリ等
- DOMPurify
- XSS
- sanitize-html
- HTML Sanitizer API（2022年10月現在、実験的機能）
CSP（Content-Security-Policy）を設定する
有効なソースのドメインを指定することで、ブラウザが実行可能なスクリプト等を制限する設定です。
サーバーからHTTPヘッダー「Content-Security-Policy」を返すか、metaタグを追加することで設定可能で、スクリプト、画像、メディアなど各ソースごとに設定できます。
XSS対策に有効ではありますが、ウェブアプリに入れている計測系サービスのスクリプト等も拒否される場合があるので、設定時には依存するサービスの確認・対応が必要となります。
eval関数を使用しない
eval関数は引数の文字列をJavaScriptとして実行する関数です。
引数に悪意のあるスクリプトが入る可能性がある場合、使用しないのがベストです。
XSS/CSRF共通
情報の保持場所・保持方法を十分に検討・判断する
情報の機密性に合わせて適切な保持場所・保持方法は十分に検討すべきです。
よくある保管先は、Cookie, localStorage, sessionStorage, インメモリ等。Web Workerを使用しているケースもあるようです。
Cookieのオプション属性を適切に設定する
特に重要な属性は以下３つです。
- HttpOnly(
Boolean): JavaScriptによるCookieの取得を許可しない - SameSite(
strict|lax|none）: Cookieを送信するドメインを制限する - Secure(
Boolean): HTTPSのリクエストのみ、Cookieの送信を許可する
その他
実行環境やライブラリに脆弱性がないか
使用しているバージョンのNode.js等に脆弱性がないか、依存先のライブラリに脆弱性がないか、は定期的にチェックしましょう。
ライブラリに脆弱性がないかは、npm auditやyarn auditで確認可能です。
機密情報がブラウザに公開されてないか
サービスによっては、APIキーなど機密性の高い情報がある場合があります。そういった情報がブラウザに公開されていないか確認しておきましょう。
環境変数を使用する場合もあるかと思いますが、Next.jsなどではブラウザへの公開/非公開を設定可能です。
