Content-security-policy (CSP) for the front-end security Configuration

What is CSP

The CSP full name content security policy, can be translated directly into the contents of secure policies, plainly speaking, is for the page content security and set up a series of protection strategies. Specify a trusted source of content through the constraints of the CSP (the content can refer to scripts, pictures, iframe, Fton, style, and so on possible remote resources). With the CSP contract, the web is in a secure, running environment.

What's the use?

We know the front end has a very famous "homologous strategy", in short, that is, a page of resources can only be obtained from the same source server, but not cross-domain acquisition. This prevents the page from being injected with malicious code and affects security. But this strategy is a double-edged sword that blocks malicious code while limiting the flexibility of the front end. Is there a way to get resources across domains and prevent malicious code?

The answer is, of course, this is CSP, and with CSP we can develop a series of strategies that allow only our pages to launch cross-domain requests to the domain we allow, and malicious attacks that do not conform to our policies are blocked out of the door. To achieve

One point to note is that the current mainstream browser already supports CSPs. So we can be assured of the use of bold.

Instruction description

Directives are the basic units used in CSP to define policies, and we can use single or multiple directives to combine functions to protect our website.

The following are common instruction descriptions:

Instruction Name	Demo	Description
Default-src	' Self ' cdn.example.com	Default policy, can be applied to JS file/Picture/css/ajax request and so on all access
Script-src	' Self ' js.example.com	Define a filtering strategy for JS files
Style-src	' Self ' css.example.com	Defining a filtering strategy for CSS files
Img-src	' Self ' img.example.com	Define filtering policies for picture files
Connect-src	' Self '	Define a filtering policy for request connection files
Font-src	Font.example.com	Define filtering policies for font files
Object-src	' Self '	Define filtering Strategies for page plug-ins, such as <object>, <embed> or <applet> elements
Media-src	Media.example.com	Define filtering strategies for the media, such as HTML6 's <audio>, <video> elements
Frame-src	' Self '	Define policies for loading sub-frmae
Sandbox	Allow-forms allow-scripts	Sandbox mode, which blocks page popup/js execution, etc., you can add 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 policy to release the appropriate action
Report-uri	/some-report-uri

Instruction value

All directives that end with-SRC can use values to define filtering rules, which can be separated by spaces between multiple rules.

Value	Demo	Description
*	IMG-SRC *	URLs that allow arbitrary addresses, but do not include blob:filesystem:schemes.
' None '	Object-src ' None '	All address inquiries are not allowed to load
' Self '	Script-src ' self '	Same-origin policy, that is, allow the same domain name under the same port, the request under the same protocol
Data	Img-src ' self ' data:	Allow data to ask for advice (such as images encoded with Base64).
Domain.example.com	IMG-SRC domain.example.com	Allow domain name request resources for attributes
*.example.com	IMG-SRC *.example.com	Allow loading of resources from any sub-domain under example.com
Https://cdn.com	IMG-SRC https://cdn.com	Only allow loading of resources from specified domain name via HTTPS protocol
Https	IMG-SRC https:	Only allow resources to be loaded over the HTTPS protocol
' Unsafe-inline '	Script-src ' Unsafe-inline '	Allow in-line code execution
' Unsafe-eval '	Script-src ' Unsafe-eval '	Allow unsafe dynamic code execution, such as the Eval () method of JavaScript

Example

Default-src ' self ';

Only allow resources under homology

Script-src ' self ';

Only allow JS under the same origin

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

Allows JS loading under the same origin and two addresses

Default-src ' None '; Script-src ' self '; Connect-src ' self '; Img-src ' self '; Style-src ' self ';

Multiple resources, the following will overwrite the previous

Server-side configuration

• Apache Services

Add the following code to the VirtualHost httpd.conf file or the. htaccess file

Header set Content-security-policy "default-src ' self ';"

• Nginx

Add the following code to the server {} object block

Add_header content-security-policy "default-src ' self ';";

• Iis

Web. config: add

<system.webServer>

<customHeaders>

<add name= "Content-security-policy" value= "default-src ' self ';"/>

</customHeaders>

</system.webServer>

Reference Links:

https://www.zhihu.com/question/21979782

https://content-security-policy.com/

Content-security-policy (CSP) for the front-end security Configuration