Content Security Policy in Sitecore
Did you hear your website is failed on the content audit before it is going live? Mentioning that the implementation has the incorrect or missing Content security policy domains. Basically, Content security policy is helps to prevent or minimize from certain types of threats.
What is CSP and it is purpose?
As per the https://content-security-policy.com/ the CSP is the name of a Http response header that modern browser use to enhance the security of the document or a web page.
The main purpose of the CSP is to prevent XSS (Cross Site Scripting) attacks and it is preventing to load the unauthorize or harmful content your website. Cross site scripting is basically to attack the website by using the script injections from another domain and CSP (Content Security Policy) is define that which domain should be allowed to what type of the content on the document or a website.
By chance the CSS or JS is hosted on the external website like CDN’s and those CDN hosts should be listed under some directives like default – src. There are more directives are there will see details in the below,
| Directives | Purposes |
| default-src | It defines the default policy to fetching resources such as JavaScript, CSS, fonts, AJAX requests, Frames, HTML5 Media. |
| script-src | This directive is used to define the JavaScript resources. |
| style-src | This directive is used to obtain the CSS resources. |
| img-src | This directive is used to obtain the external images. |
| connect-src | It helps define the AJAX, WebSocket, fetch() event sources. |
| font-src | This directive supports fonts sources. |
| media-src | This directive is used to obtain the source of audio and videos. |
| frame-src | It helps to load the valid iframes on the document or a website. |
| Source expression | Purpose |
|---|---|
| ‘self’ | It allows to load the resources only from the host origin. |
| ‘unsafe-inline’ | It allows to use the style, onclick attributes or inline scripts in the website |
| ‘unsafe-eval’ | It allows to use the script functions function (), eval (), setTimeout () which commonly used on the scripts. |
| ‘none’ | It will prevent to load the resources from the directives. |
| ‘*’ | Allows all resources from the directives. |
Examples:
default-src ‘self’ It allows everything from the same origin of the website.
script-src ‘self’ It allows scripts from the same origin of the website.
script-src ‘self’ www.google – analytics.com It allows script from the google analytics and same origin.
Validations:
Refused to load the script ‘script-uri’ because it violates the following Content Security Policy directive: “your CSP directive”.
This error message when the content security policy doesn’t match with define policy for the website and the error messages may vary with different browser but message is the same. Let say if other than the mentioned origin script is try to load on the website it will through above error.
Ways to implement the CSP
There are multiple ways to implement the Content Security Policy for the website here I am trying to explain the with .Net or event Sitecore.
In the .Net or Sitecore projects the simplest way to implement the CSP is Web.config file, the implementation is below like this,
<httpProtocol>
<customHeaders>
<remove name=”X-Powered-By” />
<remove name=”X-Content-Type-Options”/>
<remove name=”X-XSS-Protection”/>
<remove name=”Content-Security-Policy”/>
<add name=”X-XSS-Protection” value=”1; mode=block”/>
<add name=”X-Content-Type-Options” value=”nosniff “/>
<add name=”Content-Security-Policy” value=”default-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval’ https://apps.sitecore.net; script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval’ https://www.googletagmanager.com https://www.google-analytics.com https://www.buzzsprout.com; img-src ‘self’ data: https://assets.buzzsprout.com https://bat.bing.com; style-src ‘self’ ‘unsafe-inline’ https://fonts.googleapis.com https://cloud.typenetwork.com https://assets.buzzsprout.com; font-src ‘self’ ‘unsafe-inline’ https://fonts.gstatic.com https://cloud.typenetwork.com; child-src ‘self’ ‘unsafe-inline’ https://player.brightcove.net https://www.buzzsprout.com; upgrade-insecure-requests; block-all-mixed-content;”/>
</customHeaders>
</httpProtocol>
Other ways to implement the CSP by programmatically that I will explain in detail with upcoming blog series.
Conclusion
The Content Security Policy is helps to protect the website from the attacks and more of security purposes this CSP is common thing for the for the all public websites to make the website safe and secure. There are pros and cons of the CSP implementations each one has it’s own purpose and let’s discuss this in a upcoming blog series.
Skybridge Infotech, a Sitecore Certified Implementation Partner, emphasizes robust security practices in their Sitecore projects, including the implementation of Content Security Policies (CSP).