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.5k
「推測されやすい」パスワードを入力させないためにフロントエンドエンジニアができること
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
46
ふむふむと聞くだけで明日から使える! a-blog cmsの小技集
uidev1116
0
29
ここを教えてほしかった!初めての a-blog cms
uidev1116
0
22
Other Decks in Programming
See All in Programming
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.4k
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
170
Ruby Pattern Matching
bkuhlmann
0
940
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.7k
Docker_OSS_ホスティング入門
satokoki645
0
110
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
580
Going beyond Apache Parquet's default settings
xhochy
0
140
JavaScript Closure
asoluka
0
1.3k
Implementing Design Systems in Swift
seyfoyun
2
500
Snowflakeで眠ったデータを起こそう!
estie
0
160
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
1.1k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
How GitHub (no longer) Works
holman
305
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.4k
A Modern Web Designer's Workflow
chriscoyier
689
190k
What the flash - Photography Introduction
edds
64
11k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
GraphQLとの向き合い方2022年版
quramy
33
12k
Into the Great Unknown - MozCon
thekraken
15
1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Building Effective Engineering Teams - LeadDev
addyosmani
32
1.9k
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