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
5.8k
「推測されやすい」パスワードを入力させないためにフロントエンドエンジニアができること
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
79
ふむふむと聞くだけで明日から使える! a-blog cmsの小技集
uidev1116
0
35
ここを教えてほしかった!初めての a-blog cms
uidev1116
0
31
Other Decks in Programming
See All in Programming
Datadog Workflow Automation で圧倒的価値提供
showwin
1
100
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
210
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
2.9k
Jakarta EE meets AI
ivargrimstad
0
110
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
490
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
110
バッチを作らなきゃとなったときに考えること
irof
2
480
SwiftUI Viewの責務分離
elmetal
PRO
2
260
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
280
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
150
Rails アプリ地図考 Flush Cut
makicamel
1
130
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Writing Fast Ruby
sferik
628
61k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
YesSQL, Process and Tooling at Scale
rocio
172
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
A designer walks into a library…
pauljervisheath
205
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
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