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

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

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

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

Avatar for Masashi Hirano

Masashi Hirano

February 28, 2023
Tweet

More Decks by Masashi Hirano

Other Decks in Programming

Transcript

  1. ຊͷ໨࣍ • ୈ1ষ WebηΩϡϦςΟ֓ཁ • ୈ2ষ ϋϯζΦϯͷ४උ • ୈ3ষ HTTP

    • ୈ4ষ ΦϦδϯʹΑΔWebΞϓϦέʔγϣϯؒͷΞΫηε੍ݶ • ୈ5ষ XSS • ୈ6ষ ͦͷଞͷडಈత߈ܸʢCSRFɺΫϦοΫδϟοΩϯάɺΦʔϓϯϦμΠϨΫτʣ • ୈ7ষ ೝূɾೝՄ • ୈ8ষ ϥΠϒϥϦΛૂͬͨηΩϡϦςΟϦεΫ • Appendix ຊฤͰ͸ѻΘͳ͔ͬͨτϐοΫͷֶश
  2. ੬ऑੑͷ࢓૊Έ΍ରࡦΛखΛಈ͔͠ͳ͕Βֶ΂ ΔϋϯζΦϯΛܝࡌ • 3ষ HTTP: HTTPϔομͷ෇༩΍ϧʔςΟϯάͳͲ • 4ষ CORS: CORSͷઃఆͳͲ

    • 5ষ XSS: XSSͷରࡦɺCSPͷઃఆ • 6ষ ͦͷଞडಈత߈ܸ: CSRFରࡦɺΦʔϓϯϦμΠϨΫτରࡦɺΫϦοΫδϟοΩϯά ରࡦ • 7ষ ೝূɾೝՄ: ύεϫʔυϑΥʔϜͷϕετϓϥΫςΟε • ෇࿥ HTTPS: HTTPSͷઃఆɺHSTSͷઃఆ
  3. ୈ1ষ WebηΩϡϦςΟ֓ཁ ಺༰ • ηΩϡϦςΟͷҰൠతͳ࿩ • ੬ऑੑͱ͸ • ඇػೳཁ݅΍ηΩϡϦςΟͷ඼࣭͕༩͑ΔӨڹͱ͸ •

    WebΞϓϦέʔγϣϯͷ੬ऑੑͷछྨͱಈ޲ • IPAʰ҆શͳ΢ΣϒαΠτͷ࡞Γํʱ΍OWASP Top 10͔Β੬ऑੑ ͷछྨ΍ಈ޲Λ঺հ
  4. ୈ2ষ Τϐιʔυ • ࣥච్தͰNode.js LTS͕2ճมΘΔ • ࠷ऴతʹಈ࡞֬ೝͨ࣌͠఺ͷ࠷৽LTSͷ18.12.1Λਪ঑ͱͨ͠ • Node.js͸semverΛݫ֨ʹक͍ͬͯΔͷͰ18ܥ͸໰୊ͳ͘ಈ͘͸ͣ •

    Google ChromeΛਪ঑ͱ͠·ͨ͠ • ଞͷϒϥ΢βͰಈ͔ͳ͔ͬͨΒ͝ΊΜͳ͍͞ • ॻ੶ͷ͓໰͍߹ΘͤϑΥʔϜ΍αϯϓϧίʔυͷϦϙδτϦ͔Βใࠂ͍ͯ͠ ͚ͨͩΔͱॿ͔Γ·͢
  5. ୈ2ষ Τϐιʔυ • ESMͰॻ͔͘CJSͰॻ͔͘೰Μ͕ͩɺESM͸·ͩൃల్্ͱࢥͬͯCJS ʹͨ͠ • Node.js 18ͷ࣌఺Ͱ͸σϑΥϧτ͸CJS • ESMΛ࢖͏ͳΒtype:

    “module”͕ඞཁ • Node.jsͷຊͰ͸ͳ͍͠ɺෑډΛԼ͛ΔͨΊʹσϑΥϧτʹ౗ͨ͠ • ষ຤ͷίϥϜʹ͜ͷลͷઆ໌͸ॻ͍ͨ
  6. • 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ষ ࣥචֶͯ͠Μͩ͜ͱᶄ
  7. ୈ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 ϓϩηε෼཭ʹΑΔαΠυνϟωϧ߈ܸͷରࡦ
  8. ୈ4ষ ΦϦδϯʹΑΔWebΞϓϦέʔγϣϯؒ ͷΞΫηε੍ݶ ಺༰ • Same Origin PolicyʹΑΔ੍ݶʹ͍ͭͯઆ໌ͱϋϯζΦϯ • Cross

    Origin Resource Sharing (CORS) ͷઆ໌ͱϋϯζΦϯ • CORSͷ࢓૊Έʹ͍ͭͯ • Access-Control-Allow-* ϔομͷઆ໌ • ϓϦϑϥΠτϦΫΤετͷઆ໌ • Site Isolation΍COOP΍COEPͳͲαΠυνϟωϧ߈ܸΛ๷͙࢓૊Έͷઆ໌
  9. ୈ4ষ ࣥචֶͯ͠Μͩ͜ͱᶃ • CORS-safelisted method/headersͷଘࡏΛFetch StandardͰ஌Δ • GET, HEAD, POST

    • AcceptɺAccept-LanguageɺContent-LanguageɺContent-Type, Range • ͜ΕΒҎ֎͕࢖ΘΕΔΫϩεΦϦδϯ΁ͷϦΫΤετ͸ϓϦϑϥΠ τ͕ૹ৴͞ΕΔ
  10. ୈ5ষ XSS ໨࣍ • 5.1 ೳಈత߈ܸͱडಈత߈ܸ • 5.2 XSS •

    5.3 XSSରࡦͷϋϯζΦϯ • 5.4 Content Security PolicyʢCSPʣΛ࢖ͬͨ XSS ରࡦ • 5.5 CSPͷઃఆϋϯζΦϯ
  11. ୈ5ষ Τϐιʔυ • WindowsͷInternet Explorerαϙʔτऴྃʢ2022೥6݄15೔ʣ • X-XSS-Protectionϔομ͸΋͏͍Βͳ͍ࢠͱࢥͬͯݪߘ͔Β࡟আ • CSP࢖͓͏ •

    IE։͍ͨΒEdge΁ڧ੍ϦμΠϨΫτ͞ΕΔʢ2023೥2݄14೔ʣ • ͜Ε͔Β࡞ΔWebΞϓϦέʔγϣϯ͸IEͷ͜ͱ͸ؾʹ͠ͳͯ͘Αͦ͞͏ • document.domain͕σϑΥϧτͰॻ͖׵͑ෆՄʹͳΔ(Chrome 100ʣ
  12. ୈ5ষ ࣥචதʹֶΜͩ͜ͱ • Sanitizer APIͱ͍͏DOMPurifyͷΑ͏ͳWebඪ४API͕ࣥච్தͰ ग़͖ͯͨ const untrustedStr = location.hash;

    // <img src=x onerror="javascript:alert(1)" /> 
 const sanitizer = new Sanitizer(untrustedStr); const target = document.getElementById(untrustedStr); target.setHTML(untrustedStr, { sanitizer }); // <img src=x /> 4BOJUJ[FS"1*Λ࢖͏ͱ)5.-͔Βةݥͳจࣈྻ͕࡟আ͞ΕΔ
  13. ୈ6ষ ͦͷଞͷडಈత߈ܸʢCSRFɺΫϦοΫ δϟοΩϯάɺΦʔϓϯϦμΠϨΫτʣ ໨࣍ • 6.1 CSRF • 6.2 CSRFରࡦͷϋϯζΦϯ

    • 6.3 ΫϦοΫδϟοΩϯά • 6.4 ΫϦοΫδϟοΩϯάରࡦͷϋϯζΦϯ • 6.5 ΦʔϓϯϦμΠϨΫτ • 6.6 ΦʔϓϯϦμΠϨΫτରࡦͷϋϯζΦϯ
  14. ୈ7ষ ೝূɾೝՄ ໨࣍ • 7.1 ೝূͱೝՄͷҧ͍ • 7.2 ೝূػೳͷηΩϡϦςΟϦεΫ •

    7.3 ΞΧ΢ϯτ࡞੒ϑΥʔϜ࣮૷ϋϯζΦϯ • 7.4 ϩάΠϯ৘ใͷ࿙͍͑ʹ஫ҙ͢Δ
  15. ୈ7ষ ೝূɾೝՄ ಺༰ • ೝূͱೝՄͷҧ͍Λઆ໌ • ೝূํ๏ͷઆ໌ ʢύεϫʔυೝূɺιʔγϟϧϩάΠϯ etcʣ •

    ύεϫʔυೝূΛૂͬͨ߈ܸͷઆ໌ʢϒϧʔτϑΥʔε߈ܸ etcʣ • ύεϫʔυೝূ΁ͷ߈ܸͷରࡦͷઆ໌ • ϢʔβʔʹෳࡶͳύεϫʔυΛઃఆͤ͞ΔͨΊͷϑΥʔϜ࡞੒ϋϯ ζΦϯΛܝࡌ
  16. ୈ8ষ Τϐιʔυ • ࣥචத(2021೥) ʹ ua-parser-js, coa, rcͱ͍ͬͨਓؾύοέʔδͰϚ ϧ΢ΣΞ͕૬͍࣍Ͱݟ͔ͭΔ •

    npmΞΧ΢ϯτ৐ͬऔΓ͕ݪҼ • npm͸ೋཁૉೝূ (2FA) ͷඞਢԽΛਪਐ͍ͯ͘͠ • Top 100ͷnpmύοέʔδϝϯςφʔͷΞΧ΢ϯτ2FAඞਢʹ • 2FAඞਢԽΛ֦େ͍͍ͯͬͯ͠Δ
  17. ͜ͷຊͰؾΛ͚ͭͨ͜ͱ • ॳֶऀͰ΋ಡΈਐΊΒΕΔΑ͏ʹؾΛ͚ͭͨ • ೉͍͠આ໌Λ୺ંͬͨ • ਤ΍ίʔυΛͰ͖ΔݶΓܝࡌͨ͠ • ϋϯζΦϯͰΘ͔Βͳ͍ɾಈ͔ͳ͍͕ແ͍Α͏ʹؾΛ͚ͭͨ •

    HTML/CSS/JavaScript͚ͩͰॻ͔Ε͍ͯΔ • αϯϓϧίʔυΛ༻ҙ: github.com/shisama/security-handson • ඇΤϯδχΞͷ࠺Ͱ΋ਐΊΒΕΔ͔ࢼͯ͠΋Βͬͨ