「推測されやすい」パスワードを入力させないためにフロントエンドエンジニアができること

2023/08/26(土)に開催された Frontend Nagoya #11
のセッションで使用したスライド資料です。

1. ʮਪଌ͞Ε΍͍͢ʯύεϫʔυΛ ೖྗͤ͞ͳ͍ͨΊʹϑϩϯτΤϯ υΤϯδχΞ͕Ͱ͖Δ͜ͱ ϑϩϯτΤϯυ໊ݹ԰ vol. 11 2023/08/18
2. ༗ݶձࣾΞοϓϧοϓϧ ϑϩϯτΤϯυΤϯδχΞ CMSΛ։ൃ͍ͯ͠ΔΤϯδχΞɻϑϩϯτΤ ϯυ͕޷͖ɻPHPͰόοΫΤϯυ։ൃ΋͠· ͢ɻFrontend Nagoya ͱ͍͏ษڧձΛओ࠵͠ ͯ·͢ɻϙέϞϯͱອը͕޷͖ɻ ӉҪ ཮ొ @uidev1116
3. ࠓ೔ͷ໨త • ʮਪଌ͞Ε΍͍͢ʯύεϫʔυΛೖྗͤ͞ͳ͍ͨΊͷϚʔΫΞοϓΛ஌Δ • ʮਪଌ͞Ε΍͍͢ʯύεϫʔυΛೖྗͤ͞ͳ͍ͨΊͷUIΛ஌Δ • ʮਪଌ͞Ε΍͍͢ʯύεϫʔυΛೖྗͤ͞ͳ͍ͨΊͷػೳΛ஌Δ
4. ύεϫʔυ؅ཧͷ՝୊ World Password Day Survey 2023 (Bitwarden) ΑΓ
5. 52%
6. 58%
7. 🫠 ʮਪଌ͞Εʹ͍͘ʯύεϫʔυΛ ࢖ΘͤΔ࢓૊Έ͕ඞཁ
8. ʮਪଌ͞Ε΍͍͢ʯύεϫʔυΛೖྗ ͤ͞ͳ͍ͨΊͷϚʔΫΞοϓΛ஌Δ
9. ϒϥ΢β૊ΈࠐΈػೳͷϝϦοτΛڗडͰ͖Δ • ύεϫʔυϚωʔδϟʔ • ΞΫηγϏϦςΟ
10. • <form>ɺ<label>ɺ<button> Λ࢖༻͢Δ • type=“password" ΍ type=“email” ͳͲద੾ͳ input λά ͷܕΛ࢖༻͢Δ • new-password ΍ current-password, username, email ͳͲద੾ͳ autocomplete ଐੑΛ׆༻͢Δ • aria-describedby ଐੑΛ࢖༻ͯ͠ɺύεϫʔυϙϦγʔΛઆ໌ ͢Δ
11. ύεϫʔυϚωʔδϟʔ🔑
12. <input type="password"> • ύεϫʔυΛ҆શʹೖྗ͢ΔͨΊͷܕ • 1 ͭ 1 ͭͷจࣈ͕ΞελϦεΫ ("*") ΍υοτ ("•") ͷΑ͏ͳه߸ʹΑͬ ͯӅ͞ΕΔ • ύεϫʔυϚωʔδϟʔ͕ݕ஌Մೳ
13. autocomplete ଐੑ
14. • αΠϯΠϯϑΥʔϜͳͲͷطଘͷ ύεϫʔυೖྗ • ύεϫʔυϚωʔδϟʔʹΑΔύ εϫʔυͷࣗಈೖྗ "current-password"
15. "new-password" • αΠϯΞοϓϑΥʔϜ • ύεϫʔυมߋϑΥʔϜ • ύεϫʔυࣗಈੜ੒
16. ύεϫʔυࣗಈೖྗͷ๷ࢭ • Basicೝূػೳ • ύεϫʔυมߋػೳ
17. • ࠷ۙͷϒϥ΢βͰ͸ແࢹͯ͠ύε ϫʔυͷࣗಈೖྗΛ͢Δ(“current- password” ͱಉ͡ڍಈ) “off"
18. ༨ஊͰ͕͢… • autocomplete=“username” ΛϢʔβʔIDɾϝʔϧΞυϨεͷ <input />ʹࢦఆ͢Δͱɺtype="text" ͷೖྗϑΟʔϧυ͕ෳ਺ଘ ࡏͨ͠৔߹ɺ༏ઌͯ͠ʮϢʔβʔ໊ʯͱͯࣗ͠ಈೖྗٴͼอଘͯ͘͠ ΕΔ • αΠϯΞοϓϑΥʔϜͷϢʔβʔ໊ʹར༻͢Δͱ👍
19. ʮਪଌ͞Ε΍͍͢ʯύεϫʔυΛೖྗ ͤ͞ͳ͍ͨΊͷUIΛ஌Δ
20. ֬ೝͷͨΊͷ࠶ೖྗ͸ඞཁͰ͔͢ 🤔
21. https://www.zuko.io/blog/should-you-use-con fi rm-password-on-your-forms- and-websites-case-study ύεϫʔυ֬ೝ͸ίϯόʔδϣϯ཰ΛԼ͛Δ 21
22. ίϐϖ͢Δ͚ͩͰ֬ೝͯ͠ͳ͍ 😮💨
23. ύεϫʔυදࣔ੾Γସ͑ػೳ͕˕ • ύεϫʔυ͕Ӆ͞Ε͍ͯΔ৔߹ɺϢʔβʔ͸ύεϫʔυͷೖྗϛεΛ ͠΍͘͢ͳΔ • ೖྗϛε͕૿͑ΔͱϢʔβʔ͸ϩάΠϯ͢ΔҙཉΛࣦ͍ɺϏδωεత ʹ΋ଛࣦͱͳΔՄೳੑ͕͋Δ • ೖྗϛε͕૿͑ΔͱϢʔβʔ͸ೖྗϛεΛ͠ͳ͍ͨΊʹʮਪଌ͠΍͢ ͍ʯύεϫʔυΛ࢖༻͢ΔՄೳੑ͕͋Δ
24. ༨ஊͰ͕͢… • ϞόΠϧΩʔϘʔυ͕αΠϯΠϯϘλϯΛ๦֐͠ͳ͍Α͏ʹ͢Δ͜ͱ ΋ݟམͱ͕͚ͪͩ͠Ͳେ੾👍
25. ʮਪଌ͞Ε΍͍͢ʯύεϫʔυΛೖྗ ͤ͞ͳ͍ͨΊͷػೳΛ஌Δ
26. ύεϫʔυڧ౓ϝʔλʔ📏
27. zxcvbn • ΦϯϥΠϯετϨʔδαʔϏεΛఏڙ͍ͯ͠Δ Dropbox ͕։ൃɺ࣮ ࡍʹ࢖༻͞Ε͍ͯΔύεϫʔυڧ౓ਪఆͷͨΊͷϥΠϒϥϦ
28. TypeScript ൛΋͋Γ·ͨ͠
29. ಋೖ΋؆୯ʂ
30. https://github.com/uidev1116/zxcvbn-ts-sample/ blob/master/src/main.ts 30 (JU)VCʹ͋͛ͯΈͨ✌
31. ·ͱΊ
32. ·ͱΊ ϒϥ΢βͷศརͳ૊ΈࠐΈػೳΛར༻͢Δͨ Ίɺద੾ͳHTMLλάΛར༻͠Α͏
33. ·ͱΊ ֬ೝͷͨΊͷ࠶ೖྗ͕ඞཁ͔Ͳ͏͔ɺ࠶ݕ౼͠ ͯΈΑ͏ʂ
34. ·ͱΊ zxcvbnΛ׆༻ͯ͠ύεϫʔυڧ౓νΣοΧʔ Λ࣮૷͠Α͏ʂ
35. ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻʂ @uidev1116