Content Security Policy

Owned by Chinmayee Patnaik
Last updated: Mar 18, 2020
2 min read

Background: In order to mitigate a large class of potential cross-site scripting issues, the Microsoft Edge Extension system has incorporated the general concept of Content Security Policy (CSP). This introduces some fairly strict policies that make Extensions more secure by default, and provides you with the ability to create and enforce rules governing the types of content that may be loaded and run by your Extensions and applications.

Generally, it is added as this

{...,"content_security_policy": "[POLICY STRING GOES HERE]"...}

In Sitecore sites, Content Security Policy is enforced as this node in Web.Config.

<add name="Content-Security-Policy" value="default-src 'self' 'unsafe-inline' 'unsafe-eval' https://apps.sitecore.netdefault-src; object-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' 'unsafe-inline' https://fonts.gstatic.com; upgrade-insecure-requests; block-all-mixed-content;" />

References provided by Sitecore:

What we saw as a result: None of the Videos loaded in the Search charm for the Video Components like Youtube, Vimeo. Brightcove and Kaltura.

Fix:

Option 1: Download all the files, include it in your package

Option 2: (as Option 1 was not acceptable)

The error to your rescue:

  • Step 1: The error

     

  • Inference

    • There are 2 errors here:

      • “style-src”: External source used for setting Style source is not allowed

      • “default-src”: External source used for setting javascript methods like eval() is not allowed

    • Fix:

      • Grab the external URLs - in this case “https://cdnjs.cloudflare.com” - add it to the allowed URLs in the Content-Security-Policy” tag in web.config for the sources you need it for

      • So add it for both “default-src” and “style-src”. As you can see in the image above, those are the tags where the sources have been added for.

      • The node now becomes:

<add name="Content-Security-Policy" value="default-src 'self' 'unsafe-inline' 'unsafe-eval' https://apps.sitecore.netdefault-src https://cdnjs.cloudflare.com; object-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com; font-src 'self' 'unsafe-inline' https://fonts.gstatic.com; upgrade-insecure-requests; block-all-mixed-content;" />

More example:

  • The error:

  • Inference: External source defined for font is not allowed.

  • Fix:

Example 2:

on Sitecore 9.3.Score 3.1 Score QA site, the final tag after testing for all the videos: