Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webブラウザのセキュリティ対策に役立つぞ!!~DevToolsの使い方~
Search
モブエンジニア(Masaki Okuda)
March 18, 2025
Technology
0
280
Webブラウザのセキュリティ対策に役立つぞ!!~DevToolsの使い方~
Security.any #03 セキュリティみんなに伝えたいLTで登壇した資料です
https://security-any.connpass.com/event/343644/
モブエンジニア(Masaki Okuda)
March 18, 2025
Tweet
Share
More Decks by モブエンジニア(Masaki Okuda)
See All by モブエンジニア(Masaki Okuda)
社外コミュニティの歩き方
masakiokuda
0
94
ゆるふわエンジニアでもAIフローにチャレンジしたい!!~Zapierのすゝめ~
masakiokuda
2
99
Cloud WANの基礎から応用~少しだけDeep Dive~
masakiokuda
4
140
越境を通じて技術とは異なる世界を見てみよう
masakiokuda
0
94
人事組織で経験したチーム崩壊 ~崩壊から得た教訓~
masakiokuda
3
1k
(供養枠)Microsoftが考える責任あるAI~開発者として実現するために~
masakiokuda
2
110
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
4
280
カスタマーサクセスの視点からAWS Summitの展示を考える~製品開発で活用できる勘所~
masakiokuda
2
180
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
260
Other Decks in Technology
See All in Technology
キャリアを支え組織力を高める「多層型ふりかえり」 / 20250821 Kazuki Mori
shift_evolve
PRO
2
300
人を動かすことについて考える
ichimichi
2
320
夢の印税生活 / Life on Royalties
tmtms
0
280
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
6
570
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
16
5.2k
ABEMAにおける 生成AI活用の現在地 / The Current Status of Generative AI at ABEMA
dekatotoro
0
650
.NET開発者のためのAzureの概要
tomokusaba
0
230
TypeScript入門
recruitengineers
PRO
10
1.8k
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
pfn
PRO
1
180
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
aeonpeople
2
270
事業価値と Engineering
recruitengineers
PRO
1
200
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
Gamification - CAS2011
davidbonilla
81
5.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Code Reviewing Like a Champion
maltzj
525
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
GraphQLとの向き合い方2022年版
quramy
49
14k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Transcript
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
基本機能その1(要素) Security.any #03 セキュリティみんなに伝えたいLT 13
基本機能その2(コンソール) Security.any #03 セキュリティみんなに伝えたいLT 14
基本機能その3(ソース) Security.any #03 セキュリティみんなに伝えたいLT 15
基本機能その4(ネットワーク) 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