🚅
どこまで対応すべき？zaruさん イエラエ山崎さんに聞く 今フロントエンドで知っておくべき脆弱性対策
公開
2025-04-13
更新
2025-04-13
文章量
約3876字
Yard 編集部
Yardの編集部が、テック業界の最新トレンドや知見について発信します。
目次
はじめに
1. イベント概要と登壇者紹介
イベントの背景
登壇者
2. ウェブフロントエンドの脆弱性つまみ食い 2024年版（山崎さん）
XSSの発生パターン
対策のポイント
CSRFの誤認
3. Next.js AppRouter時代に抑えたいセキュリティ要点（zaruさん）
サーバーアクションズの仕組み
クライアントコンポーネントへの情報漏洩
対策のポイント
4. ディスカッション：フロントエンドに広がる責任範囲
責任範囲は増えているか
セキュリティを意識し始めた時期
5. 質疑応答で見えた現場の視点
コードレビューでのチェックポイント
フレームワーク固有の脆弱性パターン
フロントエンドが起点の攻撃を検知・監視する方法
6. 全体を踏まえた感想
はじめに
2024年11月6日にオンラインで開催された本イベントでは、「フロントエンドにおけるセキュリティ対策」をテーマに、GMOイエラエの山崎啓太郎さん（以下、山崎さん）とエンジニアのzaruさん（以下、zaruさん）をお招きしました。近年はバックエンドのセキュリティだけでなく、フロントエンドへの攻撃手法も多彩となり、XSSやCSRF、さらにはフレームワーク特有の脆弱性が問題視されています。本レポートでは、両名のLT内容を中心に、ディスカッションとQ&Aの要点をまとめました。
https://offers-jp.connpass.com/event/332685/
1. イベント概要と登壇者紹介
イベントの背景
フロントエンド領域でも、JSフレームワークの高度化やブラウザ機能の拡充に伴い、多様なサイバー攻撃が成立し得る時代になっています。従来はバックエンドのみで管理していた安全性やセキュリティロジックが、フロントエンドレイヤーにも求められ、エンジニアの責任範囲も拡大していると言えます。
登壇者
山崎 啓太郎 氏（@tyage） GMOイエラエ 高度診断部にてWebアプリのペネトレーションテスト（侵入テスト）を担当。多種多様な企業のWebサービスやソースコードを診断し、脆弱性やリスクを洗い出している。
zaru 氏（@zaru） ソフトウェアエンジニアとして、Next.jsをはじめとするフロントエンド領域も含め、幅広い開発を手がける。Next.jsのサーバーコンポーネントやサーバーアクションズの特性を深く理解し、独自の検証を行っている。
モデレーター: 大西 政徳 氏 サーバーサイド軸にしつつ、フロントエンドも扱うエンジニア。自身もセキュリティ周りに対して「どこまで備えるべきなのか」という疑問を持ち、今回の勉強会を企画した。
2. ウェブフロントエンドの脆弱性つまみ食い 2024年版（山崎さん）
山崎さんは脆弱性診断を専門とする立場から、Webフロントエンドで特に多い脆弱性を「XSS（クロスサイトスクリプティング）」と「CSRF（クロスサイトリクエストフォージェリ）」の2つに絞り、事例を交えながら解説しました。
XSSの発生パターン
危険なDOM操作
dangerouslySetInnerHTML（React）やinnerHTML（純粋なDOM API）は危険度が高い。ユーザーの入力値やMarkdown変換したHTMLをそのまま代入すると、JavaScriptが実行され、外部攻撃者が自由にスクリプトを動かす可能性がある。URLスキームの扱い
href属性にjavascript:などが入り込むとXSSが成立。React 19以降では対策されているケースもあるが、まだ十分でないことがある。
対策のポイント
怪しいAPIを使わない・使う場合は特殊な処理（HTMLサニタイズ）を挟む
コンテントセキュリティポリシー（CSP）の導入でリスクを低減（ただし過信は禁物）
linterやSASTツールで危険なコードを検出させる
CSRFの誤認
フロントエンドだけでは安全が担保できない 従来はバックエンドの問題とされがちだが、フロントエンドが勝手に複雑なURLパラメータを組み立ててリクエストする際、意図せず攻撃者が用意したページからアクセスされる可能性がある。
予期しないリクエストを送られないか メールやSNS経由で不正リンクを踏ませて、ユーザーの意図しないリクエストを送るシナリオが発生しやすい。フロントエンド側のURL設計やリクエスト時のユーザー確認処理なども考慮すべき。
3. Next.js AppRouter時代に抑えたいセキュリティ要点（zaruさん）
zaruさんは、Next.jsにおけるサーバーコンポーネントやサーバーアクションズの特性が脆弱性を誘発しがちな点を実際にデモで示しました。
サーバーアクションズの仕組み
UIから直にサーバー関数を呼び出せる 通常のAPIエンドポイントを定義せずとも、ボタンの
onClickでサーバーサイドの処理を直接呼べる。この利便性が、境界線を曖昧にし、危険なコードを書きがち。use serverディレクティブの誤用 関数ファイルの先頭にuse serverを付けると、そこに定義された関数がすべて外部に公開される形になる。意図しない関数までID付きで公開され、機密データを流出させる例も多い。
クライアントコンポーネントへの情報漏洩
いくらサーバーサイドでデータを安全に処理しても、クライアントに渡すPropsに含めた時点でブラウザに露出する。ユーザーのパスワードハッシュを思わず含めてしまうケースが後を絶たない。
バックエンド・フロントエンドの境界線を強く意識し、Propsに必要なものだけを厳密に絞り込むことが重要。
対策のポイント
サーバーアクションズは実質APIと同じ 引数を受け取ったらバリデーションを行い、不正なデータのまま処理を通さない。
use serverは最小限の関数だけに適用 1つのファイルに複数のexportを置くと意図せず公開される可能性あり。クライアントコンポーネントへのPropsは最小化 構造的型付け（TypeScript）がもたらす罠に注意。不要プロパティも一緒に流れていないかを意識し、必要な部分だけ選択して受け渡す。
4. ディスカッション：フロントエンドに広がる責任範囲
責任範囲は増えているか
zaruさん 「フロント・バック分離」時代に比べ、Next.jsのように境界をなくしたフレームワークが増え、エンジニアが両方をまたぐケースが増えた印象。利便性の一方で注意すべき点も多い。
山崎さん 既存ではバックエンドと明確に分離しているケースも多いが、PWAなどブラウザの機能拡張が進むほど、フロント側にも高いセキュリティリテラシーが求められる。
セキュリティを意識し始めた時期
zaruさん 実際に自分の運営していたサービスが攻撃を受け、情報流出した経験が転機になった。コードだけではなく、運用や組織のフロー含めてセキュリティ対策が必要と痛感。
山崎さん 学生の頃、自作アプリが攻撃されて興味を持ち始めた。実体験が危機感を高める最も効果的なきっかけだった。
5. 質疑応答で見えた現場の視点
コードレビューでのチェックポイント
山崎さん：外部から供給される値（URLやクエリ、ユーザー入力など）が最終的にどこへ渡るのかを追跡して、XSSなどにならないかを意識する。
zaruさん：フロントにはすべて疑う姿勢が必要。大規模なPropsでデータが一括渡しになっていると危険度が増すので、最小限に抑える。
フレームワーク固有の脆弱性パターン
現時点でNext.jsに特化した「専門診断サービス」はあまり見かけないが、ペネトレーションテストやSASTツール、そしてコミュニティによるナレッジ蓄積で補っている。
zaruさんはリポジトリのIssueをこまめにウォッチし、アップデート内容を把握する工夫をしている。
フロントエンドが起点の攻撃を検知・監視する方法
山崎さん：CSP（Content-Security-Policy）レポート機能で、ブラウザがスクリプト注入などを検知した際に通知させる手法がある。
zaruさん：ワフ（WAF）やEDRなど多段階で防御・監視する仕組みが必須。フロント単体では限界があるため、運用レイヤーも含めて考えたい。
6. 全体を踏まえた感想
フロントエンドのセキュリティ対策と一口に言っても、実際には 「フロントエンドだけで完結しない」 のが本質的な難しさだと感じました。やり取りするデータのバリデーションや権限チェック、あるいはユーザー入力のサニタイズなどはバックエンドの責務とも混在しやすく、境界線が曖昧になるほどエンジニアの責任範囲が広がるのです。
特にNext.jsのサーバーコンポーネントやサーバーアクションズは、フロントからバックエンドへの仕組みを抽象化するため、開発は高速になりますが、プロトコルを意識しない危険なコードを書く余地が生まれます。イベント中のデモで見たように、APIエンドポイント的な呼び出しがコードの一部としてさらっと記述できてしまう分、従来なら「API仕様を明確に詰めていた」段階で生じる脆弱性チェックを、つい怠ってしまいがちです。
しかし同時に、フレームワークによる恩恵は大きく、単に「曖昧だから怖い」と距離を置くのではなく、仕組みを理解したうえで効率よく開発することこそが望ましいと分かりました。山崎さんも指摘したように、最終的には攻撃者目線で「怪しいデータを入れられたらどうなるか」を考えることが肝であり、ツールや診断会社と組み合わせつつ「現場で継続的に学ぶ」姿勢が求められるように思います。
これからのフロントエンド開発では、境界線をまたぐ柔軟さゆえの脆弱性リスクとどう向き合うかが、エンジニアの腕の見せどころになっていくでしょう。本イベントを通じて、フロントとバックエンドの協力体制を強化しつつ、「疑わしい箇所はすべて検証」 という意識を持ち、より安全なサービスを作り続ける必要性を再確認できたのではないでしょうか。
Yardでは、テック領域に特化したスポット相談サービスを提供しています。
興味がある方は、初回の無料スポット相談をお申し込みください。
また、資料請求やお問い合わせもお待ちしております。テック領域の知見を獲得し、事業成長を一緒に実現していきましょう。
