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

Content Security Policy 101

Content Security Policy 101

As more and more services get digital these days, security has become a significant aspect of every application. Especially when it comes to third-party code, it is tough to guarantee safety. But in general, XSS and Code Injection is a big problem these days. Content Security Policy provides another layer of security that helps to detect and protect different attacks. In this talk, I will introduce this concept and its main features, as well as show real-world examples and integrations for WordPress.

14d39e65f615fd6dcb9dd44ea7f7995b?s=128

Christoph Rumpel

April 07, 2018
Tweet

Transcript

  1. Hello WordCamp :)

  2. Content Security Policy 101

  3. ABOUT ME

  4. CHRISTOPH RUMPEL Web Developer

  5. CHRISTOPH RUMPEL Web Developer PHP / Laravel Chatbots Talks @christophrumpel

    christoph-rumpel.com
  6. Finally a Starting Point for Your PHP Chatbot https://buildchatbotswithphp.com/

  7. SECURITY IS HARD

  8. SSL Input Handling Updates Packages Plugins CSRF NONCES Weak Typing

    Error Handling Storing Credentials Server Access SQL Prepared Statements Passwords Brute Force Attacks
  9. Adobe Playstation Network Cloudflare FAMOUS LEAKS

  10. How can we protect our sites when even big companies

    can't?
  11. Step by step

  12. CONTENT SECURITY POLICY

  13. Content Security Policy (CSP) is an added layer of security

    that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. “ „ MDN WEB DOCS
  14. CSP lets you define trusted resources.

  15. Content-Security-Policy: policies

  16. Content-Security-Policy: policy HTTP Header name

  17. Content-Security-Policy: policy HTTP Header value

  18. Content-Security-Policy: img-src *; script-src 'self'; Policies EXAMPLE

  19. img-src *; script-src 'self'; DIRECTIVES

  20. img-src *; script-src 'self'; SOURCES

  21. img-src *; script-src 'self'; TRANSLATED Images are allowed to be

    loaded from any resource
  22. img-src *; script-src 'self'; TRANSLATED Scripts are allowed to be

    loaded from the current site's origin only
  23. img-src script-src DIRECTIVES

  24. img-src script-src style-src font-src media-src form-action ...

  25. * 'self' SOURCES

  26. * 'self' domain.example.com *.example.com 'none' ...

  27. CSP christoph-rumpel.com

  28. CSP facebook.com

  29. NONCES AND HASHES

  30. script-src 'unsafe-inline'; INLINE STYLES Don't do that!

  31. script-src 'nonce-2726c7f26c'; NONCES <script nonce='2726c7f26c'></script>

  32. script-src 'sha256-B2yPHKaXn'; HASHES <script>var isAdmin = 1;</script>

  33. BROWSER SUPPORT

  34. BROWSER SUPPORT

  35. CSP + WORDPRESS

  36. Server Configuration Theme Plugin INTEGRATIONS

  37. SERVER CONFIGURATION Apache

  38. SERVER CONFIGURATION Nginx

  39. THEME functions.php

  40. Create your own Use a given one PLUGIN

  41. WP Content Security Plugin PLUGIN https://de.wordpress.org/plugins/wp-content-security-policy/

  42. WP Content Security Policy Plugin - Screenshot Controls

  43. WP Content Security Policy Plugin - Screenshot Policies

  44. WP Core Themes Plugins BE AWARE OF

  45. Report Only Using defaults Error-Driven-Development Send Reports HOW TO START

  46. Content-Security-Policy-Report-Only: script-src 'self'; 1. REPORT ONLY

  47. Content-Security-Policy-Report-Only: default-src 'self'; 2. USING DEFAULTS

  48. 3. ERROR-DRIVEN-DEVELOPMENT

  49. Content-Security-Policy: default-src 'self'; report-uri http://site.com 3. SEND REPORTS

  50. CSP Report Example

  51. Use CSP Don't allow inline scripts Start in report only

    mode Learn about dependencies SUMMARY
  52. Content Security Policy 101 Laravel Response Caching And CSP CSP,

    Hash-Algorithm, and Turbolinks Quick CSP Reference Guide MDN web docs CSP Level 2 W3C Recommendation CSP Level 3 Working Draft RESOURCES
  53. THANKS

  54. QUESTIONS?

  55. THANKS AGAIN