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.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
76
ふむふむと聞くだけで明日から使える! a-blog cmsの小技集
uidev1116
0
33
ここを教えてほしかった!初めての a-blog cms
uidev1116
0
28
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
260
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
Click-free releases & the making of a CLI app
oheyadam
2
120
React への依存を最小にするフロントエンド設計
takonda
8
2.1k
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
250
Jakarta EE meets AI
ivargrimstad
0
170
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
150
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1k
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
250
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
130
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Ruby is Unlike a Banana
tanoku
97
11k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
110
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
4 Signs Your Business is Dying
shpigford
180
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
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