Content-security-policy (CSP) is an HTTP response header that describes allowing a page to control which resources a user agent can load for a specified page, preventing XSS attacks

Usage:

Content-security-policy: The value of directive 1 is 1. The value of directive 1 is 2. Instruction 2 the value of instruction 2 is 1 the value of instruction 2 is 2Copy the code

Debugging tool: Chrome plugin — modheader. Test the CSP by setting the response header arbitrarily

MDN document

Go through common instructions briefly

Get resource-related instructions

font-src frame-src img-src script-src media-src style-src ... Etc., other reference MDNCopy the code

Font, iframe, img, script… These resources, such as a response header for an HTML page, are:

Content-Security-Policy: img-src a.b.c; script-src 'unsafe-inline' a.b.c; style-src 'self'
Copy the code

The common configurations of these XX-SRC are:

The host configuration

Matching can be exact or wildcard matching:

https://*.qq.com
https://a.b.com
*.qq.com
www.qq.com
Copy the code

Finally, there is a generic configuration called default-src that defaults to whatever value you give it. Other directives, if set, override the value of default-src

Schema configuration

Data: => dataURI, such as base64 blob: => BLOb Resource HTTP: => HTTPS: => As the name implies... Generally these are more, other reference MDNCopy the code

Notice, you have to write a colon. To prevent misunderstanding, it is described above with =>. Eg:

Content-Security-Policy: img-src http: data:; style-src 'self'
Copy the code

self

Only the same domain resources can be loaded, other resources such as data:, blob: cannot be loaded

unsafe-inline

Inline, typically for style and script tags. Without this, you can’t use inline tags

Reporting instructions

If the address for reporting commands is set, the page will report invalid resources to this address. Such as

Content-Security-Policy: img-src www.qq.com; report-uri https://a.b.c/report
Copy the code

When a page with this header loads an image other than www.qq.com, it will block loading and report an error on the console to https://a.b.c/report

That’s all the data that’s reported, and the browser has assembled it for you. Of course, the random path is 404, this can be a server to receive this report

At present, the report is generally reported using the report-URI, followed by the report address. Report-to is another reporting command with richer functions and a slightly more troublesome way to use it

Content-Security-Policy: report-uri https://a.b.c/report
Content-Security-Policy: report-uri /current_page_report
Copy the code

Other instructions are relatively simple, but the use of scenarios may not be many, interested in MDN have a look

How does CSP land in its own front end project

The first stage

Use the content-security-policy-report-only header instead of using content-security-policy directly. Content-security-policy-report-only As the name implies, it is reported Only and does not block resource loading. Therefore, the first step of page transformation is to observe a period of time by just reporting the head, to see which resources and which cases are not in line with CSP, and to add the missed ones and eliminate the unreasonable ones

Initialize the resource directive, giving default-src a ‘self’ so that all resources go locally by default. Second, change the header in another way (I used a browser plug-in, which is relatively simple and violent. In fact, you can also open a server as a proxy, local nginx plus the first class, etc.), observe the console error, and then make up the missed resources, such as CDN site, Base64 data:, third-party SDK, picture COS storage address, etc., are the most common cases

Fill resources, so that the page no longer error; Some are not very elegant or risky cases, you should also consider another way to introduce or remove

In addition, if there are iframe, worker, websocket, etc., also need to configure CSP

The second stage

After observing for a period of time, if there is a CSP error in your reporting site, then resolve it, and then continue to observe for a period of time and repeat the same steps until there is no CSP error. When the reporting site has no CSP errors or fewer errors are acceptable, change content-security-policy-report-only to Content-security-policy and go online again

Online is not possible to also need plug-ins, agents ah, how to modify this head

Nginx has a response header for HTML

location  ~* .(html)$ {
	add_header Content-Security-Policy "img-src http: data:; style-src 'self'";
}
Copy the code

If it is an SSR project or a project without separating the front and back ends, the server can directly setheader

What if it is a new requirement that may involve the introduction of new resources

Determine the known source and add the header configuration. If you are not sure, it is best to set up a transfer service by yourself, or rethink the rationality of the requirements/technical solutions; The default- SRC setting needs to be removed and img-src needs to be compromised

What if a new page goes live and the old page is no longer report-only

Nginx is configured to use different headers for different pages

location  /a {
	add_header Content-Security-Policy "img-src http: data:; style-src 'self'";
}

location  /b {
	add_header Content-Security-Policy-Report-Only "default-src 'self'; report-uri https://a.b.c/report";
}
Copy the code

Server, determine the page path, using a different setheader mode

The last

Page security and a point, at least can prevent a lot of low-end attacks. Turn head to turn over those classic attack gimmick and case on the net again, can prevent drop a lot of. But there are ways to hack it… What did we say we use for debugging? If you have an idea, leave your own idea or plan in the comment section and share it with us