Upgrade to Pro — share decks privately, control downloads, hide ads and more …

安全なJavaScriptを書く

Kohei Asai
December 15, 2015

 安全なJavaScriptを書く

SCRIPTY #4 on 2015-12-15

Kohei Asai

December 15, 2015
Tweet

More Decks by Kohei Asai

Other Decks in Programming

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