Content security policy (CSP) is an additional security layer used to detect and weaken certain types of attacks, including cross site scripting (XSS) and packet sniffing attacks.
Website maintainers use CSP to define the rules of some content sources, and then tell the browser these rules in some way. The browser determines which source content is safe and usable according to these rules.

1, How to define CSP

1. Use the element to configure the policy

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">

2. You can return the HTTP Header of content security policy, and the corresponding value of this Header is the rule of our web content source. X-Content-Security-Policy in the old version.

2, CSP defensible attack

2.1. Cross site script attack XSS
The main goal of CSP is to reduce XSS attacks.

CSP enables server managers to reduce or eliminate the vectors on which XSS attacks rely by specifying a valid domain, that is, the valid source of executable scripts recognized by the browser. A CSP compatible browser will only execute the script files obtained from the whitelist field, ignoring all other scripts (including inline scripts and HTML event processing properties).

2.2 packet sniffing attack
In addition to limiting the domain in which content can be loaded, the server can also indicate which protocol is allowed to be used; For example (from an idealized security perspective), the server can specify that all content must be loaded through HTTPS. A complete data security transmission strategy not only enforces the use of HTTPS for data transmission, but also marks all cookie s with the security flag, and provides automatic redirection to make the HTTP page direct to the HTTPS version. A website can also use the strict transport security HTTP header to ensure that the browser connecting to it uses only encrypted channels.

3, How to use CSP

Configuring content security policy involves adding content security policy HTTP headers to a page and configuring corresponding values to control which resources user agents (browsers, etc.) can obtain for the page.

You specify the policy by using the content security policy HTTP header, like this:

Content-Security-Policy: policy

The policy parameter is a string containing various descriptions of CSP policy instructions.

Describe the policy:
A policy is composed of a series of policy directives. Each policy directive describes a policy for a specific type of resources and effective scope. Your policy should include a default SRC policy instruction, which should be applied when other resource types do not comply with their own policies. The policy can include default SRC or script SRC (EN US) instructions to prevent inline scripts from running and eliminate the use of eval(); You can also include a default SRC or style SRC (EN US) instruction to restrict the

Common instructions:
script-src: This directive specifies the source of executable scripts in the website and controls XSLT Source of;
style-src: Defines the source of the style file;
media-src: It specifies the source of rich media (audio and video, video text track format) resources;
child-src: Specified image worker ,frame This embeds usable links;
font-src: Specifies the source of fonts. If a third-party font is used in a web page, this instruction can be used;
img-src: Specifies the source of pictures in the website;
form-action: Specifies the in the web page form element action Submittable address;
connect-src: Specifies the address to initiate the connection in the script, such as XMLHttpRequest of send Methods WebSocket Connection address EventSource etc.;
frame-src: This directive stipulates frame Available links for. stay CSP level 2 It's abandoned in the document. It's called for us to use it in the document child-src To replace this instruction, but in level 3 Resume use in;
object-src: Specifies the source of some plug-ins, such as Flash etc.;
report-uri: This instruction specifies a CSP Report the address. When the browser detects a failure instruction, it will report through this specified address. It is worth noting that this instruction cannot be used in meta Element, and CSP level3 This instruction will be discarded and used report-to Instead, in order to ensure the effectiveness of this directive, the official recommends report-uri & report-to Simultaneous use;
worker-src: This instruction is CSP level3 In addition, it stipulates Worker,SharedWorker,serviceWorker Addresses available in;
base-uri: Specifies the page base Links in Tags;
frame-ancestors: Specifies which sources the current page can be embedded in. act on <frame>, <iframe>, <embed>, <applet>. The command cannot pass <meta>Specified and only for non HTML Resource validation for document type;

4, Common use cases

4.1 example 1
A website manager wants all content to come from the same source of the site (excluding its sub domain name)

Content-Security-Policy: default-src 'self'

4.2 example 2
A website manager allows content to come from trusted domain names and their sub domain names (the domain name does not have to be the same as the domain name where CSP is set)

Content-Security-Policy: default-src 'self' *.trusted.com

4.3 example 3
A website manager allows users of web applications to include pictures from any source in their own content, but restricts audio or video from trusted resource providers, and all scripts must obtain trusted code from a specific host server

Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com

4.4 example 4
The manager of an online banking website wants to ensure that all contents of the website are obtained through SSL, so as to prevent attackers from eavesdropping on users' requests.

Content-Security-Policy: default-src https://onlinebanking.jumbobank.com

The server is only allowed through HTTPS and only from onlinebanking jumbobank. COM domain name to access the document.

4.5 example 5
The manager of an online mailbox wants to allow HTML to be included in the email. Similarly, images can be loaded from anywhere, but JavaScript or other potentially dangerous content (loaded from anywhere) is not allowed.

Content-Security-Policy: default-src 'self' *.mailsite.com; img-src *

Note that this example does not specify script SRC (EN US). In this CSP example, the site configures it through the default SRC instruction, which also means that script files are only allowed to be obtained from the original server.

reference resources: https://developer.mozilla.org/zh-CN/docs/web/http/csp