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

by uidev

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

52%

Slide 6

Slide 6 text

58%

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

autocomplete ଐੑ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

TypeScript ൛΋͋Γ·ͨ͠

Slide 29

Slide 29 text

ಋೖ΋؆୯ʂ

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

·ͱΊ

Slide 32

Slide 32 text

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