Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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