$30 off During Our Annual Pro Sale. View Details »

フロントエンド開発のためのセキュリティ入門について

 フロントエンド開発のためのセキュリティ入門について

Node学園 41時限目 書籍について - connpass https://nodejs.connpass.com/event/275061/

Masashi Hirano

February 28, 2023
Tweet

More Decks by Masashi Hirano

Other Decks in Programming

Transcript

  1. ϑϩϯτΤϯυ։ൃͷͨΊͷ
    ηΩϡϦςΟೖ໳

    ຊͷ঺հͱࣥචΤϐιʔυ
    NodeֶԂ 41࣌ݶ໨
    ฏ໺ণ࢜ (@shisama_)

    View Slide

  2. ฏ໺ ণ࢜ / Masashi Hirano
    Frontend Developer


    @shisama_


    shisama


    Node.js Core Collaborator


    ࣾձਓେֶੜ@UoPeople


    View Slide

  3. ʲએ఻ʳ2݄13೔ʹॻ੶Λग़൛͠·ͨ͠ʂ
    HTML/CSS/JSΛ࢖ͬͯΞϓϦ
    έʔγϣϯΛ։ൃͰ͖Δ͚Ͳɺ
    ηΩϡϦςΟ͸͜Ε͔Βษڧͱ
    ͍͏ํ΁޲͚ͯॻ͖·ͨ͠ʂ


    ࠓ೔͸ຊͷ֓ཁͱࣥචதͷΤϐ
    ιʔυ΍ࣥචதʹֶΜͩ͜ͱͷ
    Ұ෦Λ঺հ͍ͨ͠ͱࢥ͍·͢ʂ
    ϑϩϯτΤϯυ։ൃͷͨΊͷηΩϡϦςΟೖ໳

    View Slide

  4. ຊͷ֓ཁ

    View Slide

  5. ຊͷ໨࣍
    • ୈ1ষ WebηΩϡϦςΟ֓ཁ


    • ୈ2ষ ϋϯζΦϯͷ४උ


    • ୈ3ষ HTTP


    • ୈ4ষ ΦϦδϯʹΑΔWebΞϓϦέʔγϣϯؒͷΞΫηε੍ݶ


    • ୈ5ষ XSS


    • ୈ6ষ ͦͷଞͷडಈత߈ܸʢCSRFɺΫϦοΫδϟοΩϯάɺΦʔϓϯϦμΠϨΫτʣ


    • ୈ7ষ ೝূɾೝՄ


    • ୈ8ষ ϥΠϒϥϦΛૂͬͨηΩϡϦςΟϦεΫ


    • Appendix ຊฤͰ͸ѻΘͳ͔ͬͨτϐοΫͷֶश

    View Slide

  6. ੬ऑੑͷ࢓૊Έ΍ରࡦΛखΛಈ͔͠ͳ͕Βֶ΂
    ΔϋϯζΦϯΛܝࡌ
    • 3ষ HTTP: HTTPϔομͷ෇༩΍ϧʔςΟϯάͳͲ


    • 4ষ CORS: CORSͷઃఆͳͲ


    • 5ষ XSS: XSSͷରࡦɺCSPͷઃఆ


    • 6ষ ͦͷଞडಈత߈ܸ: CSRFରࡦɺΦʔϓϯϦμΠϨΫτରࡦɺΫϦοΫδϟοΩϯά
    ରࡦ


    • 7ষ ೝূɾೝՄ: ύεϫʔυϑΥʔϜͷϕετϓϥΫςΟε


    • ෇࿥ HTTPS: HTTPSͷઃఆɺHSTSͷઃఆ

    View Slide

  7. ֤ষͷ঺հͱΤϐιʔυ

    View Slide

  8. ୈ1ষ WebηΩϡϦςΟ֓ཁ ໨࣍
    • 1.1 ͳͥηΩϡϦςΟରࡦΛߦ͏ͷ͔


    • 1.2 Webͷ੬ऑੑͷछྨͱ܏޲

    View Slide

  9. ୈ1ষ WebηΩϡϦςΟ֓ཁ ಺༰
    • ηΩϡϦςΟͷҰൠతͳ࿩


    • ੬ऑੑͱ͸


    • ඇػೳཁ݅΍ηΩϡϦςΟͷ඼࣭͕༩͑ΔӨڹͱ͸


    • WebΞϓϦέʔγϣϯͷ੬ऑੑͷछྨͱಈ޲


    • IPAʰ҆શͳ΢ΣϒαΠτͷ࡞Γํʱ΍OWASP Top 10͔Β੬ऑੑ
    ͷछྨ΍ಈ޲Λ঺հ

    View Slide

  10. ୈ1ষ Τϐιʔυ
    • ඇػೳཁ݅ͷେ੾͞Έ͍ͨͳͱ͜ΖΛ఻͔͑ͨͬͨ


    • ಡऀλʔήοτʢΞϓϦέʔγϣϯΛػೳཁ݅௨Γ։ൃͰ͖ΔΑ
    ͏ʹͳͬͨਓʣ͕ඇػೳཁ݅Λҙࣝͯ͠։ൃͰ͖ΔΑ͏ʹ


    • ಈ޲Λઆ໌͢ΔͨΊʹOWASP Top 10ΛҾ༻ͨ͠

    ࣥච్தʹ࠷৽൛͕࡮৽

    ಺༰Λॻ͖׵͑Δ
    https://owasp.org/Top10/

    View Slide

  11. ୈ2ষ ϋϯζΦϯͷ४උ ໨࣍
    • 2.1 ४උΛ͸͡ΊΔલʹ


    • 2.2 Node.jsͷઃఆ


    • 2.3 Node.js + ExpressΛ࢖ͬͨHTTPαʔόͷߏங

    View Slide

  12. ୈ2ষ ϋϯζΦϯͷ४උ ಺༰
    • ޙଓͷষͷϋϯζΦϯͷͨΊͷ४උΛ͢Δ


    • Node.jsͷΠϯετʔϧ΍ίϚϯυʹ͍ͭͯઆ໌


    • Node.js + ExpressΛ࢖ͬͯϧʔςΟϯά΍੩తϑΝΠϧͷ഑৴Λ͢Δ
    αʔόߏஙͷϋϯζΦϯ

    View Slide

  13. ୈ2ষ Τϐιʔυ
    • ࣥච్தͰNode.js LTS͕2ճมΘΔ


    • ࠷ऴతʹಈ࡞֬ೝͨ࣌͠఺ͷ࠷৽LTSͷ18.12.1Λਪ঑ͱͨ͠


    • Node.js͸semverΛݫ֨ʹक͍ͬͯΔͷͰ18ܥ͸໰୊ͳ͘ಈ͘͸ͣ


    • Google ChromeΛਪ঑ͱ͠·ͨ͠


    • ଞͷϒϥ΢βͰಈ͔ͳ͔ͬͨΒ͝ΊΜͳ͍͞


    • ॻ੶ͷ͓໰͍߹ΘͤϑΥʔϜ΍αϯϓϧίʔυͷϦϙδτϦ͔Βใࠂ͍ͯ͠
    ͚ͨͩΔͱॿ͔Γ·͢

    View Slide

  14. ୈ2ষ Τϐιʔυ
    • ESMͰॻ͔͘CJSͰॻ͔͘೰Μ͕ͩɺESM͸·ͩൃల్্ͱࢥͬͯCJS
    ʹͨ͠


    • Node.js 18ͷ࣌఺Ͱ͸σϑΥϧτ͸CJS


    • ESMΛ࢖͏ͳΒtype: “module”͕ඞཁ


    • Node.jsͷຊͰ͸ͳ͍͠ɺෑډΛԼ͛ΔͨΊʹσϑΥϧτʹ౗ͨ͠


    • ষ຤ͷίϥϜʹ͜ͷลͷઆ໌͸ॻ͍ͨ

    View Slide

  15. ୈ3ষ HTTP ໨࣍
    • 3.1 HTTPجૅ


    • 3.2 HTTPͷϋϯζΦϯ


    • 3.3 ҆શͳ௨৴ͷͨΊͷHTTPS

    View Slide

  16. ୈ3ষ HTTP ಺༰
    • URLɺDNSɺTCP/IPɺHTTPͳͲͷϒϥ΢βͱαʔόͷ௨৴ͷجૅ
    ஌ࣝͷઆ໌


    • HTTPϔομͷ෇༩΍ϧʔςΟϯάͷϋϯζΦϯܝࡌ


    • HTTPͷऑ఺ɺHTTPSͷར఺ɺHTTPSԽͷඞཁੑɺMixed Contentɺ
    HSTSʹ͍ͭͯઆ໌

    View Slide

  17. ୈ3ষ ࣥචֶͯ͠Μͩ͜ͱᶃ
    • TLS1.3ͷ伴ަ׵Ͱ͸ެ։伴͸࢖ΘΕ͍ͯͳ͍


    • ECDH伴ڞ༗͕࢖ΘΕ͍ͯΔ


    • ୈ1࡮Ͱ͸ݹ͍৘ใΛࡌͤͯ͠·ͬͨɻ͝ΊΜͳ͍͞ɻɻ


    • ਖ਼ޡදۙ೔ެ։&ୈ2࡮Ͱ͸मਖ਼༧ఆ

    View Slide

  18. https://zenn.dev/herumi/articles/tls1_3_crypto https://gihyo.jp/book/2021/978-4-297-12307-9
    TLSʹ͍ͭͯherumi͞Μ͕ࢦఠͯ͘͠Ε·ͨ͠

    ͜ΕΒΛಡΜͰษڧʹͳΓ·ͨ͠

    View Slide

  19. TLS1.3Ͱ͸ެ։伴҉߸͸࢖ΘΕ͍ͯ·ͤΜʂ
    https://zenn.dev/herumi/articles/tls1_3_crypto

    View Slide

  20. • Async Clipboard API


    • Background Sync (see SyncManager, for example)


    • Cache-Control: immutable


    • Credential Management API


    • Device Orientation / Device Motion


    • EyeDropper API


    • Encrypted Media Extensions


    • Generic Sensor API


    • Geolocation


    • Noti
    fi
    cations API


    • Payment Request API
    • Presentation API


    • Push API


    • Reporting API


    • Service Workers


    • Storage API


    • Web Authentication API


    • Web Bluetooth


    • Web MIDI


    • Web Crypto API


    • Web Share API
    • Secure Context (HTTPS؀ڥ)Ͱ͔͠ಈ͔ͳ͍ػೳ


    • MDNʹࡌ͍ͬͯΔ
    ୈ3ষ ࣥචֶͯ͠Μͩ͜ͱᶄ

    View Slide

  21. ୈ4ষ ΦϦδϯʹΑΔWebΞϓϦέʔγϣϯؒ
    ͷΞΫηε੍ݶ ໨࣍
    • 4.1 ΞϓϦέʔγϣϯؒͰͷΞΫηε੍ݶͷඞཁੑ


    • 4.2 ಉҰΦϦδϯϙϦγʔʢSame-Origin PolicyʣʹΑΔอޢ


    • 4.3 ಉҰΦϦδϯϙϦγʔʹΑΔ੍ݶͷϋϯζΦϯ


    • 4.4 CORSʢCross-Origin Resource Sharingʣ


    • 4.5 CORS ϋϯζΦϯ


    • 4.6 postMessageΛ࢖ͬͨiframeΛ·͍ͨͩσʔλͷૹ৴


    • 4.7 ϓϩηε෼཭ʹΑΔαΠυνϟωϧ߈ܸͷରࡦ

    View Slide

  22. ୈ4ষ ΦϦδϯʹΑΔWebΞϓϦέʔγϣϯؒ
    ͷΞΫηε੍ݶ ಺༰
    • Same Origin PolicyʹΑΔ੍ݶʹ͍ͭͯઆ໌ͱϋϯζΦϯ


    • Cross Origin Resource Sharing (CORS) ͷઆ໌ͱϋϯζΦϯ


    • CORSͷ࢓૊Έʹ͍ͭͯ


    • Access-Control-Allow-* ϔομͷઆ໌


    • ϓϦϑϥΠτϦΫΤετͷઆ໌


    • Site Isolation΍COOP΍COEPͳͲαΠυνϟωϧ߈ܸΛ๷͙࢓૊Έͷઆ໌

    View Slide

  23. ୈ4ষ ࣥචֶͯ͠Μͩ͜ͱᶃ
    • CORS-safelisted method/headersͷଘࡏΛFetch StandardͰ஌Δ


    • GET, HEAD, POST


    • AcceptɺAccept-LanguageɺContent-LanguageɺContent-Type,
    Range


    • ͜ΕΒҎ֎͕࢖ΘΕΔΫϩεΦϦδϯ΁ͷϦΫΤετ͸ϓϦϑϥΠ
    τ͕ૹ৴͞ΕΔ

    View Slide

  24. ୈ4ষ ࣥචֶͯ͠Μͩ͜ͱᶄ
    • github.io΍co.jp͸eTLD(࣮࣭తͳτοϓϨϕϧυϝΠϯ)ͱͯ͠Έͳ
    ͞ΕɺeTLD+1(shisama.github.ioͳͲ)͕SiteͱΈͳ͞ΕΔ͜ͱΛ஌
    Δ


    • Cookie ͷSameSiteͷSite΋͜Εʹجͮ͘
    https://www.shisama.github.io/1
    eTLD+1
    https://blog.shisama.github.io/2
    eTLD+1
    same-site

    View Slide

  25. ୈ4ষ Τϐιʔυ
    • ࣥචޙɺSite ͷఆ͕ٛeTLD+1͚ͩͰͳ͘scheme΋ؚ·ΕΔΑ͏
    ʹͳͬͨ
    https://www.shisama.github.io
    eTLD+1
    scheme
    http://www.shisama.github.io
    eTLD+1
    scheme
    cross-site

    View Slide

  26. same-site/cross-siteʹ͍ͭͯ͸ͪ͜ΒΛࢀর
    https://web.dev/same-site-same-origin/

    View Slide

  27. ୈ5ষ XSS ໨࣍
    • 5.1 ೳಈత߈ܸͱडಈత߈ܸ


    • 5.2 XSS


    • 5.3 XSSରࡦͷϋϯζΦϯ


    • 5.4 Content Security PolicyʢCSPʣΛ࢖ͬͨ XSS ରࡦ


    • 5.5 CSPͷઃఆϋϯζΦϯ

    View Slide

  28. ୈ5ষ XSS ಺༰
    • ೳಈత߈ܸͱडಈత߈ܸͷઆ໌


    • XSSͷ࢓૊Έͱରࡦͷઆ໌ͱϋϯζΦϯ


    • Content Security Policy (CSP) ͷઆ໌ͱϋϯζΦϯ


    • Trusted Typesͷઆ໌ͱϋϯζΦϯ

    View Slide

  29. ୈ5ষ Τϐιʔυ
    • WindowsͷInternet Explorerαϙʔτऴྃʢ2022೥6݄15೔ʣ


    • X-XSS-Protectionϔομ͸΋͏͍Βͳ͍ࢠͱࢥͬͯݪߘ͔Β࡟আ


    • CSP࢖͓͏


    • IE։͍ͨΒEdge΁ڧ੍ϦμΠϨΫτ͞ΕΔʢ2023೥2݄14೔ʣ


    • ͜Ε͔Β࡞ΔWebΞϓϦέʔγϣϯ͸IEͷ͜ͱ͸ؾʹ͠ͳͯ͘Αͦ͞͏


    • document.domain͕σϑΥϧτͰॻ͖׵͑ෆՄʹͳΔ(Chrome 100ʣ

    View Slide

  30. ୈ5ষ ࣥචதʹֶΜͩ͜ͱ
    • Sanitizer APIͱ͍͏DOMPurifyͷΑ͏ͳWebඪ४API͕ࣥච్தͰ
    ग़͖ͯͨ
    const untrustedStr = location.hash;


    //



    const sanitizer = new Sanitizer(untrustedStr);


    const target = document.getElementById(untrustedStr);


    target.setHTML(untrustedStr, { sanitizer });


    //
    4BOJUJ[FS"1*Λ࢖͏ͱ)5.-͔Βةݥͳจࣈྻ͕࡟আ͞ΕΔ

    View Slide

  31. ୈ6ষ ͦͷଞͷडಈత߈ܸʢCSRFɺΫϦοΫ
    δϟοΩϯάɺΦʔϓϯϦμΠϨΫτʣ ໨࣍
    • 6.1 CSRF


    • 6.2 CSRFରࡦͷϋϯζΦϯ


    • 6.3 ΫϦοΫδϟοΩϯά


    • 6.4 ΫϦοΫδϟοΩϯάରࡦͷϋϯζΦϯ


    • 6.5 ΦʔϓϯϦμΠϨΫτ


    • 6.6 ΦʔϓϯϦμΠϨΫτରࡦͷϋϯζΦϯ

    View Slide

  32. ୈ6ষ ͦͷଞͷडಈత߈ܸʢCSRFɺΫϦοΫ
    δϟοΩϯάɺΦʔϓϯϦμΠϨΫτʣ ಺༰
    • XSSҎ֎ͷडಈత߈ܸͷ࢓૊Έͱରࡦͷઆ໌ͱϋϯζΦϯ


    • CSRF


    • ΫϦοΫδϟοΩϯά


    • ΦʔϓϯϦμΠϨΫτ

    View Slide

  33. ୈ6ষ Τϐιʔυ
    • ࣥච్தͰExpressͷCSRFରࡦ༻ϛυϧ΢ΣΞ csurf ͕
    Deprecated ʹͳͬͨ


    • CSRFରࡦϋϯζΦϯΛ csurf Λ࢖ͬͨํ๏͔ΒDouble Submit
    Cookie Λ࢖ͬͨϋϯζΦϯʹॻ͖௚ͨ͠

    View Slide

  34. https://github.com/expressjs/csurf

    View Slide

  35. ୈ6ষ ࣥචֶͯ͠Μͩ͜ͱ
    • SameSiteଐੑ͕ͳ͍ʢσϑΥϧτLaxʣCookieͷ৔߹ɺChromeͰ
    ͸ൃߦ͔Β2෼ؒ͸ΫϩεαΠτ΁ͷPOSTͰ΋CookieΛૹ৴͢Δ


    • Lax͕σϑΥϧτʹͳͬͨ͜ͱͰյΕΔαΠτ΁ͷ؇࿨ાஔ


    • কདྷతʹ͸͜ͷ࢓༷͸࡟আ͞ΕΔ


    • ݱஈ֊Ͱ͸SameSite σϑΥϧτLax͚ͩͰ͸CSRF͕๷͛ͳ͍

    View Slide

  36. ୈ7ষ ೝূɾೝՄ ໨࣍
    • 7.1 ೝূͱೝՄͷҧ͍


    • 7.2 ೝূػೳͷηΩϡϦςΟϦεΫ


    • 7.3 ΞΧ΢ϯτ࡞੒ϑΥʔϜ࣮૷ϋϯζΦϯ


    • 7.4 ϩάΠϯ৘ใͷ࿙͍͑ʹ஫ҙ͢Δ

    View Slide

  37. ୈ7ষ ೝূɾೝՄ ಺༰
    • ೝূͱೝՄͷҧ͍Λઆ໌


    • ೝূํ๏ͷઆ໌ ʢύεϫʔυೝূɺιʔγϟϧϩάΠϯ etcʣ


    • ύεϫʔυೝূΛૂͬͨ߈ܸͷઆ໌ʢϒϧʔτϑΥʔε߈ܸ etcʣ


    • ύεϫʔυೝূ΁ͷ߈ܸͷରࡦͷઆ໌


    • ϢʔβʔʹෳࡶͳύεϫʔυΛઃఆͤ͞ΔͨΊͷϑΥʔϜ࡞੒ϋϯ
    ζΦϯΛܝࡌ

    View Slide

  38. ୈ7ষ Τϐιʔυ
    • ೝূɾೝՄ͸ൣғ͕޿͗͢ΔͷͰ಺༰Λߜͬͨ


    • OAuth΍OIDCɺFIDOͳͲʹ͍ͭͯ͸঺հ͢Δఔ౓ʹཹΊ͍ͯΔ


    • ύεϫʔυೝূʹϑΥʔΧε


    • ϒϥ΢βͷύεϫʔυϚωʔδϟศར


    • ϋϯζΦϯͰ΋ར༻ํ๏Λ঺հ͍ͯ͠Δ

    View Slide

  39. ୈ8ষ ϥΠϒϥϦΛૂͬͨηΩϡϦςΟϦεΫ ໨࣍
    • 8.1 ϥΠϒϥϦͷར༻


    • 8.2 ϥΠϒϥϦʹજΉηΩϡϦςΟϦεΫ


    • 8.3 ϥΠϒϥϦར༻ͷηΩϡϦςΟରࡦ

    View Slide

  40. ୈ8ষ ϥΠϒϥϦΛૂͬͨηΩϡϦςΟϦεΫ ಺༰
    • JavaScriptͷϥΠϒϥϦ΍OSSपΓͷઆ໌


    • ϥΠϒϥϦར༻ʹΑΔηΩϡϦςΟϦεΫͷઆ໌


    • ϥΠϒϥϦܦ༝ͷ߈ܸ΍CDN্ͷϑΝΠϧͷվ͟Μetc


    • 2018೥ͷESLint΍2021೥ͷua-parser-jsͳͲͷࣄྫͷ঺հ


    • npm audit΍DependabotͳͲͷ঺հ

    View Slide

  41. ୈ8ষ Τϐιʔυ
    • ࣥචத(2021೥) ʹ ua-parser-js, coa, rcͱ͍ͬͨਓؾύοέʔδͰϚ
    ϧ΢ΣΞ͕૬͍࣍Ͱݟ͔ͭΔ


    • npmΞΧ΢ϯτ৐ͬऔΓ͕ݪҼ


    • npm͸ೋཁૉೝূ (2FA) ͷඞਢԽΛਪਐ͍ͯ͘͠


    • Top 100ͷnpmύοέʔδϝϯςφʔͷΞΧ΢ϯτ2FAඞਢʹ


    • 2FAඞਢԽΛ֦େ͍͍ͯͬͯ͠Δ

    View Slide

  42. Appendix ຊฤͰ͸ѻΘͳ͔ͬͨτϐοΫͷֶश ໨࣍
    • A.1 ͞ΒʹηΩϡϦςΟΛֶͿʹ͸


    • A.2 HTTPSϋϯζΦϯ

    View Slide

  43. Appendix ຊฤͰ͸ѻΘͳ͔ͬͨτϐοΫͷֶश ಺༰
    • ͜ͷຊΛಡΈऴ͑ͨਓ͕εςοϓΞοϓ͢ΔͨΊͷֶशڭࡐͱͯ͠
    IPAʰ҆શͳ΢ΣϒαΠτͷ࡞Γํʱ΍ಙؙຊͳͲΛ঺հ


    • චऀ͕ηΩϡϦςΟ৘ใͷΩϟονΞοϓͰΑ͘ݟΔ΢ΣϒαΠτ
    ͷϦϯΫΛ঺հ


    • ϒϩά΍੬ऑੑ৘ใ͚ͩͰͳ͘ɺϒϥ΢βΞοϓσʔτ৘ใͷ
    ΩϟονΞοϓͷͨΊͷϦϯΫ΋ܝࡌ


    • HTTPSԽͷϋϯζΦϯΛܝࡌ

    View Slide

  44. Appendix Τϐιʔυ
    • HTTPSԽͷઃఆ͸ϑϩϯτΤϯυΤϯδχΞʹ͸ೃછΈ͕ͳ͍͔ͳͱࢥͬͯɺෑډ
    ΛԼ͛ΔͨΊ3ষ͔Β෇࿥΁Ҡಈͨ͠


    • ʮ঺հ͞Ε͍ͯΔಙؙຊ΍ʰWebϒϥ΢βηΩϡϦςΟʱʰϒϥ΢βϋοΫʱ͸ॳ
    ֶऀ޲͚Ͱ͸ͳ͍ʯͱAmazonϨϏϡʔͰ͝ࢦఠ͍͍͚ͨͩͨͲɺ͔ͨ͠ʹ೉͍͠
    ͔΋ͱ͋ͱ͔Βࢥͬͨ


    • ಙؙຊ͸௕೥͓ੈ࿩ʹͳͬͨਓ΋ଟ͍͠ࠓͰ΋WebηΩϡϦςΟશମΛମܥత
    ʹֶͿʹ͸ϕετͳຊͩͱࢥ͍·͢


    • ηΩϡϦςΟͷೖ໳ॻগͳ͍ͱࢥ͏

    View Slide

  45. ϩʔΧϧ؀ڥͷHTTPSԽʹ͸mkcert͕ศར
    https://github.com/FiloSottile/mkcert
    ϧʔτূ໌ॻͷΠϯετʔϧ
    αʔόূ໌ॻͷੜ੒

    View Slide

  46. ຊͷࣥචʹ͍ͭͯ

    View Slide

  47. ͜ͷຊͰ఻͔͑ͨͬͨ͜ͱ
    • ϑϩϯτΤϯυΤϯδχΞͷ੹຿͸޿͕Γͭͭ͋ΓɺηΩϡϦςΟ
    ΛΑΓҰ૚ҙࣝ͠ͳ͚Ε͹͍͚ͳ͍


    • ඇػೳཁ݅͸UX΍Ϗδωε΁ͷӨڹ͕େ͖͍


    • جຊతͳ஌ࣝΛ਎ʹ͚ͭΔ͚ͩͰ΋ଟ͘ͷ੬ऑੑ͸๷͛Δ


    • ϒϥ΢βͷηΩϡϦςΟػೳ͸ਐԽ͍ͯ͠ΔͷͰར༻͠·͠ΐ͏


    • ηΩϡϦςΟ໘ന͍

    View Slide

  48. ͜ͷຊͰؾΛ͚ͭͨ͜ͱ
    • ॳֶऀͰ΋ಡΈਐΊΒΕΔΑ͏ʹؾΛ͚ͭͨ


    • ೉͍͠આ໌Λ୺ંͬͨ


    • ਤ΍ίʔυΛͰ͖ΔݶΓܝࡌͨ͠


    • ϋϯζΦϯͰΘ͔Βͳ͍ɾಈ͔ͳ͍͕ແ͍Α͏ʹؾΛ͚ͭͨ


    • HTML/CSS/JavaScript͚ͩͰॻ͔Ε͍ͯΔ


    • αϯϓϧίʔυΛ༻ҙ: github.com/shisama/security-handson


    • ඇΤϯδχΞͷ࠺Ͱ΋ਐΊΒΕΔ͔ࢼͯ͠΋Βͬͨ

    View Slide

  49. ຊΛॻ͘ͱ͍͏͜ͱ
    • ຊΛॻ͍ͨΓԿ͔ΛΞ΢τϓοτ͢Δ͜ͱ͸࣌ؒ΋࿑ྗ΋͔͔Δ


    • Ξ΢τϓοτ͢Δਓʹରͯ͜͠Ε·ͰҎ্ʹϦεϖΫτ͢ΔΑ͏ʹͳͬͨ


    • ਖ਼͍͠৘ใΛॻͨ͘Ίʹ͸๲େͳௐ͕ࠪඞཁ͚ͩͲษڧʹͳΔ


    • චऀ͕Ұ൪ษڧʹͳͬͨͱײ͍ͯ͡Δ


    • ҰਓͰॻ͘ͷ͸େม


    • ؂मऀ΍ฤूऀɺϨϏϡΞʔͳͲڠྗͯ͘͠ΕΔํʑ͕͍ͳ͔ͬͨΒॻ͖
    ͖Εͳ͔ͬͨ


    • ϨϏϡʔ΍ϔϧϓΛٻΊΒΕͨͱ͖͸લ޲͖ʹڠྗ͍ͨ͠

    View Slide

  50. ײ૝ɾϑΟʔυόοΫ͓଴͓ͪͯ͠Γ·͢ʂ
    • ײ૝΍ϑΟʔυόοΫΛϒϩά΍ϨϏϡʔͳͲͰॻ͍͍͚ͯͨͩΔͱخ͍͠Ͱ͢ʂ


    • ʮ͕͜͜Θ͔Γʹ͔ͬͨ͘ʯͳͲͷϑΟʔυόοΫ͸ஶऀʹͱͬͯ΋ࢀߟʹͳΔͷ
    ͰͲΜͲΜ͓ئ͍͠·͢ʂ


    • ዁౓͠ͳͯ͘Α͍ͷͰద੾ͳݴ༿ݣ͍ͷϑΟʔυόοΫΛ͓ئ͍͠·͢🙏


    • ʮؒҧͬͯΔ͔΋…ʯͱࢥͬͨΒʮ͓໰͍߹ΘͤʯͳͲ͔Β͝࿈བྷ͍ͩ͘͞ʂ

    ਖ਼ޡදܝࡌ΍૿࡮࣌ʹमਖ਼Ͱ͖Δ͔΋͠Ε·ͤΜɻ

    https://www.shoeisha.co.jp/book/qa/form/9784798169477

    View Slide

  51. Thanks

    View Slide