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
Benchmark
sysong
0
270
エラーって何種類あるの?
kajitack
5
320
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
520
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
Is Xcode slowly dying out in 2025?
uetyo
1
210
C++20 射影変換
faithandbrave
0
550
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
170
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
580
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
330
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
290
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
400
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
How STYLIGHT went responsive
nonsquared
100
5.6k
Writing Fast Ruby
sferik
628
62k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Practical Orchestrator
shlominoach
188
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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