$30 off During Our Annual Pro Sale. View Details »

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.

Christoph Rumpel

April 07, 2018
Tweet

More Decks by Christoph Rumpel

Other Decks in Technology

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