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

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

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

0631f2e33b42847ae5dedbdd53e1c1a4?s=128

sunecosuri

July 12, 2018
Tweet

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!