安全なJavaScriptを書く

SCRIPTY #4 on 2015-12-15

Transcript

1. ҆શͳJavaScriptΛॻ͘
   @axross
   SCRIPTY #4 on 2015-12-15
   

   View Slide

2. whoami
   » @axross / Kohei Asai
   » Gunosy Inc.
   » ωτήഇਓ -> հޢۀք -> Webۀք
   » SPAॻ͍͓ͯ௞ۚ΋Βͬͯ·͢
   

   View Slide

3. ౰ͨΓલͳ͜ͱΛ࿩͠·
   ͢
   

   View Slide

4. ʮྫ֎ʯ
   

   View Slide

5. ྫ֎ʹର͢Δೝࣝ
   » Errorͷ͜ͱ
   » ྫ֎͕εϩʔ͞Εɺcatch͞Εͯͳ͍৔߹ɺ࣮ߦ͕ࢭ·Δ
   » ϓϩμΫγϣϯͰ࣮ߦ͕ࢭ·Δͱக໋త
   » ʮۃྗΤϥʔϋϯυϦϯά͠Α͏ʂʯͬͯؾ࣋ͪʹͳΔ͕...ʁ
   

   View Slide

6. View Slide

7. 27. ʮࢮ͵͸ͣͷϓϩάϥϜΛແཧʹ
   ੜ͔͓͍ͯͯ͠͸͍͚ͳ͍ʯ
   try-catch ϒϩοΫΛίʔυϕʔεʹେྔʹೖΕΕ͹ɺʮྫ֎͕ൃੜͯ͠
   ΋ઈରʹࢭ·Βͳ͍ʯͱ͍͏ΞϓϦέʔγϣϯΛ࡞Δ͜ͱ͕Մೳͳ͸ͣ
   Ͱ͢ɻ
   ͨͩɺ͜Ε͸ɺ΋͏ࢮΜͰ͍ΔਓͷମΛఝ͔Կ͔Ͱݻఆ͠ɺແཧ໼ཧ
   ཱͬͨঢ়ଶʹ͍ͯ͠ΔΑ͏ͳ΋ͷͰ͕͢......ɻ
   -- ΦϥΠϦʔɾδϟύϯʮϓϩάϥϚ͕஌Δ΂͖97ͷ͜ͱʯ
   

   View Slide

8. ແཧ΍Γੜ͔͞ΕͨϓϩάϥϜ
   » ϓϩμΫγϣϯͰྫ֎͕throw͞Εͯ͸ͳΒͳ͍
   » ͳͥͳΒɺϓϩάϥϜͷ࣮ߦ͕ࢭ·ͬͯ͠·͏͔Β
   » Ͱ΋ɺͦͷྫ֎͸ԿʹΑΔ΋ͷͳͷ͔ʁ
   » ؀ڥɾঢ়گʹΑͬͯൃੜͨ͠΋ͷʁ(HTTP΍୺຤ݻ༗όάͳͲ)
   » ୯७ͳ։ൃऀͷϛεʹΑΔ΋ͷʁ
   » ͜ͷྫ֎ΛcatchͰ௵͢ͷ͸Ϛζ͍Μ͡Όͳ͍ͩΖ͏͔ʁ
   

   View Slide

9. ߟ͑Δ΂͖͜ͱ
   » ਖ਼ৗͳಈ࡞͸Ͳ͏͍͏ܗͳͷ͔ʁ
   » ؔ਺͕ҙਤ͠ͳ͍Ҿ਺Λ൐ͬͯݺ͹ΕͨΒʁ
   » ͜͜Λ༨ܭͳ͓ੈ࿩Ͱʹʮແࢹ͢Δʯͱ͔ͯ͠͠·͏ͱɺ։ൃ
   ऀͷਓతͳϛε΋ڐ͢Մೳੑ͕͋Δ
   » ʮ͜͏͍͏έʔε΋͋Δ͔΋͠Εͳ͍ʯͱ͍͏ରԠ͸Α͘ͳ͍
   » ʮ͋ͬͯ͸͍͚ͳ͍ɺ͔ͩΒྫ֎ͩʯ
   » ͜Ε͕ྫ֎ͷਖ਼͍͠࢖ΘΕํͩͱࢥ͏
   

   View Slide

10. ʮؾ෇͔ͳ͍ʯํ͕ා͍
    » ༏͗͢͠ΔAPI͸࡞Βͳ͍
    » ʮArray͡Όͳͯ͘΋ड͚෇͚Δ൓෮ॲཧͷؔ਺ʯΛͲ͏ࢥ͏͔ʁ
    » νʔϜͰೝ͕ࣝ߹ͬͯΕ͹͍͍
    » ͔͠͠ɺόάʹʮؾ෇͚ͳ͘ͳΔʯͷ͸׬શʹବ໨
    » σόοά΍ςετ͸όάΛݕग़͢ΔͨΊʹ͋Δ
    » ݕग़Ͱ͖ͳ͘ͳͬͯ͠·ͬͨΒɺͦΕ͸ʮ༏͍͠ʯͩΖ͏͔ʁ
    

    View Slide

11. Ͳ͏ͨ͠Β͍͍͔
    

    View Slide

12. throwΛා͕Γ͗͢ͳ͍
    » throw͢΂͖΋ͷ͸ͪΌΜͱ͠Α͏
    » ։ൃதʹྫ֎Λ౿ΊΕ͹ɺݕग़ͮ͠Β͍όάΛ༧๷ͨ͜͠ͱʹͳ
    Δ
    » ʮਖ਼ৗಈ࡞ͳΒى͜Δ͸ͣͷͳ͍throwʯ͸ා͕Γա͗ͳͯ͘΋͍͍
    Α͏ͳʁ
    » ແ࿦ɺͪΌΜͱσόοάஈ֊Ͱݕग़͓ͯ͘͠
    » Ϗδωεతͳສ͕Ұʹඋ͑ͯɺϦΧόϦʔͰ͖ΔΑ͏ʹ࡞Δ
    

    View Slide

13. assert / unassert
    » twada/unassert
    » ίʔυதͷassert()΍console.assert()Λ࡟আ͢Δ΋ͷ
    » throwͷ୅ΘΓʹassert()Λ࢖ͬͯɺAssertionErrorΛ౤͛Δ
    » assert()ͳͲͷ෦෼͚͕ͩunassertʹΑͬͯ࡟আ͞ΕɺϓϩμΫ
    γϣϯ࣌ʹ͸AssertionError͕ൃੜ͠ͳ͘ͳΔ
    » http://www.slideshare.net/t_wada/unassert
    

    View Slide

14. ΤϥʔΛऩू͢Δ
    » window.onerrorͰ΄΅શͯͷྫ֎ΛcatchͰ͖Δ
    » catchͨ͠΋ͷΛΤϥʔऩूαʔϏεʹ౤͛Δ
    » Sentry
    » Airbrake
    » sourcemaps͕͋Ε͹೉ಡԽޙͷίʔυ΋ղऍͯ͘͠ΕΔ
    » ͋Δ͍͸ɺGoogle AnalyticsʹஷΊΔ
    » ྫ֎Λऩूͯ͠ɺঢ়گݻ༗΍୺຤ݻ༗ͷόάΛݕग़͠Α͏
    

    View Slide

15. Lint͢Δ
    » eslintɺjshintɺjslint
    » ίʔυͷόουϓϥΫςΟε΍γϯλοΫεΤϥʔΛݕ஌ͯ͠ڭ͑
    ͯ͘ΕΔ
    » ελϯεΛܾΊͯɺݫ͠Ίʹઃఆ͢Δɺ͖ͦͯͪ͠ΜͱकΔ
    » ਓతͳϛεΛ͍͘Β͔࡟ݮͰ͖Δ
    » ؇ΊΔͷ͸ةݥɺ؇ΊΔ৔߹͸͖ͪΜͱ࿩͠߹͏
    » ઃఆϑΝΠϧΛॻ͘͜ͱͰɺֶͼ΋͋Δ͔΋ʁ
    

    View Slide

16. ςετΛॻ͘
    » ྫ֎͸ɺςετΛॻ͍ͯ։ൃதʹ͖ͪΜͱग़ձ͓ͬͯ͘
    » ςετ͕େมͩͱײͨ͡ΒɺͦΕ͸ਓతϛε͕ى͖΍͍͢ͱ͍͏αΠ
    ϯ
    » ޙʑʹόάͷݪҼΛḷΔ͍͍ಓඪʹ΋ͳΔ
    » αϘͬͪΌବ໨!
    

    View Slide

17. ίʔυϨϏϡʔ͢Δ
    » Lintͯ͠΋ɺςετΛॻ͍ͯ΋ɺϛεΛ͢Δ͜ͱ͸͋Δ
    » ਓతͳϛεΛݟ͚ͭΒΕΔۀ຿ϑϩʔΛ͖ͪΜͱ࡞Ζ͏
    » ϛεΛؾܰʹࢦఠͰ͖Δۭؾ࡞ΓΛ͠Α͏
    » ϨϏϡʔͯ͠ίʔυΛڞ༗͓͚ͯ͠͹ɺଞͷਓ͕༨ܭͳϛεΛ͠ͳ͘
    ͯࡁΉ
    

    View Slide

18. ·ͱΊ
    » ʮͦͷྫ֎͸ຊ౰ʹѲΓ௵͍͍ͯ͠ͷͩΖ͏͔ʁʯ
    » ͦΕ͕ʮͲ͏͍͏ྫ֎ͳͷ͔ʯΛ͖ͪΜͱߟ͑Α͏
    » JavaScriptΛॻ͘ྔ͕૿͖͑ͯͨ
    » ੲ͸ʮແཧ΍Γੜ͖ͯΔJavaScriptʯ͕޷·Εͨ
    » ࠓ͸ͦ͏Ͱ͸ͳ͍ɺJSͰΞϓϦέʔγϣϯΛߏங͢Δ
    » ৭ʑͳࡦΛଧͪɺ҆શͳJavaScriptΛॻ͜͏ʂ
    

    View Slide

19. Thank you for
    listening!
    

    View Slide