Next.js で始めるセキュリティ入門

Next.jsで始めるセキュリティ入門 Shumpei / 2025.3.27

Shumpei フロントエンドエンジニア X: @seventhseven https://x.com/seventhseven 自己紹介

今日のゴール • Webアプリケーションにおけるセキュリティについて知るきっかけに • XSSに対して、Next.jsで実施する対応方法がわかる

おことわり - 今回は自分なりにまとめたことを共有する。という形で発表します - Webアプリケーションを想定しています

結論 • XSSについて、React（JSX）についてはデフォルトでサポートされている • ただそれだけでは対応できない箇所があるので、穴を塞ぐ意味でもやれておくことに越したことない

アジェンダ • 代表的なセキュリティリスク • セキュリティリスクへの対策 • 実装例 • まとめ

アジェンダ • 代表的なセキュリティリスク 👈 • セキュリティリスクへの対策 • 実装例 • まとめ

☠🔥 XSS クロスサイト・スクリプティング悪意あるスクリプトがアプリに埋め込まれ、そのスクリプトを読み込んだユーザのブラウザ上で実行されてしまう攻撃 ☝今回はこの話代表的なセキュリティリスク
☠🔥 CSRF クロスサイト・リクエストフォージェリ認証済みユーザの権限を悪用する。悪意あるサイト上に誘導し、その中でスクリプト実行やリンクを踏むことで好き勝手されてしまう攻撃

☠🔥 認証・セッション管理ログイン情報（Cookie属性など）・セッションID・トークンの期限設定などの管理不足からくる不正アクセス代表的なセキュリティリスク ☠🔥 認可・API保護など APIに権限を設定していなかったり、アクセストークンや認可チェックが不十分だ
と管理者用APIを呼び出せてしまう可能性がある

アジェンダ • 代表的なセキュリティリスク • セキュリティリスクへの対策 👈 • 実装例 • まとめ

XSSに対応する前提・ React（JSX）では {Value} とブラケットで囲えばデフォルトでエスケープされるため、基本的な対策はされている・ただし、それだけでは不十分な場合がある・img タグの
onerror に fetch スクリプトが書かれていて対策が不十分な場合に実行してしまうなどがある

XSSに対応する引用: https://vercel.com/guides/understanding-xss-attacks

ユーザが自由に入力したものを出力する場合、バリデーション・エスケープやサニタイズが必要 XSSに対応する 📝 エスケープスクリプトとして解釈できない文字列に変換し、見た目は維持しながら無効化すること　< …変換...
< 　> …変換... > 📝 サニタイズそもそもリスクになりうる文字列を削除すること（DOMPurifyなどを使う） https://www.npmjs.com/package/dompurify

XSSに対応するコンテンツセキュリティポリシー（ CSP）の導入・ CSPはブラウザ側で読み込めるコンテンツのソースを制限することができます。自分のサイトが提供するもの以外は実行しないようにすることが出来ます。　　https://vercel.com/docs/headers/security-headers ・next.conﬁg.js や、 middleware.js
に設定することも出来ます。　　https://nextjs.org/docs/app/building-your-application/conﬁguring/content-security-policy

XSSに対応する EX: クリックジャッキング対策・X-Frame-Options を HTTP ヘッダに追加し、iframe や frame タグで表示するコンテンツを制限するこ
とができます。・next.conﬁg.js や、 middleware.js に設定することも出来ます。　　 https://blog.logrocket.com/using-next-js-security-headers/#:~:text=The%20%60X,not%20emb edded%20in%20other%20websites https://www.ipa.go.jp/security/vuln/websecurity/clickjacking.html

EX: MIMEスニッフィング対策・X-Content-Type-Options を HTTP ヘッダに追加し、ブラウザが読み込める MIME タイプを　制限することができます。
・HTTP の仕様で、 Content-Type を指定してデータを送信することで、データの種類や形式を伝えている　ただし、ブラウザ側ではこの指定を従わずに送られたデータを自分で推測している XSSに対応する

EX: MIMEスニッフィング対策なんで？👇 ・メディアタイプの指定がない場合や、サーバ管理者が指定を誤った場合でもコンテンツを適切に処理するようにするために行われるもので、ファイルの拡張子や、データの中身から推測している。　　　　　そしてContent-Typeを設定しても無視される（らしい） XSSに対応する

EX: MIMEスニッフィング対策・この仕様を悪用して、本来実行できないはずのファイル形式を読み込んで、　悪意あるスクリプトを実行する攻撃・ヘッダに X-Content-Type-Options: nosniff を指定することで、MIMEスニッフィングを行わず、サーバがContent-Typeを指定したメディアタイプに必ず従うようになります。 XSSに対応する

アジェンダ • 代表的なセキュリティリスク • セキュリティリスクへの対策 • 実装例 👈 • まとめ

next.conﬁg.js の headers に設定する実装例 const nextConfig = { async
headers() { return [ { source: "/(.*)", headers: [ { key: "X-Frame-Options", value: "DENY" }, { key: "Content-Security-Policy", value: "default-src 'self' 'https://example.com'; image-src 'https://unsplash.com'; script-src 'self' https://www.google-analytics.com; font-src 'self' 'https://fonts.googleapis.com'", }, { key: "X-Content-Type-Options", value: "nosniff" }, ], }, ]; }, }; module.exports = nextConfig;

実装例レスポンスを確認するとヘッダに追加されていることがわかる

アジェンダ • 代表的なセキュリティリスク • セキュリティリスクへの対策 • 実装例 • まとめ 👈

まとめ 👉 アプリケーションの防御は色々ある • 今回はXSSについて話しましたが、CSRFやセッションハイジャックなど、色々対策する必要があります 👉 対策の考え方 • XSSについてはデータが入力される時も大事だが、出力時に気をつけることが大事

ありがとうございました

Next.js で始めるセキュリティ入門

Next.js で始めるセキュリティ入門

Shumpei O.

More Decks by Shumpei O.

Other Decks in Technology

Featured

Transcript