How do I set my CSP header?

Some websites don't allow resources from a different domain, other than that of itself, to be loaded. If you want your website to have Mopinion feedback forms it can be necessary to add HTTP headers. For more information on Content Security Policy headers please see https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP.

Content Security Policy (CSP) header

Below you will find the domain Mopinion uses and an example of how this should be defined in Nginx.

Fetch Directive

Domains

Extra*

Fetch Directive

Domains

Extra*

script-src

https://*.mopinion.com

‘unsafe-inline' OR ‘nonce-{{YOUR-NONCE}}’ OR load from separate source. The 'unsafe-inline' setting is only needed when the Mopinion deploymentcode is loaded inline in the HTML of the page. When using a tag manager or loading the Mopinion deployment code from a file ‘unsafe-inline’ for the script-src can be removed from the CSP.

style-src

https://*.mopinion.com

Either ‘unsafe-inline' OR a ‘nonce-{{YOUR-NONCE}}’ is required regardless of whether the Mopinion deployment code is loaded inline in the HTML of the page, using a tag manager or loading the script from a separate source.

frame-src

https://*.mopinion.com

 

connect-src

https://*.mopinion.com

 

img-src

https://*.mopinion.com

 

font-src

'self' data: https://*.mopinion.com

 

Example in Nginx:

add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' https://*.mopinion.com; style-src 'self' https://*.mopinion.com https://fonts.googleapis.com; frame-src https://*.mopinion.com; connect-src https://*.mopinion.com; font-src 'self' data: https://*.mopinion.com https://fonts.gstatic.com;";

Using a Nonce:

For the style-src a nonce needs to be available on the page. This can be added to the Mopinion script if this is the only script for which a nonce is used. If the nonce is already used it will automatically be picked up by the Mopinion script.

<script nonce="{{nonce}}"> ...Mopinion script </script>

If a separate nonce is used for the style-src and it’s not used elsewhere on the page add the nonce as follows.

<script nonce="{{nonce}}" data-style-nonce="{{stylenonce}}"> ...Mopinion script </script>

nonce - HTML: HyperText Markup Language | MDN

CORS header

For more information on Cross-Origin Resource Sharing (CORS) please see this article about CORS at MDN web docs.