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

2025/3/27
エンジニアコミュニティ内での登壇

Transcript

1. Next.jsで始める セキュリティ入門 Shumpei / 2025.3.27
2. Shumpei フロントエンドエンジニア X: @seventhseven https://x.com/seventhseven 自己紹介
3. 今日のゴール • Webアプリケーションにおけるセキュリティについて知るきっかけに • XSSに対して、Next.jsで実施する対応方法がわかる
4. おことわり - 今回は自分なりにまとめたことを共有する。 という形で発表します - Webアプリケーションを想定しています
5. 結論 • XSSについて、React（JSX）についてはデフォルトでサポートされている • ただそれだけでは対応できない箇所があるので、 穴を塞ぐ意味でもやれておくことに越したことない
6. アジェンダ • 代表的なセキュリティリスク • セキュリティリスクへの対策 • 実装例 • まとめ
7. アジェンダ • 代表的なセキュリティリスク 👈 • セキュリティリスクへの対策 • 実装例 • まとめ
8. ☠🔥 XSS クロスサイト・スクリプティング 悪意あるスクリプトがアプリに埋め込ま れ、 そのスクリプトを読み込んだユーザのブ ラウザ上で実行されてしまう 攻撃 ☝今回はこの話 代表的なセキュリティリスク ☠🔥 CSRF クロスサイト・リクエストフォージェリ 認証済みユーザの権限を悪用する。悪 意あるサイト上に誘導し、その中でスク リプト実行やリンクを踏むことで好き勝 手されてしまう攻撃
9. ☠🔥 認証・セッション管理 ログイン情報（Cookie属性など）・セッ ションID・トークンの期限設定などの管 理不足からくる不正アクセス 代表的なセキュリティリスク ☠🔥 認可・API保護など APIに権限を設定していなかったり、アク セストークンや認可チェックが不十分だ と管理者用APIを呼び出せてしまう可能 性がある
10. アジェンダ • 代表的なセキュリティリスク • セキュリティリスクへの対策 👈 • 実装例 • まとめ
11. XSSに対応する 前提 ・ React（JSX）では {Value} とブラケットで囲えばデフォルトでエスケープされるため、 基本的な対策はされている ・ただし、それだけでは不十分な場合がある ・img タグの onerror に fetch スクリプトが書かれていて対策が不十分な場合に実 行してしまうなどがある
12. XSSに対応する 引用: https://vercel.com/guides/understanding-xss-attacks
13. ユーザが自由に入力したものを出力する場合、バリデーション・エスケープ やサニタイズが必要 XSSに対応する 📝 エスケープ スクリプトとして解釈できない文字列に 変換し、見た目は維持しながら無効化 すること 　< …変換... &lt; 　> …変換... &gt; 📝 サニタイズ そもそもリスクになりうる文字列を削除 すること （DOMPurifyなどを使う） https://www.npmjs.com/package/dompurify
14. XSSに対応する コンテンツセキュリティポリシー（ CSP）の導入 ・ CSPはブラウザ側で読み込めるコンテンツのソースを制限することができます。自分 のサイトが提供するもの以外は実行しないようにすることが出来ます。 　　https://vercel.com/docs/headers/security-headers ・next.config.js や、 middleware.js に設定することも出来ます。 　　https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy
15. XSSに対応する EX: クリックジャッキング対策 ・X-Frame-Options を HTTP ヘッダに追加し、iframe や frame タグで表示するコンテンツを制限するこ と ができます。 ・next.config.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
16. EX: MIMEスニッフィング対策 ・X-Content-Type-Options を HTTP ヘッダに追加し、ブラウザが読み込める MIME タ イプを 　制限することができます。 ・HTTP の仕様で、 Content-Type を指定してデータを送信することで、データの種類や 形式を伝えている 　ただし、ブラウザ側ではこの指定を従わずに送られたデータを自分で推測している XSSに対応する
17. EX: MIMEスニッフィング対策 なんで？👇 ・メディアタイプの指定がない場合や、サーバ管理者が指定を誤った場合でもコンテンツ を適切に処理するようにするために行われるもので、 ファイルの拡張子や、データの中身から推測している。 　　　　　そしてContent-Typeを設定しても無視される（らしい） XSSに対応する
18. EX: MIMEスニッフィング対策 ・この仕様を悪用して、本来実行できないはずのファイル形式を読み込んで、 　悪意あるスクリプトを実行する攻撃 ・ヘッダに X-Content-Type-Options: nosniff を指定することで、MIMEスニッフィングを行わず、 サーバがContent-Typeを指定したメディアタイプに必ず従うようになります。 XSSに対応する
19. アジェンダ • 代表的なセキュリティリスク • セキュリティリスクへの対策 • 実装例 👈 • まとめ
20. next.config.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;
21. 実装例 レスポンスを確認するとヘッダに追加されていることがわかる
22. アジェンダ • 代表的なセキュリティリスク • セキュリティリスクへの対策 • 実装例 • まとめ 👈
23. まとめ 👉 アプリケーションの防御は色々ある • 今回はXSSについて話しましたが、CSRFやセッションハイジャックなど、色々対策する必要 があります 👉 対策の考え方 • XSSについてはデータが入力される時も大事だが、出力時に気をつけることが大事
24. ありがとうございました