Content Security Policy (CSP) 介绍

最新推荐文章于 2024-05-28 16:23:36 发布
最新推荐文章于 2024-05-28 16:23:36 发布
阅读量403 收藏 1
点赞数
文章标签： 网络安全 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyun134340/article/details/128595226
版权
本文介绍了Content Security Policy (CSP)，一种用于增强网页安全性，防止跨站脚本攻击（XSS）的技术。CSP通过设置响应头或HTML标签指定资源加载规则，限制浏览器加载非授权来源的资源。文中详细讲解了CSP的原理、指令的使用，包括预设值和URI，以及推荐的实践方法。同时，讨论了CSP的报告模式，用于在正式启用前测试站点的兼容性和问题。最后，强调了逐步启用CSP并关注浏览器兼容性的必要性。
摘要由CSDN通过智能技术生成
内容安全策略 (CSP) 是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等。无论是数据盗取、网站内容污染还是散发恶意软件，这些攻击都是主要的手段。

起因

当我不经意间在 Twitter 页面 view source 后，发现了惊喜。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><title>Twitter</title><style> body {background-color: #ffffff;font-family: sans-serif;}a {color: #1da1f2;}svg {color: #1da1f2;display: block;fill: currentcolor;height: 21px;margin: 13px auto;width: 24px;} </style>
</head>
<body><noscript><center>If you’re not redirected soon, please <a href="/">use this link</a>.</center></noscript><script nonce="SG0bV9rOanQfzG0ccU8WQw=="> document.cookie = "app_shell_visited=1;path=/;max-age=5";location.replace(location.href.split("#")[0]); </script>
</body>
</html>

相比平时看到的其他站点的源码，可以说是很清爽了。没有乱七八糟的标签，功能却一样不少。特别有迷惑性，以为这便是页面所有的源码，但查看 DevTools 的 Source 面板后很容易知道这并不是真实的 HTML 代码。但为何页面源码给出的是如此清爽的版本，这里先不研究。

把目光移向 script 标签时，发现一个不认识的 nonce 属性。它以及它后面的神秘字符串成功引起了我的好奇。再去看 Google 首页的源码，也有好些 nonce 的运用。是时候去了解一下这里的 nonce 是什么了。

! <script nonce="SG0bV9rOanQfzG0ccU8WQw==">document.cookie = "app_shell_visited=1;path=/;max-age=5";location.replace(location.href.split("#")[0]);
</script>

Content Security Policy (CSP)

要了解 nonce， 先了解 Content-Security-Policy(CSP)。

我们都知道浏览器有同源策略（same-origin policy）的安全限制，即每个站点只允许加载来自和自身同域（origin）的数据，https://a.com 是无法从 https://b.com 加载到资源的。每个站点被严格限制在了自已的孤岛上，自己就是一个沙盒，这样很安全，整个网络不会杂乱无章。主要地，它能解决大部分安全问题。假若没有同源策略，恶意代码能够轻松在浏览器端执行然后获取各种隐私信息：银行帐号，社交数据等。

那网站间如何进行数据共享，当然是有办法的，了解下 CORS。

现实中，问题是同源策略也并不是万无一失，跨域攻击 Cross-site scripting (XSS) 便包含五花八门绕开限制的手段，形式上通过向页面注入恶意代码完成信息的窃取或攻击。比如 UGC 类型的站点，因为内容依赖用户创建，这就开了很大一个口子，允许用户输入的内容运行在页面上。当然，因为我们都知道会有注入攻击，所以对用户输入的内容进行防 XSS 过滤也成了标配。

Content-Security-Policy 从另一方面给浏览器加了层防护，能极大地减少这种攻击的发生。

原理

CSP 通过告诉浏览器一系列规则，严格规定页面中哪些资源允许有哪些来源， 不在指定范围内的统统拒绝。相比同源策略，CSP 可以说是很严格了。

其实施有两种途径：

  • 服务器添加 Content-Security-Policy 响应头来指定规则

  • HTML 中添加 标签来指定 Content-Security-Policy 规则

mobile.twitter.com header 中的 CSP 规则

为了测试方便，以下示例均使用 <meta> 标签来开启 CSP 规则。但 <meta> 中有些指令是不能使用的，后面会了解到。只有响应头中才能使用全部的限制指令。

一个简单示例

创建一个 HTML 文件放入以下内容：

csp_test.html

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Security-Policy" content="script-src 'self' https://unpkg.com"><title>CSP Test</title>
</head>
<body><script src="https://unpkg.com/react@16/umd/react.development.js"></script>
</body>
</html>

在该测试文件所在目录开启一个本地 server 以访问，这里使用 Python 自带的 server:

最低0.47元/天 解锁文章
hyun134340
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Content Security Policy
qq_38344321的博客
09-03 5011
Content Security Policy（内容安全策略，简称csp）用于检测并阻止网页加载非法资源的安全策略，可以减轻xss攻击带来的危害和数据注入等攻击。本文讲述的内容主要有如何使用csp和业务接入csp流程这两部分。 简介 csp主要工作是定义一套页面资源加载白名单规则，浏览器使用csp规则去匹配所有资源，禁止加载不符合规则的资源，同时将非法资源请求进行上报。 csp作用：减轻网页被xss攻击后所受到的危害。实际上csp是在xss攻击发生后才起作用，阻止请求注入的非法资源，csp并不是直接阻止xs
Content-Security-Policy
GalaxySpaceX的博客
09-12 544
Content-Security-Policy
【网络安全】Content Security Policy (CSP) 介绍
qq_43842093的博客
06-03 2035
内容安全策略 (CSP) 是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等。无论是数据盗取、网站内容污染还是散发恶意软件，这些攻击都是主要的手段。
Content-Security-Policy —— HTML HTTP的内容安全策略
2401_84023314的博客
04-04 1000
可以防止[[跨站点脚本攻击]]语法指令说明。
保护网页免受点击劫持的Content Security Policy（CSP）
weixin_42560424的博客
06-27 566
84. 保护网页免受点击劫持的Content Security Policy（CSP） 什么是点击劫持？ 点击劫持（Clickjacking）是一种网络安全攻击技术，通过在一个网页上放置透明的或误导性的内容，诱使用户在不知情的情况下点击恶意操作。这种攻击技术可以欺骗用户并执行他们不想执行的操作，如点击隐藏的按钮或链接，可能导致敏感信息泄露、支付信息被篡改等风险。 Content Security Policy（CSP）的作用 Content Security Policy（CSP）是一种用于增强网页安全性的
WEB安全：Content Security Policy (CSP) 详解
最新发布
_midnight的博客
05-28 1551
跨站脚本攻击 (XSS) 是一种常见的安全漏洞，攻击者通过注入恶意脚本来劫持用户会话、破坏网站内容或进行钓鱼攻击。存储型 XSS：恶意脚本被永久存储在目标服务器上（如数据库），并在用户访问时执行。反射型 XSS：恶意脚本通过 URL 参数或表单提交传递，并在服务器响应中反射给用户。DOM 型 XSS：恶意脚本通过修改客户端的 DOM 结构直接在浏览器中执行。
Content Security Policy (CSP) Bypass
kid的博客
05-14 734
Content Security Policy (CSP) Bypass 前言 Content Security Policy（网页安全政策），缩写 CSP 首先我们要理解什么是CSP，下面的博文讲的还是很清楚 Content Security Policy 入门教程 Content Security Policy (CSP) is a computer security standard in...
koa-csp：用于设置响应头：Content-Security-Policy
02-03
这是Koa2中间件，用于设置响应标头Content-Security-Policy 安装 npm install koa-csp yarn add koa-csp 用法 import Koa from 'koa' ; import csp from 'koa-csp' ; const app = new Koa ( ) ; app . use ( csp ( ...
DVWA关卡12：Content Security Policy (CSP) Bypass（存储型XSS）
m0_54899775的博客
12-12 1240
DVWA关卡12：Content Security Policy (CSP) Bypass（存储型XSS）
什么是 Content Security Policy
weixin_42156055的博客
10-12 372
什么是Content Security Policy ？ csp是一种白名单制度，他告诉浏览器信任哪些域名下的资源，哪些可以执行，哪些不可以执行 可以在一定程度上防御XSS 开启方式 配置HTTP头信息 Content Security Policy 使用html meta标签 <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src.
Content Security Policy (CSP)内容安全策略
飞翔的熊blabla
08-05 1143
CSP简介 Content Security Policy(CSP)，内容（网页）安全策略，为了缓解潜在的跨站脚本问题(XSS攻击)，浏览器的扩展程序系统引入了内容安全策略（CSP）这个概念。 CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。 两种方法启用 CSP 一种是通过 HTTP 响应头信息的Content-Security-Policy字段。 一种是通过网页的标签。 <meta h
Web安全之Content Security Policy(CSP 内容安全策略)详解
路多辛的所思所想
04-12 6512
Content-Security-Policy值由一个或多个指令组成，多个指令用分号分隔。script-src：外部脚本style-src：样式文件img-src：图片文件media-src：媒体文件（音频和视频）font-src：字体文件object-src：插件（比如 Flash）child-src：框架frame-ancestors：嵌入的外部资源（比如、、和）
内容安全策略 Content-Security-Policy
热门推荐
qq_30436011的博客
10-24 3万+
1、限制资源获取：限制网页当中一系列的资源获取的情况，从哪里获取，请求发到哪个地方限制方式：default-src限制全局的和链接有关的作用范围根据资源类型（connect-src、img-src等），限制资源范围2、报告资源获取越权：在网页当中获取了一些我们不应该获取的资源的时候，给服务进行报告，报告资源获取越权，然后做出调整之所以报这个错误，就是我们加了这个头的作用。这个时候 inline脚本还是不能执行的。如果引入外链的脚本文件，则会报错，这样就可限制，只能使用我们本站使用的脚本。
前端安全配置之Content-Security-Policy(csp)
weixin_30326745的博客
12-23 1982
什么是CSP CSP全称Content Security Policy ,可以直接翻译为内容安全策略,说白了,就是为了页面内容安全而制定的一系列防护策略. 通过CSP所约束的的规责指定可信的内容来源（这里的内容可以指脚本、图片、iframe、fton、style等等可能的远程的资源）。通过CSP协定，让WEB处于一个安全的运行环境中。 有什么用? 我们知道前端有个很著名的”同源策略”,...
Content-Security-Policy —— HTML HTTP的内容安全策略(1)
2401_83621426的博客
03-16 740
a>标签的ping属性。
WEB应用内容安全策略(Content Security Policy)
A_991128a的博客
01-15 3259
它通过让开发者对自己WEB应用声明一个外部资源加载的白名单,使得客户端在运行WEB应用时对外部资源的加载做出筛选和识别,只加载被允许的网站资源.对于不被允许的网站资源不予加载和执行.同时,还可以将WEB应用中出现的不被允许的资源链接和详情报告给我们指定的网址.如此,大大增强了WEB应用的安全性.使得攻击者即使发现了漏洞,也没法注入脚本,除非还控制了一台列入了白名单的服务器.使用这种模式,将会直接阻止非法的外部资源加载,同时也可以选择是否配置将非法资源加载的链接和行为报告给我们指定的网址。
Echarts csp Content Security Policy
12-24
Echarts是一个用于数据可视化的JavaScript库。CSP（Content Security Policy）是一种安全策略，用于保护网站免受恶意攻击。通过CSP，可以限制浏览器只能执行特定来源的代码，从而减少跨站脚本（XSS）和数据注入等攻击的风险。 要在Echarts中使用CSP，可以通过设置HTTP Header中的Content-Security-Policy来开启CSP。具体的设置取决于你的服务器环境和框架。以下是一个示例： ```html <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"> ``` 上述示例中，`default-src 'self'`表示只允许加载同源的资源，`script-src 'self' 'unsafe-inline' 'unsafe-eval'`表示允许加载同源的脚本，并且允许使用内联脚本和eval函数。此外，还可以通过添加其他指令来进一步限制其他类型的资源加载。 请注意，具体的CSP设置可能因服务器环境和框架而异，请根据实际情况进行相应的配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值