How to Configure CSP header in AEM , Dispatcher ?

How to Configure CSP header in AEM ?

Content Security Policy (CSP) is a security feature that helps prevent cross-site scripting (XSS) and other code injection attacks by restricting the sources from which a page can load resources. To implement a CSP header in an Apache web server, you can use the Header directive in your Apache configuration.

Here are the steps to implement a CSP header in Apache:

1. Determine your CSP policy: First, you need to determine your CSP policy. This policy defines the rules for what types of content can be loaded from which sources. You can use a CSP policy generator like the one available on the Mozilla Developer Network (MDN) website to generate a policy that meets your needs.

2. Add the CSP header to your Apache configuration: Once you have your CSP policy, you can add the CSP header to your Apache configuration. To do this, open your Apache configuration file (usually located at /etc/httpd/conf/httpd.conf or a similar location depending on your setup) and add the following line:

Example 1

Header set Content-Security-Policy "your-csp-policy-here"

 

Replace "your-csp-policy-here" with your actual CSP policy. For example:

Example 2

Header set Content-Security-Policy "default-src 'self'; 

font-src https://fonts.gstatic.com; img-src 'self' 

data: https://www.example.com; script-src 'self'; 

style-src 'self' https://www.example.com" 

 

 

Example 3

if you are using Dispatcher you can add this header in .vhost files, for RHEL Apache set up you can add it in :-     /etc/httpd/conf.d/enabled_vhosts/example.vhost 

<IfModule mod_headers.c>


 

    Header salways et Content-Security-Policy "default-src 'self'; 

    font-src https://fonts.gstatic.com; img-src 'self' 

    data: https://www.example.com; script-src 'self'; 

    style-src 'self' https://www.example.com" 

 

</IfModule>

3. Restart Apache: After adding the CSP header to your Apache configuration, you need to restart Apache to apply the changes. You can do this by running the following command:

sudo systemctl restart httpd

This will restart Apache with the new CSP header in place.

Once you've implemented the CSP header, you can test your website using the CSP Evaluator tool (available on the Mozilla Developer Network website) to ensure that your CSP policy is working correctly. If you find that certain resources are being blocked that shouldn't be, you can adjust your CSP policy accordingly.

Sample

Assume a Content-Security-Policy header is set with the following policy:

    img-src 'self' https://images.sample.com;

Allows

With the above CSP policy, images can be loaded from the same origin (via the 'self' source list value), or via URLs starting with: https://images.sample.com

    <img src="/images/csp.jpg">
    <img src="https://images.sample.com/csp.jpg">

Blocks

The above policy will block any image not same origin or via https://images.sample.com, so the following would be blocked.

    <img src="https://other.sample.com/csp.jpg">

What does 'img-src' was not explicitly set mean?

If you do not set the img-src CSP directive, but you do have the default-src CSP directive set, then that policy will be applied. You need to either make sure that your img src attribute values comply with the default-src policy, or you need to add a img-src directive to your CSP policy.

Here are some example of what you might see in the console when images are blocked from loading by a CSP policy with a default-src policy set:

refused to load the image because it violates the following content security policy directive: "default-src 'none'". note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

refused to load the image 'http://localhost:8080/favicon.ico' because it violates the following content security policy directive: "default-src 'none'". note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

A complete policy defines a set of allowed and restricted behaviors and is comprised of directives and sources. Here are some of the directives that you can set with concrete examples from mozilla.org:

• `script-src`: Specifies valid sources for JavaScript.
  • Example: script-src ‘self’ *.mozilla.net *.mozilla.org *.mozilla.com
• `img-src`: Specifies valid sources of images and favicons.
  • Example: img-src ‘self’ *.mozilla.net *.mozilla.org *.mozilla.com data: *.optimizely.com www.googletagmanager.com www.google-analytics.com *.tiles.mapbox.com api.mapbox.com creativecommons.org ad.doubleclick.net sp.analytics.yahoo.com
• `child-src`: Defines the valid sources for web workers and nested browsing contexts loaded.
  • Example: child-src *.optimizely.com www.googletagmanager.com www.google-analytics.com www.youtube-nocookie.com trackertest.org www.surveygizmo.com accounts.firefox.com accounts.firefox.com.cn www.youtube.com
• `default-src`: Serves as a fallback for the other fetch directives.
  • Example: default-src ‘self’ *.mozilla.net *.mozilla.org *.mozilla.com
• Etc.
  
  

The detailed list of directives can be found on the w3.org website.