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 may 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* |
|---|---|---|
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 | style-src domain is only used as a fallback to support older browsers. |
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; connect-src https://*.mopinion.com; font-src 'self' data: https://*.mopinion.com https://fonts.gstatic.com;";Using a Nonce:
If you want to implement the Mopinion Deployment script tag inline and omit the unsafe-inline directive, you can use a nonce as shown below. Note that you can also avoid having to implement the Mopinion Deployment script inline by using a tag manager or calling it from a file you are hosting yourself.
<script nonce="{{nonce}}">
...Mopinion deployment script
</script>
HTML nonce global attribute - HTML | MDN
CORS header
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff| woff2|font.css|css|js)$">
Header set Access-Control-Allow-Origin "*.mopinion.com"
</FilesMatch>For more information on Cross-Origin Resource Sharing (CORS), please see this article about CORS at MDN web docs.