This is the 21st day of my participation in the August Text Challenge.More challenges in August

preface

Yesterday we talked about how to restrict websites from being nested by iframes. One of the ways to do this is to set CSP (Content Security Policy), which is not only to restrict websites from being nested by iframes.

CSP (Content Security Policy)

Content Security Policy (CSP), the full name of which is Content-security-policy, mainly refers to the resources allowed to be loaded on web pages. Resources that do not conform to these policies cannot be loaded, which can prevent XSS attacks to a certain extent.

grammar

Content-security-policy: directive directive value, directive value; Instruction instruction value, instruction value…

The corresponding instructions are as follows:

instruction describe
default-src Sets the default policy for all loaded resources. If no other directive is set, the default policy will be used
script-src Sets the policy for script tags to load resources
style-src Set the policy for the style tag loading style
font-src Sets the font tag’s policy for loading fonts
img-src Sets the image loading policy for the IMG tag
media-src Set the policy for loading video or audio files
frame-ancestors Sets whether this page can be nested by ifame
frame-src Policy to set whether this page can load ifame tags (old)
child-src Policy to set whether this page can load ifame tags (new)
object-src Set the loading policy for flash plug-ins
connect-src Example Set the HTTP request policy
base-uri Sets the policy for the BASE element URL
form-action Set the form submission URL policy
report-uri Set the uri reporting policy

The corresponding instruction values have the following values:

Instruction value describe
'none' No resource is allowed to load (note that it is quoted, the same below)
'self' Loading Same-origin Resources
'unsafe-inline' Load inline styles (style, script, etc.)
'unsafe-eval' Load the code for the eval function
http: Load HTTP resources
https: Load the HTTPS resource
data: Load resources for the Data protocol (such as base64 addresses that start with data)
The domain name Load resources under this domain such as aaa.com
The path Load resources in this path, such as aaa.com/js
* Wildcard character, representing all
hashvalue Hash values are generated using the hash algorithm based on the contents of labels (excluding labels).
nonceValue (nonce – XXX) XXX is your own definition, and then you use the tag with the attribute and value

‘unsafe-inline’ is normally used in combination with style-src and script-src. If the ‘unsafe-inline’ value is used, a hash or nonce value is required

An example of a hash value is as follows :(this hash value is generated using the hash algorithm based on the content of the tag you are using, I used script-src, I generated the content of the script)

"Content-Security-Policy": "script-src 'self' test.com 'sha256-SSgNhkZfi99ERRqGlhN+DPzGVQweujriyBN2iwMtE+k='"

Examples of nonce values are as follows:

"Content-Security-Policy": "script-src 'self' test.com 'nonce-test'"

Used in script tags

<script nonce="test">
  alert('hello world! ')
</script>
Copy the code

Set mode

There are two ways to set a CSP: HTTP header Settings and META tag Settings.

http headerSet up the

Create a new page, index.html

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>
  <div>Hello, THIS is CP3!</div>
</body>

</html>
Copy the code

The new index. Js

const http = require('http')
const fs = require('fs')
http.createServer((req, res) = > {
  fs.readFile('./index.html'.(err, data) = > {
    res.writeHead(200, {
      'Content-Type': 'text/html; charset=UTF-8'."Content-Security-Policy": "script-src 'self' test.com"
    })
    res.write(data)
    res.end()
  })
}).listen(8081)

console.log('Service is started, please open http://127.0.0.1:8081')
Copy the code

The node to perform index. Js

Because I loaded a CDN jquery file, and then I set “script-src ‘self’ test.com” to only allow loading of same-origin resources and test.com domain resources

So the console reported an error, as follows

Meta tagsSet up the

The above effect can also be achieved by setting the meta:

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <! -- CSP meta tag -->
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' test.com">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>
  <div>Hello, THIS is CP3!</div>
</body>

</html>
Copy the code

Run locally and the result is as follows:

conclusion

The above is my summary of CSP (content security policy), it supports more attributes, we can copy the code to try.

Thank you for reading.