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

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

Transcript

1. ʮਪଌ͞Ε΍͍͢ʯύεϫʔυΛ
   ೖྗͤ͞ͳ͍ͨΊʹϑϩϯτΤϯ
   υΤϯδχΞ͕Ͱ͖Δ͜ͱ
   ϑϩϯτΤϯυ໊ݹ԰ vol. 11
   
   
   2023/08/18
   

   View Slide

2. ༗ݶձࣾΞοϓϧοϓϧ
   
   
   ϑϩϯτΤϯυΤϯδχΞ
   CMSΛ։ൃ͍ͯ͠ΔΤϯδχΞɻϑϩϯτΤ
   ϯυ͕޷͖ɻPHPͰόοΫΤϯυ։ൃ΋͠·
   ͢ɻFrontend Nagoya ͱ͍͏ษڧձΛओ࠵͠
   ͯ·͢ɻϙέϞϯͱອը͕޷͖ɻ
   ӉҪ ཮ొ
   @uidev1116
   

   View Slide

3. ࠓ೔ͷ໨త
   • ʮਪଌ͞Ε΍͍͢ʯύεϫʔυΛೖྗͤ͞ͳ͍ͨΊͷϚʔΫΞοϓΛ஌Δ
   
   
   • ʮਪଌ͞Ε΍͍͢ʯύεϫʔυΛೖྗͤ͞ͳ͍ͨΊͷUIΛ஌Δ
   
   
   • ʮਪଌ͞Ε΍͍͢ʯύεϫʔυΛೖྗͤ͞ͳ͍ͨΊͷػೳΛ஌Δ
   

   View Slide

4. ύεϫʔυ؅ཧͷ՝୊
   World Password Day Survey 2023 (Bitwarden) ΑΓ
   

   View Slide

5. 52%
   

   View Slide

6. 58%
   

   View Slide

7. 🫠
   ʮਪଌ͞Εʹ͍͘ʯύεϫʔυΛ
   
   
   ࢖ΘͤΔ࢓૊Έ͕ඞཁ
   

   View Slide

8. ʮਪଌ͞Ε΍͍͢ʯύεϫʔυΛೖྗ
   ͤ͞ͳ͍ͨΊͷϚʔΫΞοϓΛ஌Δ
   

   View Slide

9. ϒϥ΢β૊ΈࠐΈػೳͷϝϦοτΛڗडͰ͖Δ
   • ύεϫʔυϚωʔδϟʔ
   
   
   • ΞΫηγϏϦςΟ
   

   View Slide

10. • ɺɺ Λ࢖༻͢Δ
    • type=“password" ΍ type=“email” ͳͲద੾ͳ input λά
    ͷܕΛ࢖༻͢Δ
    • new-password ΍ current-password, username, email
    ͳͲద੾ͳ autocomplete ଐੑΛ׆༻͢Δ
    • aria-describedby ଐੑΛ࢖༻ͯ͠ɺύεϫʔυϙϦγʔΛઆ໌
    ͢Δ
    

    View Slide

11. ύεϫʔυϚωʔδϟʔ🔑
    

    View Slide

12. 
    • ύεϫʔυΛ҆શʹೖྗ͢ΔͨΊͷܕ
    
    
    • 1 ͭ 1 ͭͷจࣈ͕ΞελϦεΫ ("*") ΍υοτ ("•") ͷΑ͏ͳه߸ʹΑͬ
    ͯӅ͞ΕΔ
    
    
    • ύεϫʔυϚωʔδϟʔ͕ݕ஌Մೳ
    

    View Slide

13. autocomplete ଐੑ
    

    View Slide

14. • αΠϯΠϯϑΥʔϜͳͲͷطଘͷ
    ύεϫʔυೖྗ
    
    
    • ύεϫʔυϚωʔδϟʔʹΑΔύ
    εϫʔυͷࣗಈೖྗ
    
    
    "current-password"
    

    View Slide

15. "new-password"
    • αΠϯΞοϓϑΥʔϜ
    
    
    • ύεϫʔυมߋϑΥʔϜ
    
    
    • ύεϫʔυࣗಈੜ੒
    

    View Slide

16. ύεϫʔυࣗಈೖྗͷ๷ࢭ
    • Basicೝূػೳ
    
    
    • ύεϫʔυมߋػೳ
    

    View Slide

17. • ࠷ۙͷϒϥ΢βͰ͸ແࢹͯ͠ύε
    ϫʔυͷࣗಈೖྗΛ͢Δ(“current-
    password” ͱಉ͡ڍಈ)
    
    
    “off"
    

    View Slide

18. ༨ஊͰ͕͢…
    • autocomplete=“username” ΛϢʔβʔIDɾϝʔϧΞυϨεͷ
    ʹࢦఆ͢Δͱɺtype="text" ͷೖྗϑΟʔϧυ͕ෳ਺ଘ
    ࡏͨ͠৔߹ɺ༏ઌͯ͠ʮϢʔβʔ໊ʯͱͯࣗ͠ಈೖྗٴͼอଘͯ͘͠
    ΕΔ
    
    
    • αΠϯΞοϓϑΥʔϜͷϢʔβʔ໊ʹར༻͢Δͱ👍
    

    View Slide

19. ʮਪଌ͞Ε΍͍͢ʯύεϫʔυΛೖྗ
    ͤ͞ͳ͍ͨΊͷUIΛ஌Δ
    

    View Slide

20. ֬ೝͷͨΊͷ࠶ೖྗ͸ඞཁͰ͔͢
    🤔
    

    View Slide

21. https://www.zuko.io/blog/should-you-use-con
    fi
    rm-password-on-your-forms-
    and-websites-case-study
    ύεϫʔυ֬ೝ͸ίϯόʔδϣϯ཰ΛԼ͛Δ
    21
    

    View Slide

22. ίϐϖ͢Δ͚ͩͰ֬ೝͯ͠ͳ͍
    😮💨
    

    View Slide

23. ύεϫʔυදࣔ੾Γସ͑ػೳ͕˕
    • ύεϫʔυ͕Ӆ͞Ε͍ͯΔ৔߹ɺϢʔβʔ͸ύεϫʔυͷೖྗϛεΛ
    ͠΍͘͢ͳΔ
    
    
    • ೖྗϛε͕૿͑ΔͱϢʔβʔ͸ϩάΠϯ͢ΔҙཉΛࣦ͍ɺϏδωεత
    ʹ΋ଛࣦͱͳΔՄೳੑ͕͋Δ
    
    
    • ೖྗϛε͕૿͑ΔͱϢʔβʔ͸ೖྗϛεΛ͠ͳ͍ͨΊʹʮਪଌ͠΍͢
    ͍ʯύεϫʔυΛ࢖༻͢ΔՄೳੑ͕͋Δ
    

    View Slide

24. ༨ஊͰ͕͢…
    • ϞόΠϧΩʔϘʔυ͕αΠϯΠϯϘλϯΛ๦֐͠ͳ͍Α͏ʹ͢Δ͜ͱ
    ΋ݟམͱ͕͚ͪͩ͠Ͳେ੾👍
    

    View Slide

25. ʮਪଌ͞Ε΍͍͢ʯύεϫʔυΛೖྗ
    ͤ͞ͳ͍ͨΊͷػೳΛ஌Δ
    

    View Slide

26. ύεϫʔυڧ౓ϝʔλʔ📏
    

    View Slide

27. zxcvbn
    • ΦϯϥΠϯετϨʔδαʔϏεΛఏڙ͍ͯ͠Δ Dropbox ͕։ൃɺ࣮
    ࡍʹ࢖༻͞Ε͍ͯΔύεϫʔυڧ౓ਪఆͷͨΊͷϥΠϒϥϦ
    

    View Slide

28. TypeScript ൛΋͋Γ·ͨ͠
    

    View Slide

29. ಋೖ΋؆୯ʂ
    

    View Slide

30. https://github.com/uidev1116/zxcvbn-ts-sample/
    blob/master/src/main.ts
    30
    (JU)VCʹ͋͛ͯΈͨ✌
    

    View Slide

31. ·ͱΊ
    

    View Slide

32. ·ͱΊ
    ϒϥ΢βͷศརͳ૊ΈࠐΈػೳΛར༻͢Δͨ
    Ίɺద੾ͳHTMLλάΛར༻͠Α͏
    

    View Slide

33. ·ͱΊ
    ֬ೝͷͨΊͷ࠶ೖྗ͕ඞཁ͔Ͳ͏͔ɺ࠶ݕ౼͠
    ͯΈΑ͏ʂ
    

    View Slide

34. ·ͱΊ
    zxcvbnΛ׆༻ͯ͠ύεϫʔυڧ౓νΣοΧʔ
    Λ࣮૷͠Α͏ʂ
    

    View Slide

35. ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻʂ
    @uidev1116
    

    View Slide