Content Security Policy (CSP) Headers

Content-Security-Policy is the name of a HTTP response header that modern browsers use to enhance the security of the document (or web page). The HTTP Content Security Policy response header gives website admins a sense of control by giving them the authority to restrict the resources such as JavaScript and CSS a user is allowed to load within site. In other words, you can whitelist your site's content sources. Although it is primarily used as a HTTP response header, you can also apply it via a meta tag.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https://img.nopcommerce.com; object-src 'none'; script-src 'self'; style-src 'self'; frame-ancestors 'self'; base-uri 'self'; form-action 'self';">

In order to add this custom meta tag, you can go to www.yourStore.com/Admin/Setting/GeneralCommon and find Custom <head> tag and add this as shown in image below.

custom CSP head tag image

Content Security Policy protects against Cross Site Scripting (XSS) and other form of attacks such as Click Jacking. Although it doesn't eliminate their possibility entirely, it can sure minimize the damage. Compatibility isn't a problem as most of the major browsers support CSP. It is not supported in Internet Explorer.

In order to test your browser if it supports CSP or not, you can follow this link.

CSP Directive Reference

The Content-Security-Policy header value is made up of one or more directives (defined below), multiple directives are separated with a semicolon (;)

default-src

The default-src directive defines the default policy for fetching resources such as JavaScript, Images, CSS, Fonts, AJAX requests, Frames, HTML5 Media. Not all directives fallback to default-src.

default-src 'self' cdn.nopcommerce.com;

script-src

Defines valid sources of JavaScript.

script-src 'self' js.nopcommerce.com;

style-src

Defines valid sources of stylesheets or CSS.

style-src 'self' css.nopcommerce.com;

img-src

Defines valid sources of images.

img-src 'self' img.nopcommerce.com;

connect-src

Applies to XMLHttpRequest (AJAX), WebSocket or EventSource. If not allowed the browser emulates a 400 HTTP status code.

connect-src 'self';

font-src

Defines valid sources of font resources (loaded via *@font-face*).

font-src font.nopcommerce.com;

object-src

Defines valid sources of plugins, eg <object>, <embed> or <applet>.

object-src 'self';

media-src

Defines valid sources of audio and video, eg HTML5 <audio>, <video> elements.

media-src media.nopcommerce.com;

frame-src

Defines valid sources for loading frames.

frame-src 'self';

sandbox

Enables a sandbox for the requested resource similar to the iframe sandbox attribute. The sandbox applies a same origin policy, prevents popups, plugins and script execution is blocked. You can keep the sandbox value empty to keep all restrictions in place, or add values: allow-forms allow-same-origin allow-scripts allow-popups, allow-modals, allow-orientation-lock, allow-pointer-lock, allow-presentation, allow-popups-to-escape-sandbox, and allow-top-navigation

sandbox allow-forms allow-scripts;

child-src

Defines valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>

child-src 'self'

form-action

Defines valid sources that can be used as an HTML <form> action.

form-action 'self';

frame-ancestors

Defines valid sources for embedding the resource using <frame> <iframe> <object> <embed> <applet>. Setting this directive to 'none' should be roughly equivalent to X-Frame-Options: DENY

frame-ancestors 'none';

plugin-types

Defines valid MIME types for plugins invoked via <object> and <embed>. To load an <applet> you must specify application/x-java-applet.

plugin-types application/pdf;

report-to

Defines a reporting group name defined by a Report-To HTTP response header. See the Reporting API for more info.

report-to groupName;

worker-src

Restricts the URLs which may be loaded as a Worker, SharedWorker or ServiceWorker.

worker-src 'none';

manifest-src

Restricts the URLs that application manifests can be loaded.

manifest-src 'none';

Restricts the URLs that the document may navigate to by any means. For example when a link is clicked, a form is submitted, or window.location is invoked. If form-action is present then this directive is ignored for form submissions. Implementation Status

navigate-to nopcommerce.com

Content-Security-Policy Examples

Allow everything but only from the same origin

default-src 'self';

Only Allow Scripts from the same origin

script-src 'self';

Allow Google Analytics, Google AJAX CDN and Same Origin

script-src 'self' www.google-analytics.com ajax.googleapis.com;

Starter Policy

default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';

This policy allows images, scripts, AJAX, and CSS from the same origin, and does not allow any other resources to load (eg object, frame, media, etc). It is a good starting point for many sites.

Content-Security-Policy Error Messages

Based on the browser, the CSP error messages may differ.

In chrome developer tools, we can see following message.

Refused to load the script 'script-uri' because it violates the following Content Security Policy directive: "your CSP directive".

In firefox developer tools as following.

Content Security Policy: A violation occurred for a report-only CSP policy ("An attempt to execute inline scripts has been blocked"). The behavior was allowed, and a CSP report was sent.

In addition to a console message, a securitypolicyviolation event is fired on the window. For more info, follow this link.