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

Webブラウザのセキュリティ対策に役立つぞ!! ～DevToolsの使い方～ 2025.03.18（火）奥田雅基（@mob_engineer） Security.any #03 セキュリティみんなに伝えたいLT

最初に・・・ •私自身、セキュリティ専門で携わってきた経歴ではないため込み入ったお話はしない予定です（お話もできないので…) Security.any #03 セキュリティみんなに伝えたいLT 2

本LTのねらい・対象者 • 本LTのねらい • Google Chromeに標準搭載しているDevToolsを知ってもらう • 検証ツールを用いたWebブラウザでのセキュリティをゆるく考える • 対象者
• フロントエンド開発未経験・初心者 • 検証ツールをあまり使っていない方 • Webブラウザのセキュリティを考えたい方 Security.any #03 セキュリティみんなに伝えたいLT 3

お話しすること・お話ししないこと • お話しすること • Google Chromeに標準搭載されているDevTools • 検証ツールを用いたWebブラウザセキュリティ • お話ししないこと
• 他ブラウザ（Edge、FireFox、Operaなど）に搭載されている検証ツールとの比較 • パフォーマンス分析、メトリクスなどの機能紹介 • その他 Security.any #03 セキュリティみんなに伝えたいLT 4

私は誰? • ペンネーム:モブエンジニア • 本名:奥田雅基 • 経歴: • 2016年にシステム運用からキャリアスタート
• 2019年に転職、PMO、ネットワークエンジニアとしてキャリアを積み、2023年に社内教育担当。現在はIaCを用いた社内開発担当 • 最近技術コミュニティ界隈でうろうろしておりますので、お気軽にお声がけください Qiita X Security.any #03 セキュリティみんなに伝えたいLT 5

お品書き • DevToolsを利用するようになったきっかけ • DevTools紹介 • DevToolsから考えるセキュリティ • まとめ Security.any
#03 セキュリティみんなに伝えたいLT 6

今回お伝えしたいこと •DevToolsを使いこなせば、より幸せになれるWebブラウザを構築できる!! Security.any #03 セキュリティみんなに伝えたいLT 7

DevToolsを利用するようになったきっかけ Security.any #03 セキュリティみんなに伝えたいLT 8

はじまりは社内開発から • フロントエンド開発が未経験だったので、フロント側で発生したエラーを「どのように」確認すればいいかよくわかっていませんでした。 • そんな時に、Google Chromeに標準搭載されている「DevTools」を知り、使ってみたら「この機能面白いぞ」と思いました。
Security.any #03 セキュリティみんなに伝えたいLT 9

DevToolsってこいつです Security.any #03 セキュリティみんなに伝えたいLT 10

DevTools紹介 Security.any #03 セキュリティみんなに伝えたいLT 11

DevToolsとは https://developer.chrome.com/docs/devtools?hl=ja Security.any #03 セキュリティみんなに伝えたいLT 12

基本機能その１（要素） Security.any #03 セキュリティみんなに伝えたいLT 13

基本機能その２（コンソール） Security.any #03 セキュリティみんなに伝えたいLT 14

基本機能その３（ソース） Security.any #03 セキュリティみんなに伝えたいLT 15

基本機能その４（ネットワーク） Security.any #03 セキュリティみんなに伝えたいLT 16

この話、Webブラウザの話だよね・・・ •大丈夫です、これからセキュリティとつなげてお話しします!! Security.any #03 セキュリティみんなに伝えたいLT 17

DevToolsから考えるセキュリティ Security.any #03 セキュリティみんなに伝えたいLT 18

実は証明書も見ることができます Security.any #03 セキュリティみんなに伝えたいLT 19

ソースコードが見れるので・・・ • ソースコードに含まれている脆弱性をChatGPTに探させるといったことも可能です • 実はリクエスト情報も見ることができるので、リクエスト内に機密情報が含まれているかを調べることができます
https://www.mbsd.jp/research/20231106/chatgpt- as-sast-tool/ Security.any #03 セキュリティみんなに伝えたいLT 20

まとめ Security.any #03 セキュリティみんなに伝えたいLT 21

まとめ • Google Chromeに標準搭載されているDevToolsを利用すれば、基本的な検証を行うことができる • 証明書情報、ソースコードも見ることができるので、生成 AIを活用しながら簡単な脆弱性診断も可能 • GUIベースで操作できるため、開発経験が浅い方でもす
んなり触ることができる Security.any #03 セキュリティみんなに伝えたいLT 22

（参考）IPA ウエブ健康診断診断内容 https://www.ipa.go.jp/security/vuln/websecurity/ug65p900000196e2-att/000017319.pdf Security.any #03 セキュリティみんなに伝えたいLT 23

改めて、今回お伝えしたいこと •DevToolsを使いこなせば、より幸せになれるWebブラウザを構築できる!! Security.any #03 セキュリティみんなに伝えたいLT 24

Security.any #03 セキュリティみんなに伝えたいLT 25

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

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

モブエンジニア

More Decks by モブエンジニア

Other Decks in Technology

Featured

Transcript