フロントエンドエンジニアのためのセキュリティ対策

by CarstayJP

Slide 1

Slide 1 text

ϑϩϯτΤϯυΤϯδχΞ΋஌ ͓͖͍ͬͯͨηΩϡϦςΟରࡦ XSSฤ 2022/02/26

Slide 2

Slide 2 text

Carstayגࣜձࣾɿ֓ཁ 2

Slide 3

Slide 3 text

Carstayגࣜձࣾɿϛογϣϯ 3 Stay Anywhere, Anytime. ୭΋͕޷͖ͳͱ͖ʹɺ޷͖ͳ৔ॴͰɺ޷͖ͳਓͱաͤ͝ΔੈքΛͭ͘Δ

Slide 4

Slide 4 text

CarstayגࣜձࣾɿϓϩμΫτ 4 ʮCarstayʯ͸೔ຊͰ།ҰɺΩϟϯϐϯάΧʔͱंதധεϙοτΛ༧໿͢Δ͜ͱ͕Ͱ͖ΔεϚϗΞϓϦͰ͢ ৐Βͳ͍ظؒʹ༡ٳं྆ΛγΣΞ͍ͨ͠Φʔφʔɺۭ͖஍Λ༗ޮ׆༻͍ͨ͠றं৔Φʔφʔ͕ొ࿥͍ͯ͠·͢

Slide 5

Slide 5 text

ࣗݾ঺հ Ngo Van Thang | ϑϧελοΫΤϯδχΞ ▼ ܦྺ ɾ2014೥ʹଔۀޙʹདྷ೔ ɾ2014೥ ιʔγϟϧήʔϜӡӦձࣾʹೖࣾ ɹɾήʔϜαʔόӡ༻ ɾ2016೥ ೿ݣձࣾʹೖࣾ ɹɾίʔσΟϯάςεταʔϏεɺLINE഑৴αʔϏε։ൃ ɾ2018೥ ϒϩοΫνΣʔϯձࣾʹೖࣾ ɹɾϒϩοΫνΣʔϯΛ࢖ͬͨΫϦΤʔλͱاۀͷϚονϯάαʔϏεɺӽڥEC։ൃ ɾ2020೥ Carstayגࣜձࣾʹೖࣾ | Tech Lead ɹɾ։ൃશൠ؅ཧɺίʔυϨϏϡʔɺ΢ΣϒɾΞϓϦ։ൃ ▼झຯ ɾήʔϜʢΞΫγϣϯήʔϜɺFPS etcʣ ɾαοΧʔ ɾίϚϯυϥΠϯ͕޷͖ Ngo Van Thangʢ30ࡀʣ @nooptr https://www.facebook.com/thanghedspi 5

Slide 6

Slide 6 text

Agenda ● ੬ऑੑ(XSS)ͷ࢓૊Έͱରࡦ ● σϞ ● ·ͱΊ 6

Slide 7

Slide 7 text

΢ΣϒαΠτͷ੬ऑੑͷछྨผʢ೥ʣ 7 11% 2% 2% 3% 11% 13% 58% https://www.ipa.go.jp/files/000082044.pdf XSS ʢΫϩεαΠτɾεΫϦϓςΟϯά ʣ DNS৘ใͷઃఆෆඋ SQLΠϯδΣΫγϣϯ ϑΝΠϧͷޡͬͨެ։ σΟϨΫτϦɾτϥόʔαϧ HTTPSͷෆద੾ͳར༻ ͦͷଞ

Slide 8

Slide 8 text

XSS ΫϩεαΠτɾεΫϦϓςΟϯά

Slide 9

Slide 9 text

XSSʢΫϩεαΠτεΫϦϓςΟϯάʣͱ͸ ར༻ऀ͕ೖྗͨ͠಺༰Λදࣔ͢ΔΑ͏ͳߏ੒ͷWebαΠτʹଘࡏ͢Δܽ ؕΛѱ༻ͯ͠ɺ߈ܸऀ͕༻ҙͨ͠ѱҙͷ͋ΔεΫϦϓτΛར༻ऀͷݩʹ ૹΓࠐΜͰ࣮ߦͤ͞Δ߈ܸख๏ɻ 9

Slide 10

Slide 10 text

XSSͷ࢓૊Έ 10 Source: https://yamory.io/blog/about-xss/

Slide 11

Slide 11 text

ReactͷXSS

Slide 12

Slide 12 text

dangerouslySetInnerHTML 12 ■ dangerouslySetInnerHTMLͱ͸ ɾReactެࣜͷΤεέʔϓΛແޮԽ͢ΔΦϓγϣϯ ɾHTMLͱͯ͠ೝ͍ࣝͤͨ͞৔߹ͳͲʹར༻͢Δ

Slide 13

Slide 13 text

dangerouslySetInnerHTML 13 ■ dangerouslySetInnerHTMLͱ͸ ɾReactެࣜͷΤεέʔϓΛແޮԽ͢ΔΦϓγϣϯ ɾHTMLͱͯ͠ೝ͍ࣝͤͨ͞৔߹ͳͲʹར༻͢Δ DEMO: https://codesandbox.io/s/react-xss-example-forked-9n3exm

Slide 14

Slide 14 text

dangerouslySetInnerHTML 14 ■ରࡦɿ   ɾ࢖Θͳ͍ɻͲ͏ͯ͠΋ར༻͍ͨ͠৔߹͸ɺపఈతʹΤεέʔϓΛߦ͏ɻ ɾdompurifyͳͲͷϥΠϒϥϦΛ࢖͏͜ͱͰɺXSSͷ໰୊ΛղܾͰ͖Δɻ https://github.com/cure53/DOMPurify

Slide 15

Slide 15 text

hrefଐੑ͸ɺઌ಄͕javascript:͔Β࢝·Δ৔߹͸ͦΕҎ߱ͷจࣈྻΛ javascriptͱ࣮ͯ͠ߦ͞ΕΔ Javascript: εΩʔϜ 15

Slide 16

Slide 16 text

hrefଐੑ͸ɺઌ಄͕javascript:͔Β࢝·Δ৔߹͸ͦΕҎ߱ͷจࣈྻΛ javascriptͱ࣮ͯ͠ߦ͞ΕΔ Javascript: εΩʔϜ 16 DEMO: https://codesandbox.io/s/react-xss-example-forked-g8hs86

Slide 17

Slide 17 text

■ରࡦɿ ɾεΩʔϜΛhttp:// ͔ https://ͷΈʹ੍ޚ͢Δ ɾઌ಄ʹ / Λ͚ͭΔ Javascript: εΩʔϜ 17 DEMO: https://codesandbox.io/s/react-xss-example-forked-g8hs86

Slide 18

Slide 18 text

JSON.stringify(str) 18 ੬ऑ෦෼ ҎԼͷ஋ؚ͕·ΕΔͱɺXSS͕ੜ͡Δ Server Renderingͷ࣌ʹɺReactଆͰ࢖͑ΔΑ͏ʹɺԼهͷΑ͏ͳίʔυ͕͋Δ

Slide 19

Slide 19 text

19 ID/ύεϫʔυ͕࿙Εͳ͔ͬͨΒຊ౰ʹେৎ෉ʁ

Slide 20

Slide 20 text

20 ͦΜͳ͜ͱͳ͍Ͱ͢Α

Slide 21

Slide 21 text

21 DEMO

Slide 22

Slide 22 text

·ͱΊ

Slide 23

Slide 23 text

·ͱΊ 23 ɾ࠷΋ଟ͍੬ऑੑ͸XSS ɾXSSରࡦʹ͸จࣈྻΛΤεέʔϓ͢Δ ɾXSSͷݪཧΛ஌Βͳ͍ͱɺ؆୯ʹXSSͷ੬ऑੑΛ࡞ΓࠐΜͰ͠·͏ͷͰɺXSSͷཧղ͸ඞཁ ɾID/ύεϫʔυΛ஌Βͳͯ͘΋ɺCookie৘ใ͕Θ͔ͬͨΒɺϩάΠϯͰ͖ͯ͠·͏ͷͰɺ PC࢖Θͳ͍࣌͸ඞͣը໘ΛϩοΫ͠·͠ΐ͏

Slide 24

Slide 24 text

CarstayɺઈࢍΤϯδχΞืूதͰ͢ʂ 24 ˒ CTOީิΤϯδχΞ ɾϑϩϯτΤϯυΤϯδχΞ ɾΞϓϦΤϯδχΞ ɾαʔόʔαΠυΤϯδχΞ ։ൃݴޠɿTypescriptɹ։ൃϑϨʔϜϫʔΫɿReactJS, React NativeɹWebαʔόɿNodeJS ͥͻ͓ؾܰʹ͝࿈བྷ͍ͩ͘͞ ⏬

Slide 25

Slide 25 text

25 ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ