目录
- 不允许在script中直接写js代码
- 更多的加载url相关的参数
- 表单相关
- 出错报告
0. 概述
- CSP是一个网站安全相关的参数,主要对加载url与访问url进行控制。
- 使用的响应头参数是
Content-Security-Policy
1. 不允许在script中直接写js代码
-
在html分别创建两种script
<script>
console.log('I am in script')
</script>
<script src="test.js"></script>
-
设置响应头参数
设置的值的意思是仅允许使用src
加载js代码,仅允许使用http
(需要注意的是参数值为http:
)
/**
* 1. 不允许在script标签中写代码
*/
const http = require('http')
const fs =require('fs')
const port = 9000
http.createServer(function (request, response) {
const url = request.url
const html = fs.readFileSync('index.html', 'utf-8')
switch(url) {
case '/': {
response.writeHead(200, {
'Content-Type': 'text/html',
// 不允许在script中写代码
'Content-Security-Policy': 'default-src http:'
})
response.end(html)
}
case '/test.js': {
response.writeHead(200, {
'Content-Type': 'text/javascript',
})
response.end('console.log("It is test.js")')
}
}
}).listen(port)
console.log("serve is listen ", port)
-
测试
可以看到只显示了使用src加载的输出,写代码的方式报错。
2. 更多的加载url相关的参数
-
'Content-Security-Policy': 'http://xxxxxx'
只允许加载指定网站的资源 -
'Content-Security-Policy': '\'self\''
只允许加载自己网站的资源 - CSP-参考网站
3. 表单相关
-
设计一个表单,提交到百度首页
<form action="https://www.baidu.com/">
<button type="submit">去百度首页</button>
</form>
-
限制表单的提交的url
- 使用前缀
form-action
- 如果同时需要上面的内容,则使用
;
隔开 -
\self\
限制了只能往自身的网站提交
/**
* 1. CSP中表单相关
*/
const http = require('http')
const fs =require('fs')
const port = 9000
http.createServer(function (request, response) {
const url = request.url
const html = fs.readFileSync('form.html', 'utf-8')
switch(url) {
case '/': {
response.writeHead(200, {
'Content-Type': 'text/html',
// 不允许往外站提交表单
'Content-Security-Policy': 'form-action \'self\''
})
response.end(html)
}
}
}).listen(port)
console.log("serve is listen ", port)
-
测试
点击按钮,查看终端内容
-
更改参数值
'Content-Security-Policy': 'form-action https://www.baidu.com/'
更改后在测试,则成功跳转到百度首页。
4. 出错报告
-
增加
report-uri
参数,设置出错后访问的uri
'Content-Security-Policy': 'form-action \'self\'; report-uri /report'
-
测试
可以看到浏览器向我们指定的uri传递了一个csp-report
对象,服务端可从对象中提取数据,进行一定的处理
网友评论