前端安全配置之Content-Security-Policy(csp)
From: https://www.cnblogs.com/heyuqing/p/6215761.html
什么是CSP
CSP全称Content Security Policy ,可以直接翻译为内容安全策略,说白了,就是为了页面内容安全而制定的一系列防护策略. 通过CSP所约束的的规责指定可信的内容来源(这里的内容可以指脚本、图片、iframe、fton、style等等可能的远程的资源)。通过CSP协定,让WEB处于一个安全的运行环境中。
有什么用?
我们知道前端有个很著名的”同源策略”,简而言之,就是说一个页面的资源只能从与之同源的服务器获取,而不允许跨域获取.这样可以避免页面被注入恶意代码,影响安全.但是这个策略是个双刃剑,挡住恶意代码的同时也限制了前端的灵活性,那有没有一种方法既可以让我们可以跨域获取资源,又能防止恶意代码呢?
答案是当然有了,这就是csp,通过csp我们可以制定一系列的策略,从而只允许我们页面向我们允许的域名发起跨域请求,而不符合我们策略的恶意攻击则被挡在门外.从而实现
需要说明的一点是,目前主流的浏览器都已支持csp.所以我们可以放心大胆的用了.
指令说明
指令就是csp中用来定义策略的基本单位,我们可以使用单个或者多个指令来组合作用,功能防护我们的网站.
以下是常用的指令说明:
指令名 |
demo |
说明 |
default-src |
'self' cdn.example.com |
默认策略,可以应用于js文件/图片/css/ajax请求等所有访问 |
script-src |
'self' js.example.com |
定义js文件的过滤策略 |
style-src |
'self' css.example.com |
定义css文件的过滤策略 |
img-src |
'self' img.example.com |
定义图片文件的过滤策略 |
connect-src |
'self' |
定义请求连接文件的过滤策略 |
font-src |
font.example.com |
定义字体文件的过滤策略 |
object-src |
'self' |
定义页面插件的过滤策略,如 <object>, <embed> 或者<applet>等元素 |
media-src |
media.example.com |
定义媒体的过滤策略,如 HTML6的 <audio>, <video>等元素 |
frame-src |
'self' |
定义加载子frmae的策略 |
sandbox |
allow-forms allow-scripts |
沙盒模式,会阻止页面弹窗/js执行等,你可以通过添加allow-forms allow-same-origin allow-scripts allow-popups, allow-modals, allow-orientation-lock, allow-pointer-lock, allow-presentation, allow-popups-to-escape-sandbox, and allow-top-navigation 策略来放开相应的操作 |
report-uri |
/some-report-uri |
|
指令值
所有以-src结尾的指令都可以用一下的值来定义过滤规则,多个规则之间可以用空格来隔开
值 |
demo |
说明 |
* |
img-src * |
允许任意地址的url,但是不包括 blob: filesystem: schemes. |
'none' |
object-src 'none' |
所有地址的咨询都不允许加载 |
'self' |
script-src 'self' |
同源策略,即允许同域名同端口下,同协议下的请求 |
data: |
img-src 'self' data: |
允许通过data来请求咨询 (比如用Base64 编码过的图片). |
domain.example.com |
img-src domain.example.com |
允许特性的域名请求资源 |
*.example.com |
img-src *.example.com |
允许从 example.com下的任意子域名加载资源 |
https://cdn.com |
img-src https://cdn.com |
仅仅允许通过https协议来从指定域名下加载资源 |
https: |
img-src https: |
只允许通过https协议加载资源 |
'unsafe-inline' |
script-src 'unsafe-inline' |
允许行内代码执行 |
'unsafe-eval' |
script-src 'unsafe-eval' |
允许不安全的动态代码执行,比如 JavaScript的 eval()方法 |
示例
default-src 'self';
只允许同源下的资源
script-src 'self';
只允许同源下的js
script-src 'self' www.google-analytics.com ajax.googleapis.com;
允许同源以及两个地址下的js加载
default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';
多个资源时,后面的会覆盖前面的
服务器端配置
- Apache服务
在VirtualHost的httpd.conf文件或者.htaccess文件中加入以下代码
Header set Content-Security-Policy "default-src 'self';"
- Nginx
在 server {}对象块中添加如下代码
add_header Content-Security-Policy "default-src 'self';";
- IIS
web.config:中添加
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Content-Security-Policy" value="default-src 'self';" />
</customHeaders>
</httpProtocol>
</system.webServer>
参考链接:
https://www.zhihu.com/question/21979782
https://content-security-policy.com/
前端安全配置之Content-Security-Policy(csp)相关推荐
- http内容安全策略Content Security Policy(CSP)
内容安全策略CSP是安全性的附加层,有助于检测和缓解某些类型的攻击,包括跨站点脚本(Cross Site Scripting (XSS) Software Attack | OWASP Foundat ...
- DVWA 黑客攻防实战(十五) 绕过内容安全策略 Content Security Policy (CSP) Bypass
看到标题,是否有点疑惑 CPS 是什么东东.简单介绍一下就是浏览器的安全策略,如果 标签,或者是服务器中返回 HTTP 头中有 Content-Security-Policy 标签 ,浏览器会根据标签 ...
- 正当防卫CSP(content security policy)
同源策略致使不同域名下的资源不可互相访问,起到安全保护的作用,但这一策略有时会防卫过当,将安全可信的脚本也误认为不安全因素后报错: because it violates the following ...
- Content Security Policy的学习理解
以下内容转载自 http://www.cnblogs.com/alisecurity/p/5924023.html 跨域脚本攻击 XSS 是最常见.危害最大的网页安全漏洞. 为了防止它们,要采取很多编 ...
- Content Security Policy 入门教程
From: http://www.ruanyifeng.com/blog/2016/09/csp.html 跨域脚本攻击 XSS 是最常见.危害最大的网页安全漏洞. 为了防止它们,要采取很多编程措施, ...
- 内容安全策略(Content Security Policy)
内容安全策略(Content Security Policy) 内容安全策略(Content Security Policy)是一种声明的安全机制,可以让网站运营者能够控制遵循CSP的用户代理(通常是 ...
- because it violates the following Content Security Policy directive: “default-src ‘none‘“
在打开页面时浏览器报如下错误: Refused to load the script 'http://xx.xx.xx.xx:xxxxx/livereload.js?snipver=1' becaus ...
- Refused to execute inline script because it violates the following Content Security Policy directive
版权声明 本文原创作者:谷哥的小弟 作者博客地址:http://blog.csdn.net/lfdfhl 问题描述 在利用表单向后台提交数据时,前端页面报错: Refused to execute i ...
- Vue打包后出现的bug -favicon.ico' because it violates the following Content Security Policy direc
打开vue的项目,但是页面显示的是Cannot GET,打开控制台之后,发现有一篇红色报错. //Refused to load the image 'http://localhost:8080/fa ...
- violates Content Security Policy报错1
index.html:1 Refused to load the script 'https://webapi.amap.com/maps?v=1.4.13&key=b7063c0343460 ...
最新文章
- HTC与酷派 不是冤家不聚头
- c语言中逗号自加,计算机二级自加、自减运算符和逗号运算符
- Extension project: 404 Not Found for resources/cus/crm/notes/ext/Component-dbg.js
- 英国国家网络安全中心:速修复严重的 MobileIron RCE 漏洞 (CVE-2020-15505)
- 几个常见的 Socket 连接错误及原因
- 关于android隐式启动activity的分析和说明,Android学习之Intent中显示意图和隐式意图的用法实例分析...
- BZOJ5262(容斥)
- GitHub上IOS开源项目
- 苹果电脑可以装windows系统吗_给苹果电脑安装Windows系统
- 微信小程序emoji表情输入框制作
- 《AutoCAD .NET开发指南2012版》翻译整理已完成,欢迎大家下载!
- linux卸载teamviewer,ubuntu 16.04 desktop + server LTS - TeamViewer 软件彻底卸载
- CTS/ITS/GSI
- 小米3c路由器拆机_路由器也智能,小米路由器3C使用心得 - IT168试客
- matlab 区域生长算法生成二值图像边界区域
- Vue项目报错npm ERR code 1
- 微信公众号广告后台接口开发
- spring cloud gateway 与spring cloud版本对应问题
- 3dmax:基于CAD图纸进行3dmax室内建模基础步骤攻略
- C语言课程设计:医院管理系统