Webブラウザのセキュリティ対策に役立つぞ！！～DevToolsの使い方～

Security.any #03 セキュリティみんなに伝えたいLTで登壇した資料です
https://security-any.connpass.com/event/343644/

Transcript

1. Webブラウザのセキュリティ対策に 役立つぞ!! ～DevToolsの使い方～ 2025.03.18（火） 奥田 雅基（@mob_engineer） Security.any #03 セキュリティみんなに伝えたいLT
2. 最初に・・・ •私自身、セキュリティ専門で携わってきた経 歴ではないため込み入ったお話はしない予 定です（お話もできないので…) Security.any #03 セキュリティみんなに伝えたいLT 2
3. 本LTのねらい・対象者 • 本LTのねらい • Google Chromeに標準搭載しているDevToolsを知ってもらう • 検証ツールを用いたWebブラウザでのセキュリティをゆるく考える • 対象者 • フロントエンド開発未経験・初心者 • 検証ツールをあまり使っていない方 • Webブラウザのセキュリティを考えたい方 Security.any #03 セキュリティみんなに伝えたいLT 3
4. お話しすること・お話ししないこと • お話しすること • Google Chromeに標準搭載されているDevTools • 検証ツールを用いたWebブラウザセキュリティ • お話ししないこと • 他ブラウザ（Edge、FireFox、Operaなど）に搭載されている検証 ツールとの比較 • パフォーマンス分析、メトリクスなどの機能紹介 • その他 Security.any #03 セキュリティみんなに伝えたいLT 4
5. 私は誰? • ペンネーム:モブエンジニア • 本名:奥田 雅基 • 経歴: • 2016年にシステム運用からキャリアスタート • 2019年に転職、PMO、ネットワークエンジニア としてキャリアを積み、2023年に社内教育担 当。現在はIaCを用いた社内開発担当 • 最近技術コミュニティ界隈でうろうろしており ますので、お気軽にお声がけください Qiita X Security.any #03 セキュリティみんなに伝えたいLT 5
6. お品書き • DevToolsを利用するようになったきっかけ • DevTools紹介 • DevToolsから考えるセキュリティ • まとめ Security.any #03 セキュリティみんなに伝えたいLT 6
7. 今回お伝えしたいこと •DevToolsを使いこなせば、よ り幸せになれるWebブラウザを 構築できる!! Security.any #03 セキュリティみんなに伝えたいLT 7
8. DevToolsを利用するように なったきっかけ Security.any #03 セキュリティみんなに伝えたいLT 8
9. はじまりは社内開発から • フロントエンド開発が未経験だったので、フロント側で発 生したエラーを「どのように」確認すればいいかよくわかって いませんでした。 • そんな時に、Google Chromeに標準搭載されている 「DevTools」を知り、使ってみたら「この機能面白いぞ」 と思いました。 Security.any #03 セキュリティみんなに伝えたいLT 9
10. DevToolsって こいつです Security.any #03 セキュリティみんなに伝えたいLT 10
11. DevTools紹介 Security.any #03 セキュリティみんなに伝えたいLT 11
12. DevToolsとは https://developer.chrome.com/docs/devtools?hl=ja Security.any #03 セキュリティみんなに伝えたいLT 12
13. 基本機能その１（要素） Security.any #03 セキュリティみんなに伝えたいLT 13
14. 基本機能その２（コンソール） Security.any #03 セキュリティみんなに伝えたいLT 14
15. 基本機能その３（ソース） Security.any #03 セキュリティみんなに伝えたいLT 15
16. 基本機能その４（ネットワーク） Security.any #03 セキュリティみんなに伝えたいLT 16
17. この話、Webブラウザの話だよね・・・ •大丈夫です、これからセキュリティ とつなげてお話しします!! Security.any #03 セキュリティみんなに伝えたいLT 17
18. DevToolsから考える セキュリティ Security.any #03 セキュリティみんなに伝えたいLT 18
19. 実は証明書も見ることができます Security.any #03 セキュリティみんなに伝えたいLT 19
20. ソースコードが見れるので・・・ • ソースコードに含まれている脆弱性 をChatGPTに探させるといったことも 可能です • 実はリクエスト情報も見ることができ るので、リクエスト内に機密情報が 含まれているかを調べることができま す https://www.mbsd.jp/research/20231106/chatgpt- as-sast-tool/ Security.any #03 セキュリティみんなに伝えたいLT 20
21. まとめ Security.any #03 セキュリティみんなに伝えたいLT 21
22. まとめ • Google Chromeに標準搭載されているDevToolsを 利用すれば、基本的な検証を行うことができる • 証明書情報、ソースコードも見ることができるので、生成 AIを活用しながら簡単な脆弱性診断も可能 • GUIベースで操作できるため、開発経験が浅い方でもす んなり触ることができる Security.any #03 セキュリティみんなに伝えたいLT 22
23. （参考）IPA ウエブ健康診断 診断内容 https://www.ipa.go.jp/security/vuln/websecurity/ug65p900000196e2-att/000017319.pdf Security.any #03 セキュリティみんなに伝えたいLT 23
24. 改めて、今回お伝えしたいこと •DevToolsを使いこなせば、よ り幸せになれるWebブラウザを 構築できる!! Security.any #03 セキュリティみんなに伝えたいLT 24
25. Security.any #03 セキュリティみんなに伝えたいLT 25