Node学園 41時限目 書籍について - connpass https://nodejs.connpass.com/event/275061/
ϑϩϯτΤϯυ։ൃͷͨΊͷηΩϡϦςΟೖ ຊͷհͱࣥචΤϐιʔυNodeֶԂ 41࣌ݶฏণ࢜ (@shisama_)
View Slide
ฏ ণ࢜ / Masashi HiranoFrontend Developer@shisama_shisamaNode.js Core Collaboratorࣾձਓେֶੜ@UoPeople
ʲએʳ2݄13ʹॻ੶Λग़൛͠·ͨ͠ʂHTML/CSS/JSΛͬͯΞϓϦέʔγϣϯΛ։ൃͰ͖Δ͚ͲɺηΩϡϦςΟ͜Ε͔Βษڧͱ͍͏ํ͚ͯॻ͖·ͨ͠ʂ ࠓຊͷ֓ཁͱࣥචதͷΤϐιʔυࣥචதʹֶΜͩ͜ͱͷҰ෦Λհ͍ͨ͠ͱࢥ͍·͢ʂϑϩϯτΤϯυ։ൃͷͨΊͷηΩϡϦςΟೖ
ຊͷ֓ཁ
ຊͷ࣍• ୈ1ষ WebηΩϡϦςΟ֓ཁ• ୈ2ষ ϋϯζΦϯͷ४උ• ୈ3ষ HTTP• ୈ4ষ ΦϦδϯʹΑΔWebΞϓϦέʔγϣϯؒͷΞΫηε੍ݶ• ୈ5ষ XSS• ୈ6ষ ͦͷଞͷडಈత߈ܸʢCSRFɺΫϦοΫδϟοΩϯάɺΦʔϓϯϦμΠϨΫτʣ• ୈ7ষ ೝূɾೝՄ• ୈ8ষ ϥΠϒϥϦΛૂͬͨηΩϡϦςΟϦεΫ• Appendix ຊฤͰѻΘͳ͔ͬͨτϐοΫͷֶश
੬ऑੑͷΈରࡦΛखΛಈ͔͠ͳ͕ΒֶΔϋϯζΦϯΛܝࡌ• 3ষ HTTP: HTTPϔομͷ༩ϧʔςΟϯάͳͲ• 4ষ CORS: CORSͷઃఆͳͲ• 5ষ XSS: XSSͷରࡦɺCSPͷઃఆ• 6ষ ͦͷଞडಈత߈ܸ: CSRFରࡦɺΦʔϓϯϦμΠϨΫτରࡦɺΫϦοΫδϟοΩϯάରࡦ• 7ষ ೝূɾೝՄ: ύεϫʔυϑΥʔϜͷϕετϓϥΫςΟε• HTTPS: HTTPSͷઃఆɺHSTSͷઃఆ
֤ষͷհͱΤϐιʔυ
ୈ1ষ WebηΩϡϦςΟ֓ཁ ࣍• 1.1 ͳͥηΩϡϦςΟରࡦΛߦ͏ͷ͔• 1.2 Webͷ੬ऑੑͷछྨͱ
ୈ1ষ WebηΩϡϦςΟ֓ཁ ༰• ηΩϡϦςΟͷҰൠతͳ• ੬ऑੑͱ• ඇػೳཁ݅ηΩϡϦςΟͷ࣭͕༩͑ΔӨڹͱ• WebΞϓϦέʔγϣϯͷ੬ऑੑͷछྨͱಈ• IPAʰ҆શͳΣϒαΠτͷ࡞ΓํʱOWASP Top 10͔Β੬ऑੑͷछྨಈΛհ
ୈ1ষ Τϐιʔυ• ඇػೳཁ݅ͷେ͞Έ͍ͨͳͱ͜ΖΛ͔͑ͨͬͨ• ಡऀλʔήοτʢΞϓϦέʔγϣϯΛػೳཁ݅௨Γ։ൃͰ͖ΔΑ͏ʹͳͬͨਓʣ͕ඇػೳཁ݅Λҙࣝͯ͠։ൃͰ͖ΔΑ͏ʹ• ಈΛઆ໌͢ΔͨΊʹOWASP Top 10ΛҾ༻ͨ͠ ࣥච్தʹ࠷৽൛͕৽ ༰Λॻ͖͑Δhttps://owasp.org/Top10/
ୈ2ষ ϋϯζΦϯͷ४උ ࣍• 2.1 ४උΛ͡ΊΔલʹ• 2.2 Node.jsͷઃఆ• 2.3 Node.js + ExpressΛͬͨHTTPαʔόͷߏங
ୈ2ষ ϋϯζΦϯͷ४උ ༰• ޙଓͷষͷϋϯζΦϯͷͨΊͷ४උΛ͢Δ• Node.jsͷΠϯετʔϧίϚϯυʹ͍ͭͯઆ໌• Node.js + ExpressΛͬͯϧʔςΟϯά੩తϑΝΠϧͷ৴Λ͢ΔαʔόߏஙͷϋϯζΦϯ
ୈ2ষ Τϐιʔυ• ࣥච్தͰNode.js LTS͕2ճมΘΔ• ࠷ऴతʹಈ࡞֬ೝͨ࣌͠ͷ࠷৽LTSͷ18.12.1Λਪͱͨ͠• Node.jssemverΛݫ֨ʹक͍ͬͯΔͷͰ18ܥͳ͘ಈͣ͘• Google ChromeΛਪͱ͠·ͨ͠• ଞͷϒϥβͰಈ͔ͳ͔ͬͨΒ͝ΊΜͳ͍͞• ॻ੶ͷ͓͍߹ΘͤϑΥʔϜαϯϓϧίʔυͷϦϙδτϦ͔Βใࠂ͍͚ͯͨͩ͠Δͱॿ͔Γ·͢
ୈ2ষ Τϐιʔυ• ESMͰॻ͔͘CJSͰॻ͔͘Μ͕ͩɺESM·ͩൃల్্ͱࢥͬͯCJSʹͨ͠• Node.js 18ͷ࣌ͰσϑΥϧτCJS• ESMΛ͏ͳΒtype: “module”͕ඞཁ• Node.jsͷຊͰͳ͍͠ɺෑډΛԼ͛ΔͨΊʹσϑΥϧτʹͨ͠• ষͷίϥϜʹ͜ͷลͷઆ໌ॻ͍ͨ
ୈ3ষ HTTP ࣍• 3.1 HTTPجૅ• 3.2 HTTPͷϋϯζΦϯ• 3.3 ҆શͳ௨৴ͷͨΊͷHTTPS
ୈ3ষ HTTP ༰• URLɺDNSɺTCP/IPɺHTTPͳͲͷϒϥβͱαʔόͷ௨৴ͷجૅࣝͷઆ໌• HTTPϔομͷ༩ϧʔςΟϯάͷϋϯζΦϯܝࡌ• HTTPͷऑɺHTTPSͷརɺHTTPSԽͷඞཁੑɺMixed ContentɺHSTSʹ͍ͭͯઆ໌
ୈ3ষ ࣥචֶͯ͠Μͩ͜ͱᶃ• TLS1.3ͷ伴ަͰެ։伴ΘΕ͍ͯͳ͍• ECDH伴ڞ༗͕ΘΕ͍ͯΔ• ୈ1Ͱݹ͍ใΛࡌͤͯ͠·ͬͨɻ͝ΊΜͳ͍͞ɻɻ• ਖ਼ޡදۙެ։&ୈ2Ͱमਖ਼༧ఆ
https://zenn.dev/herumi/articles/tls1_3_crypto https://gihyo.jp/book/2021/978-4-297-12307-9TLSʹ͍ͭͯherumi͞Μ͕ࢦఠͯ͘͠Ε·ͨ͠ ͜ΕΒΛಡΜͰษڧʹͳΓ·ͨ͠
TLS1.3Ͱެ։伴҉߸ΘΕ͍ͯ·ͤΜʂhttps://zenn.dev/herumi/articles/tls1_3_crypto
• 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• Notifications 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ষ ࣥචֶͯ͠Μͩ͜ͱᶄ
ୈ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 ϓϩηεʹΑΔαΠυνϟωϧ߈ܸͷରࡦ
ୈ4ষ ΦϦδϯʹΑΔWebΞϓϦέʔγϣϯؒͷΞΫηε੍ݶ ༰• Same Origin PolicyʹΑΔ੍ݶʹ͍ͭͯઆ໌ͱϋϯζΦϯ• Cross Origin Resource Sharing (CORS) ͷઆ໌ͱϋϯζΦϯ• CORSͷΈʹ͍ͭͯ• Access-Control-Allow-* ϔομͷઆ໌• ϓϦϑϥΠτϦΫΤετͷઆ໌• Site IsolationCOOPCOEPͳͲαΠυνϟωϧ߈ܸΛ͙Έͷઆ໌
ୈ4ষ ࣥචֶͯ͠Μͩ͜ͱᶃ• CORS-safelisted method/headersͷଘࡏΛFetch StandardͰΔ• GET, HEAD, POST• AcceptɺAccept-LanguageɺContent-LanguageɺContent-Type,Range• ͜ΕΒҎ֎͕ΘΕΔΫϩεΦϦδϯͷϦΫΤετϓϦϑϥΠτ͕ૹ৴͞ΕΔ
ୈ4ষ ࣥචֶͯ͠Μͩ͜ͱᶄ• github.ioco.jpeTLD(࣮࣭తͳτοϓϨϕϧυϝΠϯ)ͱͯ͠Έͳ͞ΕɺeTLD+1(shisama.github.ioͳͲ)͕SiteͱΈͳ͞ΕΔ͜ͱΛΔ• Cookie ͷSameSiteͷSite͜Εʹجͮ͘https://www.shisama.github.io/1eTLD+1https://blog.shisama.github.io/2eTLD+1same-site
ୈ4ষ Τϐιʔυ• ࣥචޙɺSite ͷఆ͕ٛeTLD+1͚ͩͰͳ͘schemeؚ·ΕΔΑ͏ʹͳͬͨhttps://www.shisama.github.ioeTLD+1schemehttp://www.shisama.github.ioeTLD+1schemecross-site
same-site/cross-siteʹ͍ͭͯͪ͜ΒΛࢀরhttps://web.dev/same-site-same-origin/
ୈ5ষ XSS ࣍• 5.1 ೳಈత߈ܸͱडಈత߈ܸ• 5.2 XSS• 5.3 XSSରࡦͷϋϯζΦϯ• 5.4 Content Security PolicyʢCSPʣΛͬͨ XSS ରࡦ• 5.5 CSPͷઃఆϋϯζΦϯ
ୈ5ষ XSS ༰• ೳಈత߈ܸͱडಈత߈ܸͷઆ໌• XSSͷΈͱରࡦͷઆ໌ͱϋϯζΦϯ• Content Security Policy (CSP) ͷઆ໌ͱϋϯζΦϯ• Trusted Typesͷઆ໌ͱϋϯζΦϯ
ୈ5ষ Τϐιʔυ• WindowsͷInternet Explorerαϙʔτऴྃʢ20226݄15ʣ• X-XSS-Protectionϔομ͏͍Βͳ͍ࢠͱࢥͬͯݪߘ͔Βআ• CSP͓͏• IE։͍ͨΒEdgeڧ੍ϦμΠϨΫτ͞ΕΔʢ20232݄14ʣ• ͜Ε͔Β࡞ΔWebΞϓϦέʔγϣϯIEͷ͜ͱؾʹ͠ͳͯ͘Αͦ͞͏• document.domain͕σϑΥϧτͰॻ͖͑ෆՄʹͳΔ(Chrome 100ʣ
ୈ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.-͔Βةݥͳจࣈྻ͕আ͞ΕΔ
ୈ6ষ ͦͷଞͷडಈత߈ܸʢCSRFɺΫϦοΫδϟοΩϯάɺΦʔϓϯϦμΠϨΫτʣ ࣍• 6.1 CSRF• 6.2 CSRFରࡦͷϋϯζΦϯ• 6.3 ΫϦοΫδϟοΩϯά• 6.4 ΫϦοΫδϟοΩϯάରࡦͷϋϯζΦϯ• 6.5 ΦʔϓϯϦμΠϨΫτ• 6.6 ΦʔϓϯϦμΠϨΫτରࡦͷϋϯζΦϯ
ୈ6ষ ͦͷଞͷडಈత߈ܸʢCSRFɺΫϦοΫδϟοΩϯάɺΦʔϓϯϦμΠϨΫτʣ ༰• XSSҎ֎ͷडಈత߈ܸͷΈͱରࡦͷઆ໌ͱϋϯζΦϯ• CSRF• ΫϦοΫδϟοΩϯά• ΦʔϓϯϦμΠϨΫτ
ୈ6ষ Τϐιʔυ• ࣥච్தͰExpressͷCSRFରࡦ༻ϛυϧΣΞ csurf ͕Deprecated ʹͳͬͨ• CSRFରࡦϋϯζΦϯΛ csurf Λͬͨํ๏͔ΒDouble SubmitCookie ΛͬͨϋϯζΦϯʹॻ͖ͨ͠
https://github.com/expressjs/csurf
ୈ6ষ ࣥචֶͯ͠Μͩ͜ͱ• SameSiteଐੑ͕ͳ͍ʢσϑΥϧτLaxʣCookieͷ߹ɺChromeͰൃߦ͔Β2ؒΫϩεαΠτͷPOSTͰCookieΛૹ৴͢Δ• Lax͕σϑΥϧτʹͳͬͨ͜ͱͰյΕΔαΠτͷ؇ાஔ• কདྷతʹ͜ͷ༷আ͞ΕΔ• ݱஈ֊ͰSameSite σϑΥϧτLax͚ͩͰCSRF͕͛ͳ͍
ୈ7ষ ೝূɾೝՄ ࣍• 7.1 ೝূͱೝՄͷҧ͍• 7.2 ೝূػೳͷηΩϡϦςΟϦεΫ• 7.3 ΞΧϯτ࡞ϑΥʔϜ࣮ϋϯζΦϯ• 7.4 ϩάΠϯใͷ࿙͍͑ʹҙ͢Δ
ୈ7ষ ೝূɾೝՄ ༰• ೝূͱೝՄͷҧ͍Λઆ໌• ೝূํ๏ͷઆ໌ ʢύεϫʔυೝূɺιʔγϟϧϩάΠϯ etcʣ• ύεϫʔυೝূΛૂͬͨ߈ܸͷઆ໌ʢϒϧʔτϑΥʔε߈ܸ etcʣ• ύεϫʔυೝূͷ߈ܸͷରࡦͷઆ໌• ϢʔβʔʹෳࡶͳύεϫʔυΛઃఆͤ͞ΔͨΊͷϑΥʔϜ࡞ϋϯζΦϯΛܝࡌ
ୈ7ষ Τϐιʔυ• ೝূɾೝՄൣғ͕͗͢ΔͷͰ༰Λߜͬͨ• OAuthOIDCɺFIDOͳͲʹ͍ͭͯհ͢ΔఔʹཹΊ͍ͯΔ• ύεϫʔυೝূʹϑΥʔΧε• ϒϥβͷύεϫʔυϚωʔδϟศར• ϋϯζΦϯͰར༻ํ๏Λհ͍ͯ͠Δ
ୈ8ষ ϥΠϒϥϦΛૂͬͨηΩϡϦςΟϦεΫ ࣍• 8.1 ϥΠϒϥϦͷར༻• 8.2 ϥΠϒϥϦʹજΉηΩϡϦςΟϦεΫ• 8.3 ϥΠϒϥϦར༻ͷηΩϡϦςΟରࡦ
ୈ8ষ ϥΠϒϥϦΛૂͬͨηΩϡϦςΟϦεΫ ༰• JavaScriptͷϥΠϒϥϦOSSपΓͷઆ໌• ϥΠϒϥϦར༻ʹΑΔηΩϡϦςΟϦεΫͷઆ໌• ϥΠϒϥϦܦ༝ͷ߈ܸCDN্ͷϑΝΠϧͷվ͟Μetc• 2018ͷESLint2021ͷua-parser-jsͳͲͷࣄྫͷհ• npm auditDependabotͳͲͷհ
ୈ8ষ Τϐιʔυ• ࣥචத(2021) ʹ ua-parser-js, coa, rcͱ͍ͬͨਓؾύοέʔδͰϚϧΣΞ͕૬͍࣍Ͱݟ͔ͭΔ• npmΞΧϯτͬऔΓ͕ݪҼ• npmೋཁૉೝূ (2FA) ͷඞਢԽΛਪਐ͍ͯ͘͠• Top 100ͷnpmύοέʔδϝϯςφʔͷΞΧϯτ2FAඞਢʹ• 2FAඞਢԽΛ֦େ͍͍ͯͬͯ͠Δ
Appendix ຊฤͰѻΘͳ͔ͬͨτϐοΫͷֶश ࣍• A.1 ͞ΒʹηΩϡϦςΟΛֶͿʹ• A.2 HTTPSϋϯζΦϯ
Appendix ຊฤͰѻΘͳ͔ͬͨτϐοΫͷֶश ༰• ͜ͷຊΛಡΈऴ͑ͨਓ͕εςοϓΞοϓ͢ΔͨΊͷֶशڭࡐͱͯ͠IPAʰ҆શͳΣϒαΠτͷ࡞ΓํʱಙؙຊͳͲΛհ• චऀ͕ηΩϡϦςΟใͷΩϟονΞοϓͰΑ͘ݟΔΣϒαΠτͷϦϯΫΛհ• ϒϩά੬ऑੑใ͚ͩͰͳ͘ɺϒϥβΞοϓσʔτใͷΩϟονΞοϓͷͨΊͷϦϯΫܝࡌ• HTTPSԽͷϋϯζΦϯΛܝࡌ
Appendix Τϐιʔυ• HTTPSԽͷઃఆϑϩϯτΤϯυΤϯδχΞʹೃછΈ͕ͳ͍͔ͳͱࢥͬͯɺෑډΛԼ͛ΔͨΊ3ষ͔ΒҠಈͨ͠• ʮհ͞Ε͍ͯΔಙؙຊʰWebϒϥβηΩϡϦςΟʱʰϒϥβϋοΫʱॳֶऀ͚Ͱͳ͍ʯͱAmazonϨϏϡʔͰ͝ࢦఠ͍͍͚ͨͩͨͲɺ͔ͨ͠ʹ͍͔͠ͱ͋ͱ͔Βࢥͬͨ• ಙؙຊ͓ੈʹͳͬͨਓଟ͍͠ࠓͰWebηΩϡϦςΟશମΛମܥతʹֶͿʹϕετͳຊͩͱࢥ͍·͢• ηΩϡϦςΟͷೖॻগͳ͍ͱࢥ͏
ϩʔΧϧڥͷHTTPSԽʹmkcert͕ศརhttps://github.com/FiloSottile/mkcertϧʔτূ໌ॻͷΠϯετʔϧαʔόূ໌ॻͷੜ
ຊͷࣥචʹ͍ͭͯ
͜ͷຊͰ͔͑ͨͬͨ͜ͱ• ϑϩϯτΤϯυΤϯδχΞͷ͕Γͭͭ͋ΓɺηΩϡϦςΟΛΑΓҰҙࣝ͠ͳ͚Ε͍͚ͳ͍• ඇػೳཁ݅UXϏδωεͷӨڹ͕େ͖͍• جຊతͳࣝΛʹ͚ͭΔ͚ͩͰଟ͘ͷ੬ऑੑ͛Δ• ϒϥβͷηΩϡϦςΟػೳਐԽ͍ͯ͠ΔͷͰར༻͠·͠ΐ͏• ηΩϡϦςΟ໘ന͍
͜ͷຊͰؾΛ͚ͭͨ͜ͱ• ॳֶऀͰಡΈਐΊΒΕΔΑ͏ʹؾΛ͚ͭͨ• ͍͠આ໌Λંͬͨ• ਤίʔυΛͰ͖ΔݶΓܝࡌͨ͠• ϋϯζΦϯͰΘ͔Βͳ͍ɾಈ͔ͳ͍͕ແ͍Α͏ʹؾΛ͚ͭͨ• HTML/CSS/JavaScript͚ͩͰॻ͔Ε͍ͯΔ• αϯϓϧίʔυΛ༻ҙ: github.com/shisama/security-handson• ඇΤϯδχΞͷ࠺ͰਐΊΒΕΔ͔ࢼͯ͠Βͬͨ
ຊΛॻ͘ͱ͍͏͜ͱ• ຊΛॻ͍ͨΓԿ͔ΛΞτϓοτ͢Δ͜ͱ࣌ؒ࿑ྗ͔͔Δ• Ξτϓοτ͢Δਓʹରͯ͜͠Ε·ͰҎ্ʹϦεϖΫτ͢ΔΑ͏ʹͳͬͨ• ਖ਼͍͠ใΛॻͨ͘Ίʹେͳௐ͕ࠪඞཁ͚ͩͲษڧʹͳΔ• චऀ͕Ұ൪ษڧʹͳͬͨͱײ͍ͯ͡Δ• ҰਓͰॻ͘ͷେม• मऀฤूऀɺϨϏϡΞʔͳͲڠྗͯ͘͠ΕΔํʑ͕͍ͳ͔ͬͨΒॻ͖͖Εͳ͔ͬͨ• ϨϏϡʔϔϧϓΛٻΊΒΕͨͱ͖લ͖ʹڠྗ͍ͨ͠
ײɾϑΟʔυόοΫ͓͓ͪͯ͠Γ·͢ʂ• ײϑΟʔυόοΫΛϒϩάϨϏϡʔͳͲͰॻ͍͍͚ͯͨͩΔͱخ͍͠Ͱ͢ʂ• ʮ͕͜͜Θ͔Γʹ͔ͬͨ͘ʯͳͲͷϑΟʔυόοΫஶऀʹͱͬͯࢀߟʹͳΔͷͰͲΜͲΜ͓ئ͍͠·͢ʂ• ͠ͳͯ͘Α͍ͷͰదͳݴ༿ݣ͍ͷϑΟʔυόοΫΛ͓ئ͍͠·͢🙏• ʮؒҧͬͯΔ͔…ʯͱࢥͬͨΒʮ͓͍߹ΘͤʯͳͲ͔Β͝࿈བྷ͍ͩ͘͞ʂ ਖ਼ޡදܝࡌ૿࣌ʹमਖ਼Ͱ͖Δ͔͠Ε·ͤΜɻ https://www.shoeisha.co.jp/book/qa/form/9784798169477
Thanks
masashi
trapezoid
kaityo256
niftycorp
mot_techtalk
kasacchiful
azukiazusa1
skanehira
os1ma
kinocoboy2
twada
atinfinity
paulrobertlloyd
addyosmani
marcelosomers
frogandcode
wjessup
eileencodes
shpigford
garrettdimon
jeffersonlam
notwaldorf
tammyeverts
jponch