Nuxt.js におけるCSPの連携について / content security policy for Nuxt.js

Transcript

1. Nuxt.js About CSP for Nuxt.js @sunecosuri Date: 2018-06-25 Vue Night in Fukuoka #1
2. @sunecosuri GMOϖύϘ
   ΤϯδχΞ
3. ࿩͢͜ͱ CSP ʹ͍ͭͯ Nuxt.js Ͱͷઃఆํ๏ʹ͍ͭͯ
4. CSP CSP
5. Content Security Policy σ ʔ λ ͷ ৵ ೖ Λ ๷ ͙ ػ ߏ ΢ΣϒαΠτͰѻ͏ϦιʔεͷಡΈࠐΈΛࡉ͔͘؅ཧ͢Δ͜ͱ͕Ͱ͖ΔHTTP headerɻ W3CʹΑͬͯ΋ఆٛ͞Ε͓ͯΓɺXSSͱ͍ͬͨѱҙͷ͋Δ injection ߈ܸͷϦεΫΛܰݮ͢Δ͜ͱ͕Ͱ͖Δɻ
 ࣮ߦΛڐՄ͢ΔϦιʔεΛϗϫΠτϦετํࣜͰઃఆ͠ɺؚ·Εͳ͍Ϧιʔε͸ϒϥ΢βͰ࣮ߦΛϒϩοΫ͢Δ͜ͱ ͕Ͱ͖Δɻ ͳ ʹ Λ ๷ ͙ ͷ ͔ ɾInline Scriptͷ࣮ߦ
 ɾҙਤ͠ͳ͍ϦιʔεͷಡΈࠐΈ
6. 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.
7. ※Defense-in-Depth Techniques for Modern Web Applications and Google’s Journey with CSP ΑΓҾ༻
8. ࣮ߦͷछྨ 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…..’
9. 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; <img src=“sample.png”> <script src=“// cdn.example.com/index.js”> ಉҰΦϦδϯͳͷͰOK srcipt-src σΟϨΫςΟϒʹ
 هࡌ͞ΕͯΔͷͰOK
10. 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; <img src=“sample.png”> <script src=“// cdn.example.com/index.js”> ಉҰΦϦδϯͳͷͰOK srcipt-src σΟϨΫςΟϒʹ
 هࡌ͞ΕͯΔͷͰOK “>’><script src=“//evil.test”> “>’<script>alert(‘attack’)</ script> ϗϫΠτϦετʹͳ͍ͷͰNG Inline script ͸ڐՄ͍ͯ͠ͳ͍ͷͰNG Whitelist Whitelist
11. 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; <img src=“sample.png”> <script src=“// cdn.example.com/index.js”> ಉҰΦϦδϯͳͷͰ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
12. <script nonce=“nonce-EDNnf03”>
 alert(‘execute’)
 </script> <script>
 alert(‘not execute’)
 </script> 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-* ͷ஋͕Ұக͢Δ΋ͷͷΈ࣮ߦ͢Δ
13. <script nonce=“sha256- qznLcsROx4GACP2dm0UCKCzCG- HiZ1guq6ZZDob_Tng= ”>
 alert(‘execute’)
 </script> <script>
 alert(‘not execute’)
 </script> 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ϒϩοΫΛ೚ҙͷΞϧΰϦζϜͰΤϯίʔυͯ͠Ұக͍ͯ͠Δ΋ͷͷΈΛ࣮ߦ͢Δ
14. Nuxt.jsͰͷઃఆํ๏ʹ͍ͭͯ
15. v1.1.0 ͰCSPରԠͨ͠
16. nuxt.config.js ɾcsp.enabled Λtrue ʹ͢Δ ɾcsp.policies ʹ࣮ߦΛڐՄ͢ΔυϝΠϯΛσΟ ϨΫςΟϒ͝ͱʹఆٛ͢Δ ɾࠓճͷαϯϓϧͰ͸ҎԼΛڐՄ͢Δઃఆ
 ɹ - google analytics
 ɹ - google tag manager
 ɹ - youtube
 ɹ - font awesome
17. Demo Demo
18. Thanks Thanks!