Nuxt.js About CSP for Nuxt.js @sunecosuri Date: 2018-06-25 Vue Night in Fukuoka #1 

@sunecosuri GMOϖύϘ
ΤϯδχΞ 

࿩͢͜ͱ CSP ʹ͍ͭͯ Nuxt.js Ͱͷઃఆํ๏ʹ͍ͭͯ 

CSP CSP 

Content Security Policy σ ʔ λ ͷ ৵ ೖ Λ ๷ ͙ ػ ߏ ΢ΣϒαΠτͰѻ͏ϦιʔεͷಡΈࠐΈΛࡉ͔͘؅ཧ͢Δ͜ͱ͕Ͱ͖ΔHTTP headerɻ W3CʹΑͬͯ΋ఆٛ͞Ε͓ͯΓɺXSSͱ͍ͬͨѱҙͷ͋Δ injection ߈ܸͷϦεΫΛܰݮ͢Δ͜ͱ͕Ͱ͖Δɻ
 ࣮ߦΛڐՄ͢ΔϦιʔεΛϗϫΠτϦετํࣜͰઃఆ͠ɺؚ·Εͳ͍Ϧιʔε͸ϒϥ΢βͰ࣮ߦΛϒϩοΫ͢Δ͜ͱ ͕Ͱ͖Δɻ ͳ ʹ Λ ๷ ͙ ͷ ͔ ɾInline Scriptͷ࣮ߦ
 ɾҙਤ͠ͳ͍ϦιʔεͷಡΈࠐΈ 

Can I use ରԠϒϥ΢βঢ়گ W R I T E H E R E S O M E T H I N G A B O U T Entrepreneurial activities differ substantially depending on the type of organization and creativity. Entrepreneurial activities differ substantially depending on the type of organization and creativity. Entrepreneurial activities differ substantially depending on the type of organization and creativity. Entrepreneurial activities differ substantially. 

※Defense-in-Depth Techniques for Modern Web Applications and Google’s Journey with CSP ΑΓҾ༻ 

࣮ߦͷछྨ W h i t e l i s t n o n c e ଐ ੑ H a s h ஋ script-src www.google-analytics.com script-src ‘nonce-t3cdm2’ script-src ‘sha256-3d8xj1psc/5kx92a…..’ 

Whitelist Whitelist e x a m p l e . t e s t C o n t e n t S e c u r i t y P o l i c y default-src ‘self’; scripit-src ‘self’ cdn.example.com; report-uri /csp-log; ಉҰΦϦδϯͳͷͰOK srcipt-src σΟϨΫςΟϒʹ
 هࡌ͞ΕͯΔͷͰOK 

e x a m p l e . t e s t C o n t e n t S e c u r i t y P o l i c y default-src ‘self’; scripit-src ‘self’ cdn.example.com; report-uri /csp-log; ಉҰΦϦδϯͳͷͰOK srcipt-src σΟϨΫςΟϒʹ
 هࡌ͞ΕͯΔͷͰOK “>’><script src=“//evil.test”> “>’<script>alert(‘attack’)</ script> ϗϫΠτϦετʹͳ͍ͷͰNG Inline script ͸ڐՄ͍ͯ͠ͳ͍ͷͰNG Whitelist Whitelist 

e x a m p l e . t e s t C o n t e n t S e c u r i t y P o l i c y default-src ‘self’; scripit-src ‘self’ cdn.example.com; report-uri /csp-log; ಉҰΦϦδϯͳͷͰOK srcipt-src σΟϨΫςΟϒʹ
 هࡌ͞ΕͯΔͷͰOK “>’><script src=“//evil.test”> “>’<script>alert(‘attack’)</ script> P O S T h t t p : // e x a m p l e . t e s t / c s p - l o g json ͷܗࣜͰPOST͞ΕΔ Whitelist Whitelist 


 alert(‘execute’)
 
 alert(‘not execute’)
 nonceͰڐՄ͢Δ C o n t e n t S e c u r i t y P o l i c y default-src ‘self’; scripit-src 'nonce-EDNnf03' report-uri /csp-log; srcipt-src σΟϨΫςΟϒͰࢦఆ͞Εͨ nonce-* ͷ஋͕Ұக͢Δ΋ͷͷΈ࣮ߦ͢Δ 


 alert(‘execute’)
 
 alert(‘not execute’)
 C o n t e n t S e c u r i t y P o l i c y default-src ‘self’; scripit-src 'sha256- qznLcsROx4GACP2dm0UCKCzCG- HiZ1guq6ZZDob_Tng=' report-uri /csp-log; Hash஋ͰڐՄ͢Δ ࣮ߦ͢ΔscriptϒϩοΫΛ೚ҙͷΞϧΰϦζϜͰΤϯίʔυͯ͠Ұக͍ͯ͠Δ΋ͷͷΈΛ࣮ߦ͢Δ 

Nuxt.jsͰͷઃఆํ๏ʹ͍ͭͯ 

v1.1.0 ͰCSPରԠͨ͠ 

nuxt.config.js ɾcsp.enabled Λtrue ʹ͢Δ ɾcsp.policies ʹ࣮ߦΛڐՄ͢ΔυϝΠϯΛσΟ ϨΫςΟϒ͝ͱʹఆٛ͢Δ ɾࠓճͷαϯϓϧͰ͸ҎԼΛڐՄ͢Δઃఆ
 ɹ - google analytics
 ɹ - google tag manager
 ɹ - youtube
 ɹ - font awesome 

Demo Demo 

Thanks Thanks!