How does Content Security Policy (CSP) work?

后端未结

关注

 2  2056

鱼传尺愫 2020-11-22 15:33

I\'m getting a bunch of errors in the developer console:

Refused to evaluate a string

Refused to execute inline script because it violates the fol

2条回答

情深已故 (楼主)

2020-11-22 16:08
The Content-Security-Policy meta-tag allows you to reduce the risk of XSS attacks by allowing you to define where resources can be loaded from, preventing browsers from loading data from any other locations. This makes it harder for an attacker to inject malicious code into your site.

I banged my head against a brick wall trying to figure out why I was getting CSP errors one after another, and there didn't seem to be any concise, clear instructions on just how does it work. So here's my attempt at explaining some points of CSP briefly, mostly concentrating on the things I found hard to solve.

For brevity I won’t write the full tag in each sample. Instead I'll only show the content property, so a sample that says content="default-src 'self'" means this:
1. How can I allow multiple sources?

You can simply list your sources after a directive as a space-separated list:
```
content="default-src 'self' https://example.com/js/"
```
Note that there are no quotes around parameters other than the special ones, like 'self'. Also, there's no colon (:) after the directive. Just the directive, then a space-separated list of parameters.

Everything below the specified parameters is implicitly allowed. That means that in the example above these would be valid sources:
```
https://example.com/js/file.js
https://example.com/js/subdir/anotherfile.js
```
These, however, would not be valid:
```
http://example.com/js/file.js
^^^^ wrong protocol

https://example.com/file.js
                   ^^ above the specified path
```
2. How can I use different directives? What do they each do?

The most common directives are:
- default-src the default policy for loading javascript, images, CSS, fonts, AJAX requests, etc
- script-src defines valid sources for javascript files
- style-src defines valid sources for css files
- img-src defines valid sources for images
- connect-src defines valid targets for to XMLHttpRequest (AJAX), WebSockets or EventSource. If a connection attempt is made to a host that's not allowed here, the browser will emulate a 400 error
There are others, but these are the ones you're most likely to need.

3. How can I use multiple directives?

You define all your directives inside one meta-tag by terminating them with a semicolon (;):
```
content="default-src 'self' https://example.com/js/; style-src 'self'"
```
4. How can I handle ports?

Everything but the default ports needs to be allowed explicitly by adding the port number or an asterisk after the allowed domain:
```
content="default-src 'self' https://ajax.googleapis.com http://example.com:123/free/stuff/"
```
The above would result in:
```
https://ajax.googleapis.com:123
                           ^^^^ Not ok, wrong port

https://ajax.googleapis.com - OK

http://example.com/free/stuff/file.js
                 ^^ Not ok, only the port 123 is allowed

http://example.com:123/free/stuff/file.js - OK
```
As I mentioned, you can also use an asterisk to explicitly allow all ports:
```
content="default-src example.com:*"
```
5. How can I handle different protocols?

By default, only standard protocols are allowed. For example to allow WebSockets ws:// you will have to allow it explicitly:
```
content="default-src 'self'; connect-src ws:; style-src 'self'"
                                         ^^^ web Sockets are now allowed on all domains and ports.
```
6. How can I allow the file protocol file://?

If you'll try to define it as such it won’t work. Instead, you'll allow it with the filesystem parameter:
```
content="default-src filesystem"
```
7. How can I use inline scripts and style definitions?

Unless explicitly allowed, you can't use inline style definitions, code inside