はじめに
こんにちは。フロントエンドエンジニアのきぐれです。
今回は今年読んだ本の一冊である「フロントエンド開発のためのセキュリティ入門 知らなかったでは済まされない脆弱性対策の必須知識」について書こうと思います。
この記事はエモーションテックアドベントカレンダー 2023 の 21 日目の記事です。
きっかけ
脆弱性については、エモーションテックアドベントカレンダー 2023 の 9 日目で、 もときさんの記事でも取り上げられています。
上記記事をきっかけに最近のセキュリティ事情をキャッチアップし、脆弱性に関する基本を再確認するために「フロントエンド開発のためのセキュリティ入門」を読んでみました。
この本は、Web セキュリティの概要から始まり、ハンズオンで攻撃の理解や具体的な脆弱性への対策までを網羅しています。
内容
本の目次は下記の通りです
第 1 章 Web セキュリティ概要
第 2 章 本書のハンズオンの準備
第 3 章 HTTP
第 4 章 オリジンによる Web アプリケーション間のアクセス制限
第 5 章 XSS
第 6 章 その他の受動的攻撃（CSRF、クリックジャッキング、オープンリダイレクト）
第 7 章 認証・認可
第 8 章 ライブラリを狙ったセキュリティリスク
Appendix 本編では扱わなかったトピックの学習
感想
想定読者は、業務経験が３年未満のエンジニアやセキュリティに興味ある Web エンジニアですが、誰が読んでも基本に立ち返るという意味で良い本だと思いました。
解説だけでなく、ハンズオンを通じてセキュリティに対する視点を持つ事の重要さを実感することができます。
ユーザーの情報やプライバシーを守ることが求められる現代において、セキュリティへの理解と対策は不可欠だと思います。
各章ごとに印象に残った事を紹介していきたいと思います。
第 1 章 Web セキュリティ概要
第 1 章では、セキュリティの要件や Web 脆弱性の種類と傾向が書かれています。
脆弱性が発生する原因や非機能要件の重要さを説明しています。
例では 2017 年から 2021 年の僅か 4 年で、様々な脆弱性がランクアップ／ランクダウン／統合されていることが分かります。 脆弱性の傾向が年々変化していることが理解できます。
印象的だったのが、以下の言葉です。
- 「脆弱性とは、設計やコーディングで混入するバグである。」
理由はブラウザの脆弱性やブラウザのバグというイメージが強かったからです。
第 2 章 本書のハンズオンの準備
第 2 章では、脆弱性に対する実践的な対策を学ぶためのハンズオンの準備が詳しく解説されていました。
理論だけでなく、具体的な手順も示されており、実際の開発に役立つ内容でした。
2 章の後半では、 Node.js と Express を使った HTTP サーバーのハンズオンで解説することで
具体的に動作させることで理解を深めてもらいたい著者の意図・配慮を感じました。
第 3 章 HTTP
HTTP に関する知識が詳細に解説されています。
特に、通信のセキュリティに関する重要なポイントが取り上げられており、
安全な通信の確保に向けて、理解を深めてもらいたい著者の意図・配慮を感じました。
フロントエンド開発をしていると当たり前の仕組みを図解することによって 基本に立ち返ってほしいという第 2 章と同じ意図を感じました。
第 4 章 オリジンによる Web アプリケーション間のアクセス制限
Web アプリケーションのセキュリティを高めるために重要なオリジンに関する内容がありました。
クロスオリジンの問題や対策について理解が深まり、セキュアなアプリケーションの構築に対する意識が高まります。
CORS のハンズオンは、手を動かして動作を確認したい方におすすめの内容です。
第 5 章 XSS
XSS（Cross-Site Scripting）に焦点を当てた第 5 章では、具体的な攻撃手法やその対策がわかりやすく説明されていました。
開発者が注意すべきポイントが明確に示され、セキュリティ意識が向上します。
印象的だったのが、以下の言葉です。
ただ、大前提として設計やコーディングで混入するバグが無い事も重要だと思いました。
第 6 章 その他の受動的攻撃（CSRF、クリックジャッキング、オープンリダイレクト）
さまざまな受動的攻撃に対する対策が紹介されています。
特に CSRF やクリックジャッキングに関する具体的なケーススタディが参考になりました。
攻撃手法を理解することで、これらの脆弱性への対策が明確になります。
Web エンジニアになりたての頃は、iframe はセキュリティ的に良くないから使わないという説明だけの記憶でした。
本書では、クリックジャッキングを例に用いて具体的に何が悪いかを説明しています。
第 7 章 認証・認可
ユーザー認証やアクセス権限に関する第 7 章では、セキュリティの要となるトピックが網羅されています。
正確な認証手法や認可の仕組みについて理解が深まり、安全なユーザー管理の実践が可能になります。
認証・認可の仕組みをゼロから作り上げる機会はほとんど無いと思うので、ハンズオンで実践できるのは、うれしいですね。
印象的だったのが、以下の言葉です。
- 相手が誰かを確認することを「認証」、相手に権限を委譲すること「認可」という
- 認証の３要素
- 知識情報
- 所持情報
- 生体情報
どれもふわっと分かっていた気になっていることに気付かされました。
第 8 章 ライブラリを狙ったセキュリティリスク
第 8 章では、ライブラリを利用する際のセキュリティ上のリスクに焦点を当てています。
外部ライブラリの選定や適切な管理に関する知識が得られ、安定した開発環境の構築に寄与しました。
全体を通して、実践的なアプローチと具体的な事例の紹介があり、現場での即効性がある内容となっています。
印象的だったのが、以下の言葉です。
- レビューが不十分なコードによる脆弱性の混入
第 5 章でも述べましたが、設計やコーディングの精度の高さが重要だと再確認できます。
おわりに
脆弱性については、ブラウザの脆弱性やブラウザのバグを見つけて報告するバグハンターの知人のおかげで、 各ブラウザベンダーも脆弱性については注意を払っている事や脆弱性の対処の大変さを聞いていました。
脆弱性が原因で被害が出た場合、誰も幸せになれません。
この本を読んで、普段からの設計やコーディングの積み重ねが脆弱性の防止につながると思いました。
エモーションテックのフロントエンドチームは、毎週水曜日に相談会を開催しています。
フロントエンド相談会では、下記の事を共有して課題解決に努めています
- 技術的相談
- 実装方針の合意
- Dependabot, Renovate 等で、使用しているライブラリの適宜アップデート内容の確認と更新
- New Relic を利用したエラー情報の共有
チーム全体でプロダクトの状態・状況・課題を共有することで、脆弱性の標的にならないよう実践しています。
エモーションテックでは顧客体験、従業員体験の改善をサポートし、世の中の体験を変えるプロダクトを開発しています。
プロダクトに興味のある方、この記事や他の記事を見て少しでも弊社に興味をもっていただけましたら、ぜひ採用ページからご応募をお願いいたします。
