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
「推測されやすい」パスワードを入力させないためにフロントエンドエンジニアができること
Search
uidev
August 27, 2023
Programming
13
6k
「推測されやすい」パスワードを入力させないためにフロントエンドエンジニアができること
2023/08/26(土)に開催された Frontend Nagoya #11 のセッションで使用したスライド資料です。
uidev
August 27, 2023
Tweet
Share
More Decks by uidev
See All by uidev
CMSの現状を知って広がるWordPressだけじゃないWebサイト制作の選択肢
uidev1116
0
88
ふむふむと聞くだけで明日から使える! a-blog cmsの小技集
uidev1116
0
39
ここを教えてほしかった!初めての a-blog cms
uidev1116
0
36
Other Decks in Programming
See All in Programming
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.2k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
460
リッチエディターを安全に開発・運用するために
unachang113
1
240
MCPで実現できる、Webサービス利用体験について
syumai
7
2k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.4k
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
2
210
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
300
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
560
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
330
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
290
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
440
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
A Tale of Four Properties
chriscoyier
160
23k
Side Projects
sachag
455
43k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Producing Creativity
orderedlist
PRO
346
40k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
What's in a price? How to price your products and services
michaelherold
246
12k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Raft: Consensus for Rubyists
vanstee
140
7k
Transcript
ʮਪଌ͞Ε͍͢ʯύεϫʔυΛ ೖྗͤ͞ͳ͍ͨΊʹϑϩϯτΤϯ υΤϯδχΞ͕Ͱ͖Δ͜ͱ ϑϩϯτΤϯυ໊ݹ vol. 11 2023/08/18
༗ݶձࣾΞοϓϧοϓϧ ϑϩϯτΤϯυΤϯδχΞ CMSΛ։ൃ͍ͯ͠ΔΤϯδχΞɻϑϩϯτΤ ϯυ͕͖ɻPHPͰόοΫΤϯυ։ൃ͠· ͢ɻFrontend Nagoya ͱ͍͏ษڧձΛओ࠵͠ ͯ·͢ɻϙέϞϯͱອը͕͖ɻ ӉҪ ొ
@uidev1116
ࠓͷత • ʮਪଌ͞Ε͍͢ʯύεϫʔυΛೖྗͤ͞ͳ͍ͨΊͷϚʔΫΞοϓΛΔ • ʮਪଌ͞Ε͍͢ʯύεϫʔυΛೖྗͤ͞ͳ͍ͨΊͷUIΛΔ • ʮਪଌ͞Ε͍͢ʯύεϫʔυΛೖྗͤ͞ͳ͍ͨΊͷػೳΛΔ
ύεϫʔυཧͷ՝ World Password Day Survey 2023 (Bitwarden) ΑΓ
52%
58%
🫠 ʮਪଌ͞Εʹ͍͘ʯύεϫʔυΛ ΘͤΔΈ͕ඞཁ
ʮਪଌ͞Ε͍͢ʯύεϫʔυΛೖྗ ͤ͞ͳ͍ͨΊͷϚʔΫΞοϓΛΔ
ϒϥβΈࠐΈػೳͷϝϦοτΛڗडͰ͖Δ • ύεϫʔυϚωʔδϟʔ • ΞΫηγϏϦςΟ
• <form>ɺ<label>ɺ<button> Λ༻͢Δ • type=“password" type=“email” ͳͲదͳ input λά
ͷܕΛ༻͢Δ • new-password current-password, username, email ͳͲదͳ autocomplete ଐੑΛ׆༻͢Δ • aria-describedby ଐੑΛ༻ͯ͠ɺύεϫʔυϙϦγʔΛઆ໌ ͢Δ
ύεϫʔυϚωʔδϟʔ🔑
<input type="password"> • ύεϫʔυΛ҆શʹೖྗ͢ΔͨΊͷܕ • 1 ͭ 1 ͭͷจࣈ͕ΞελϦεΫ ("*")
υοτ ("•") ͷΑ͏ͳه߸ʹΑͬ ͯӅ͞ΕΔ • ύεϫʔυϚωʔδϟʔ͕ݕՄೳ
autocomplete ଐੑ
• αΠϯΠϯϑΥʔϜͳͲͷطଘͷ ύεϫʔυೖྗ • ύεϫʔυϚωʔδϟʔʹΑΔύ εϫʔυͷࣗಈೖྗ "current-password"
"new-password" • αΠϯΞοϓϑΥʔϜ • ύεϫʔυมߋϑΥʔϜ • ύεϫʔυࣗಈੜ
ύεϫʔυࣗಈೖྗͷࢭ • Basicೝূػೳ • ύεϫʔυมߋػೳ
• ࠷ۙͷϒϥβͰແࢹͯ͠ύε ϫʔυͷࣗಈೖྗΛ͢Δ(“current- password” ͱಉ͡ڍಈ) “off"
༨ஊͰ͕͢… • autocomplete=“username” ΛϢʔβʔIDɾϝʔϧΞυϨεͷ <input />ʹࢦఆ͢Δͱɺtype="text" ͷೖྗϑΟʔϧυ͕ෳଘ ࡏͨ͠߹ɺ༏ઌͯ͠ʮϢʔβʔ໊ʯͱͯࣗ͠ಈೖྗٴͼอଘͯ͘͠ ΕΔ •
αΠϯΞοϓϑΥʔϜͷϢʔβʔ໊ʹར༻͢Δͱ👍
ʮਪଌ͞Ε͍͢ʯύεϫʔυΛೖྗ ͤ͞ͳ͍ͨΊͷUIΛΔ
֬ೝͷͨΊͷ࠶ೖྗඞཁͰ͔͢ 🤔
https://www.zuko.io/blog/should-you-use-con fi rm-password-on-your-forms- and-websites-case-study ύεϫʔυ֬ೝίϯόʔδϣϯΛԼ͛Δ 21
ίϐϖ͢Δ͚ͩͰ֬ೝͯ͠ͳ͍ 😮💨
ύεϫʔυදࣔΓସ͑ػೳ͕˕ • ύεϫʔυ͕Ӆ͞Ε͍ͯΔ߹ɺϢʔβʔύεϫʔυͷೖྗϛεΛ ͘͢͠ͳΔ • ೖྗϛε͕૿͑ΔͱϢʔβʔϩάΠϯ͢ΔҙཉΛࣦ͍ɺϏδωεత ʹଛࣦͱͳΔՄೳੑ͕͋Δ • ೖྗϛε͕૿͑ΔͱϢʔβʔೖྗϛεΛ͠ͳ͍ͨΊʹʮਪଌ͢͠ ͍ʯύεϫʔυΛ༻͢ΔՄೳੑ͕͋Δ
༨ஊͰ͕͢… • ϞόΠϧΩʔϘʔυ͕αΠϯΠϯϘλϯΛ͠ͳ͍Α͏ʹ͢Δ͜ͱ ݟམͱ͕͚ͪͩ͠Ͳେ👍
ʮਪଌ͞Ε͍͢ʯύεϫʔυΛೖྗ ͤ͞ͳ͍ͨΊͷػೳΛΔ
ύεϫʔυڧϝʔλʔ📏
zxcvbn • ΦϯϥΠϯετϨʔδαʔϏεΛఏڙ͍ͯ͠Δ Dropbox ͕։ൃɺ࣮ ࡍʹ༻͞Ε͍ͯΔύεϫʔυڧਪఆͷͨΊͷϥΠϒϥϦ
TypeScript ൛͋Γ·ͨ͠
ಋೖ؆୯ʂ
https://github.com/uidev1116/zxcvbn-ts-sample/ blob/master/src/main.ts 30 (JU)VCʹ͋͛ͯΈͨ✌
·ͱΊ
·ͱΊ ϒϥβͷศརͳΈࠐΈػೳΛར༻͢Δͨ ΊɺదͳHTMLλάΛར༻͠Α͏
·ͱΊ ֬ೝͷͨΊͷ࠶ೖྗ͕ඞཁ͔Ͳ͏͔ɺ࠶ݕ౼͠ ͯΈΑ͏ʂ
·ͱΊ zxcvbnΛ׆༻ͯ͠ύεϫʔυڧνΣοΧʔ Λ࣮͠Α͏ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ɻʂ @uidev1116