White list

Browsers cannot distinguish between the source of JS, some of which comes from the application itself, and some of which may come from malicious injection. Since browsers cannot distinguish the source of JS, this can be exploited by XSS attacks.

What is XSS?

For example, on a blog site, a post containing a

CSP (Content ws-security – Policy)

The HTTP Header of the content-security-policy can instruct the browser to trust only the specified whitelist JS sources. Even if a malicious script file is injected through an XSS attack, the browser will not execute it.

CSP Nginx sample

server {
        listen 8090;
        server_name localhost;
        root /Users/zhangyue/Desktop/csp;
        index index.html;
        add_header Content-Security-Policy "script-src 'self';";
        location ~* \.(?:js|css)$ {
                expires 7d;
                add_header Cache-Control no-store;
        }
}
Copy the code
Before adding CSP

The CDN of jqeury can be loaded normally

After adding the CSP

After adding CSP, the browser will only throw an error and will not execute any JS code that is not whitelisted

Other resources

In addition to javascript, CSP can also restrict other resources on the site

  • Style-src Specifies the resource address of the CSS
  • Img-src restricts the resource address of an image
  • Word-wrap: break-word! Important; word-wrap: break-word! Important; word-wrap: break-word! Important
  • … , etc.
Server {add_header content-security-policy "script-src 'self';" ; # http://photocdn.sohu.com only; Add_header content-security-policy "img-src 'self' http://photocdn.sohu.com;" ; }Copy the code

But it’s worth noting that if you don’t use nginx for specific (CSS, JS, image…) To limit resources, then means not to limit the source of resources. By default, resources from any source can be loaded.

Using default-src, you can provide a default whitelist for resources that are not whitelisted.

server { listen 8090; server_name localhost; index index.html; Add_header content-security-policy "script-src 'self'; add_header content-security-policy "script-src 'self'; img-src 'self' http://photocdn.sohu.com; default-src 'self'"; }Copy the code

http-equiv

In addition to configuring Nginx, add CSP to the page. CSP can also be added to the add page via the http-equiv attribute of the Meta tag. Http-equiv can be supplied for the value of the Content attribute, providing the HTTP header.



      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <! -- Add CSP -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self'; img-src 'self' http://photocdn.sohu.com; default-src 'self'">
    <title>Document</title>
</head>
<body>
</body>
</html>
Copy the code

An inline script

Set CSP, default is static inline JS code execution. If you must execute inline JS code, you can set script-src to ‘unsafe-inline’ to allow inline JS execution.

server { listen 8090; server_name localhost; index index.html; Add_header content-security-policy "script-src 'self' 'unsafe-inline';" ; }Copy the code

nonce

If you are worried about inlining javascript injection, but need to inline JAVASCRIPT execution. You can use the nonce attribute. The CSP Header returns a random string that, when matched with the nonce attribute of the script tag, indicates that the inline js is safe to execute.

But this random string, it should be unique, it shouldn’t be written dead. The following example is just for illustration. If it is a fixed nonce value, then the nonce is meaningless because the attacker can add the same nonce value to the script tag he injected.

server { listen 8090; server_name localhost; index index.html; # a random string add_header Content ws-security - Policy "script - SRC 'nonce - EDNnf03nceIOfn39fn3e9h3sdfa' 'self';" ; }Copy the code

reference

  • HTML http-equiv Attribute
  • Content Security Policy
  • nginx Content-Security-Policy Headers
  • What’s the purpose of the HTML “nonce” attribute for script and style elements?