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.

Transcript

1. Hello WordCamp :)
   

   View Slide

2. Content Security
   Policy 101
   

   View Slide

3. ABOUT ME
   

   View Slide

4. CHRISTOPH RUMPEL
   Web Developer
   

   View Slide

5. CHRISTOPH RUMPEL
   Web Developer
   PHP / Laravel
   Chatbots
   Talks
   @christophrumpel
   christoph-rumpel.com
   

   View Slide

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

   View Slide

7. SECURITY IS HARD
   

   View Slide

8. SSL
   Input Handling
   Updates
   Packages
   Plugins
   CSRF
   NONCES
   Weak Typing
   Error Handling
   Storing Credentials
   Server Access
   SQL Prepared Statements
   Passwords
   Brute Force Attacks
   

   View Slide

9. Adobe
   Playstation Network
   Cloudflare
   FAMOUS LEAKS
   

   View Slide

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

    View Slide

11. Step by step
    

    View Slide

12. CONTENT SECURITY
    POLICY
    

    View Slide

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
    

    View Slide

14. CSP lets you define trusted resources.
    

    View Slide

15. Content-Security-Policy: policies
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. img-src *; script-src 'self';
    TRANSLATED
    Scripts are allowed to be loaded from the current site's origin only
    

    View Slide

23. img-src
    script-src
    DIRECTIVES
    

    View Slide

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

    View Slide

25. *
    'self'
    SOURCES
    

    View Slide

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

    View Slide

27. CSP christoph-rumpel.com
    

    View Slide

28. CSP facebook.com
    

    View Slide

29. NONCES AND HASHES
    

    View Slide

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

    View Slide

31. script-src 'nonce-2726c7f26c';
    NONCES
    
    

    View Slide

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

    View Slide

33. BROWSER SUPPORT
    

    View Slide

34. BROWSER SUPPORT
    

    View Slide

35. CSP + WORDPRESS
    

    View Slide

36. Server Configuration
    Theme
    Plugin
    INTEGRATIONS
    

    View Slide

37. SERVER CONFIGURATION
    Apache
    

    View Slide

38. SERVER CONFIGURATION
    Nginx
    

    View Slide

39. THEME
    functions.php
    

    View Slide

40. Create your own
    Use a given one
    PLUGIN
    

    View Slide

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

    View Slide

42. WP Content Security Policy Plugin - Screenshot Controls
    

    View Slide

43. WP Content Security Policy Plugin - Screenshot Policies
    

    View Slide

44. WP Core
    Themes
    Plugins
    BE AWARE OF
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

48. 3. ERROR-DRIVEN-DEVELOPMENT
    

    View Slide

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

    View Slide

50. CSP Report Example
    

    View Slide

51. Use CSP
    Don't allow inline scripts
    Start in report only mode
    Learn about dependencies
    SUMMARY
    

    View Slide

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
    

    View Slide

53. THANKS
    

    View Slide

54. QUESTIONS?
    

    View Slide

55. THANKS AGAIN
    

    View Slide