前端安全之csp

最新推荐文章于 2025-10-16 09:43:28 发布
原创 最新推荐文章于 2025-10-16 09:43:28 发布 · 6.1k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端安全

本文介绍了前端安全中的Content Security Policy（CSP），一种用于防御XSS和数据注入攻击的安全层。CSP通过HTTP头部或HTML meta标签设置，采用白名单机制限制资源加载，防止内联代码执行，确保同源策略下的安全性。违反CSP策略时，浏览器可以发送错误报告到指定地址。

最近前端项目被白帽子使用appscan扫到安全漏洞,老大勒令我们抓紧修复,我们先来看两个级别比较低的漏洞

看到这儿对于我个渣渣前端来说是懵逼的,难道我设置一下http header 就ok了

  • 简单来介绍下什么叫做csp

内容安全策略   (CSP) 是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等。无论是数据盗取、网站内容污染还是散发恶意软件，这些攻击都是主要的手段。

CSP 被设计成完全向后兼容（除CSP2 在向后兼容有明确提及的不一致;  更多细节查看这里 章节1.1）。不支持CSP的浏览器也能与实现了CSP的服务器正常合作，反之亦然：不支持 CSP 的浏览器只会忽略它，如常运行，默认为网页内容使用标准的同源策略。如果网站不提供 CSP 头部，浏览器也使用标准的同源策略。

为使CSP可用, 你需要配置你的网络服务器返回  Content-Security-Policy  HTTP头部 ( 有时你会看到一些关于X-Content-Security-Policy头部的提法, 那是旧版本，你无须再如此指定它)。---引用MDN

浏览有同源策略的安全机制,会完全信任同源策略下的js文件 但是这个js文件有可能是黑客通过某种手段提交到服务器的.用户浏览器在不知不觉的情况下就将自己的隐私发送到了黑客的服务器上

  • 如何使用csp策略

    csp有两种方式指定: HTTP Header 和 HTML

       通过 HTTP Header来定义

   "Content-Security-Policy:" 策略集

       通过 html meta标签使用:

  <meta http-equiv="content-security-policy" content="策略集">

  如果http header头设置了csp 浏览器会优先使用http header设置的csp策略

  • csp语法

每一条策略都是都是由指令和指令值组成

 例如: Content-Security-Policy:default-src 'self';

 策略与策略之间用分号隔开

例如: Content-Security-Policy:default-src 'self';script-src 'www.a.com'

csp 指令

default-src定义针对所有类型（js/image/css/font/ajax/iframe/多媒体等）资源的默认加载策略，如果某类型资源没有单独定义策略，就使用默认的
script-src 定义针对 JavaScript 的加载策略
style-src定义针对样式的加载策略。
img-src 定义针对图片的加载策略
font-src 定义针对字体的加载策略。
media-src定义针对多媒体的加载策略，例如:音频标签<audio>和视频标签<video>。
object-src定义针对插件的加载策略，例如：<object>、<embed>、<applet>
child-src定义针对框架的加载策略，例如： <frame>,<iframe>。
connect-src定义针对 Ajax/WebSocket 等请求的加载策略。不允许的情况下，浏览器会模拟一个状态为400的响应。
sandbox 定义针对 sandbox 的限制，相当于 <iframe>的sandbox属性。
report-uri告诉浏览器如果请求的资源不被策略允许时，往哪个地址提交日志信息。
form-action定义针对提交的 form 到特定来源的加载策略。
referrer 定义针对 referrer 的加载策略。
reflected-xss 定义针对 XSS 过滤器使用策略

 

 

 

 

 

 

 

 

 

 

 

 

 

 

csp 指令值

*允许加载任何内容
'none'不允许加载任何内容
'self'允许加载相同源的内容
www.a.com

允许加载指定域名的资源

*.a.com允许加载a.com任何子域名的资源
https://a.com允许加载a.com的https资源
https:允许加载https资源
data:允许加载data: 协议,例如: base64编码的图片
‘unsafe-inline‘允许加载 inline 资源，例如style属性、onclick、inline js、inline css等
‘unsafe-eval‘允许加载动态 js 代码，例如 eval()

 

 

 

 

 

 

 

 

 

 

  • csp 默认特性

CSP除了使用白名单机制外，默认配置下阻止内联代码执行是防止内容注入的最大安全保障.这里的内联代码包括：<script>块内容，内联事件，内联样式。

对于<script>代码块的内容是完全不能执行.例如:<script>alert()</script>

内联事件也是不能执行的  例如:<a href="" οnclick="click()"></a>

禁用eval方法

  • csp 错误分析报告

可以用report-uri指令使浏览器发送HTTP POST请求把攻击报告以JSON格式传送到你指定的地址。接下来给大家介绍你的站点如何配置来接收攻击报告。

例如: Content-Security-Policy: default-src: self; report-url: https://www.dd.com;

如果只是想单纯的汇报错误报告 并不想设置csp策略 也可以使用 Content-Security-Policy-Report-Only头

违规报告语法

blocked-uri被CSP阻止的资源URI。如果被阻止的URI来自不同的源而非文档URI，那么被阻止的资源URI会被删减，仅保留协议，主机和端口号。
document-uri拦截违规行为的页面
original-policycontent-security-poclicy头部的策略信息
referrer违规发生处的文档引用（地址）
status-code

页面响应的状态码

violated-diretive违反的策略名称

 

 

 

 

 

 

 

参考文献:

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP#%E4%BD%BF%E7%94%A8_CSP

CSP：内容安全策略的前端深入解析
wujiayu31415的博客
07-29 1864
通过合理配置CSP策略，并利用报告模式进行测试和优化，可以显著提升Web应用的安全性，防范跨站脚本攻击等安全威胁。浏览器在加载和执行资源时，会根据这些指令进行严格的验证，只有符合规则的资源才会被加载和执行。在某些情况下，Web应用可能需要加载来自不同来源的内容，如iframe、嵌入的脚本或样式表等。：在报告模式下，CSP可以记录违反策略的行为，帮助开发者发现并修复潜在的安全问题，而不影响用户的正常访问。用于控制嵌入内容的来源等。：通过实施CSP，网站可以向用户展示其对安全性的重视，增强用户对网站的信任度。
网络安全最新前端内容安全策略（csp），2024年最新网络安全原生开发如何深入进阶
2401_84302583的博客
05-15 758
在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。需要完整版PDF学习资源私我。
内容安全策略（CSP）详解
热门推荐
柱哥的博客
04-18 2万+
内容安全策略（CSP），其核心思想十分简单：网站通过发送一个 CSP 头部，来告诉浏览器什么是被授权执行的与什么是需要被禁止的。其被誉为专门为解决XSS攻击而生的神器。
JavaScript 中的安全编码：10 个关键实践
葡萄城技术团队博客
10-16 401
摘要：私有化部署低代码平台解决企业数字化转型的两大痛点——数据安全与IT能力瓶颈。该方案将开发平台部署在企业自有环境，业务人员可通过可视化界面自主维护应用，无需专业IT支持。核心能力包括：类Excel的零代码操作、自动化运维工具、低门槛培训和国产化兼容。以活字格平台为例，企业可实现业务主导的快速迭代，同时满足等保合规要求。这种"数据本地化+业务自主"模式，使数字化从IT专属变为全员可参与，实现安全、高效、低成本的转型目标。
前端安全配置之Content-Security-Policy(csp)
weixin_30326745的博客
12-23 2249
什么是CSP CSP全称Content Security Policy ,可以直接翻译为内容安全策略,说白了,就是为了页面内容安全而制定的一系列防护策略. 通过CSP所约束的的规责指定可信的内容来源（这里的内容可以指脚本、图片、iframe、fton、style等等可能的远程的资源）。通过CSP协定，让WEB处于一个安全的运行环境中。 有什么用? 我们知道前端有个很著名的”同源策略”,...
前端安全-内容安全策略CSP（Content Security Policy）
AIWWY的博客
03-20 3454
可以通过CSP指定策略来规定页面加载的内容来源（这里的内容可以指脚本、图片、iframe、style等等可能的远程的资源）。Content-Security-Policy-Report-Only表示不会限制加载的内容，只是对加载内容不符合策略要求的进行上报，通过HTTP 请求发送到指定URI。可以把指令理解为属性，指令值理解为属性对应的值，一个属性可对应多个值，多值之间以空格分割，属性之间以分号分割。策略集由指令、空格、指令值、分号组成，不同的指令值之间以空格分割，不同指令之间以分号(
前端内容安全策略（csp）
2401_84152317的博客
04-09 823
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往获取正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往获取资料领取方式：点击这里前往获取。
网络安全：（十二）基于 CSP 的前端内容安全策略：减少 XSS 风险
begei的博客
12-26 914
CSP 是一种 web 安全策略，旨在帮助开发者防止 XSS 攻击及其他代码注入的威胁。它通过定义网页允许加载的内容类型、源站点、请求方式等策略，来限制页面中哪些资源可以被加载、哪些脚本可以执行。通过 CSP 可以将未经授权的内容阻止，从而保护用户数据。通过 CSP 配置，可以有效防止不可信脚本的执行，减少 XSS 攻击的风险。在 Vue 项目中，CSP 配置可以结合内联脚本的nonce和hash控制，进一步提升安全性。
Web前端安全
11-07
Web前端安全是一个复杂的领域，它主要关注的是在Web开发过程中可能出现的安全漏洞以及如何避免这些问题。接下来，我会详细解释与前端安全相关的一些核心概念和知识点。 首先，我们需要了解什么是跨站脚本攻击（XSS...
CSP内容安全策略详解：前端安全防护核心机制
内容安全策略（Content Security Policy，简称CSP）是一种重要的前端安全机制，旨在帮助网站防御跨站脚本攻击（XSS）、点击劫持、恶意资源注入等常见的Web安全威胁。CSP通过定义一个HTTP响应头——`Content-Security...
前端面试笔记11：前端安全之 CSP
qq_52287721的博客
01-02 3356
前端安全 CSP 文章目录前端安全 CSP什么是 CSP？如何开启 CSP?CSP 的用途 什么是 CSP？ CSP 指的是内容安全策略，它的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截由浏览器自己来实现。 如何开启 CSP? 通常有两种方式来开启 CSP，一种是设置 HTTP 首部中的 Content-Security-Policy，一种是设置 meta 标签的方式：<meta http-equiv="Content-Security-Policy"&gt
关于Web前端安全防御之内容安全策略（CSP）
xyphf的博客
08-03 1128
CSP（Content Security Policy，内容安全策略）是一种由浏览器强制执行的安全层，核心作用是限制网页可以加载和执行的资源来源（如脚本、样式、图片等），以及控制页面的行为（如是否、表单提交等）。通过明确指定可信的资源来源和允许的操作，CSP 能有效防御 XSS、点击劫持、数据注入等多种攻击，从根源上阻断恶意代码的加载和执行。
前端的CSP & CSP如何落地，了解一下
Arui_0的博客
09-03 1362
CSP(Content-Security-Policy)是一个HTTP response header, 它描述允许页面控制用户代理能够为指定的页面加载哪些资源, 可防止XSS攻击 使用方式： Content-Security-Policy: 指令1 指令1的值1 指令1的值2 指令1的值3; 指令2 指令2的值1 指令2的值2 复制代码 调试工具： Chrome插件——modheader。通过随意设置响应头来测试CSP 简单过一遍常见的指令 获取资源相关的指令 font-src frame-src im
Vue进阶（三十三）Content-Security-Policy（CSP）详解
IT全栈 华强工作室
09-05 1万+
跨域脚本攻击（XSS）是最常见、危害最大的网页安全漏洞。XSS 攻击利用了浏览器对于从服务器所获取的内容的信任。恶意脚本在受害者的浏览器中得以运行，因为浏览器信任其内容来源，即使有的时候这些脚本并非来自于它本该来的地方。为了防止它，要采取很多编程措施（比如大多数人都知道的转义、过滤HTML）。很多人提出，能不能根本上解决问题，即浏览器自动禁止外部注入恶意脚本？这就是"内容安全策略"（，缩写CSP）的由来。CSP。
2023年网络安全有哪些岗位？月薪7K到30K_网络安全就业岗位与薪资
2401_83739821的博客
04-17 871
在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。需要完整版PDF学习资源私我。
请求报错blocked:csp
Mr__proto__的博客
03-27 2459
项目架构:electorn+react+axios。此报错是因为mate标签里写了如下代码。解决办法就是先把这段代码注释掉。代码用途是,防止跨域脚本攻击。
jsonp突破同源策略，实现跨域访问请求
崔成龙 . 勇往直前
06-06 8323
跨域访问问题，相信大家都有遇到过。这是一个很棘手的问题。不过道高一尺，魔高一丈，对于这类问题，总有解决问题的方案。最近我又接触到了这个问题，解决的途径是ajax+jsonp。 说到这个问题，不得不说一下“同源策略(Same-Origin Policy)”，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源，就是必须协议、域名、端口都一致的，才叫做同源。例如：http://www.12306.cn和https://www.1230
安全 - 内容安全策略（CSP）（未完）
weixin_30762087的博客
06-28 1391
威胁 跨站脚本攻击(Cross-site scripting) 跨站脚本攻击Cross-site scripting (XSS)是一种安全漏洞，攻击者可以利用这种漏洞在网站上注入恶意的客户端代码。 攻击者可以突破网站的访问权限，冒充受害者 以下2种情况下，容易发生XSS攻击： 从一个不可靠的链接进入到一个web应用程序。 没有过滤掉恶意代码的动态内容被发送给web用户。（可以上传动态内容得接口...
前端加入csp策略
最新发布
11-07
<think>首先，用户的问题是：“我想查找在前端加入CSP策略的方法 请问前端添加CSP（内容安全策略）策略的方法”。用户明确询问如何在前端中添加CSP策略。 从系统级指令中，我需要： - 所有行内数学表达式使用$...$格式。 - 独立公式使用$$...$$格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识，例如:[^1] - 参考提供的站内引用。 提供的引用如下： - 引用[1]: 介绍CSP的基本概念、目的等。 - 引用[2]: 讨论CSP作为安全层，用于防止XSS攻击。 - 引用[3]: 提到添加CSP策略的方法，包括通过HTTP响应头或meta标签。 - 引用[4]: 也提到启用CSP的两种方法：HTTP响应头和meta标签。 用户的问题专注于“前端添加CSP策略的方法”。所以，我需要从引用中提取相关信息。 关键点： - 引用[3]明确指出："启用 CSP 策略需要添加一个 Content-Security-Policy 响应头，或在页面的 <meta> 标签中添加 CSP 规则。" - 引用[4]也说："有两种方法可以启用CSP。1、通过 HTTP 响应头信息的 Content-Security-Policy 的字段 Content-Security-Policy: script-src 'self'; Object-src 'none'; ... 2、通过meta标签。" 因此，添加CSP策略的两种主要方法是： 1. 通过HTTP响应头（服务器端设置）。 2. 通过HTML中的<meta>标签（客户端设置）。 用户问的是“前端加入CSP策略”，所以重点可能是通过<meta>标签的方法，因为那是前端可以控制的。 但严格来说，CSP策略通常由服务器设置HTTP头。然而，引用中提到meta标签也可以在前端添加。 所以，在回答中，我应该： - 解释两种方法。 - 强调前端添加的部分，即使用<meta>标签。 - 提供示例。 回答结构： - 由于系统指令要求结构清晰，帮助用户逐步解决问题。 - 开头直接回答问题。 - 然后详细介绍方法。 - 提供代码示例。 - 自然地引用提供的引用。 - 最后生成相关问题。 使用中文回答。 数学表达式：用户的问题不涉及数学表达式，但系统指定如果有数学表达式要使用LaTeX格式。这里可能不需要，但如果有，要遵守。 生成相关问题：在结尾添加相关问题部分。 引用标识：在相关段落末尾添加[^1], [^2]等。引用是[1],[2],[3],[4]，所以我需要使用相同的编号。 现在，计划回答： 1. **介绍**：简要解释CSP添加方法。 2. **方法一**：通过HTTP响应头（服务器端）。 3. **方法二**：通过<meta>标签（前端）。 4. **示例**：提供<meta>标签的代码示例。 5. **注意事项**：简要提到优缺点或注意事项。 6. **相关问题**：生成几个相关问题。 引用添加： - 当提到通过HTTP头时，引用[3]和[4]。 - 当提到<meta>标签时，引用[3]。 用户说“前端加入”，所以优先<meta>标签方法。 最终回答框架： - 回答：有两种主要方法添加CSP策略：服务器端通过HTTP响应头，或前端通过HTML的<meta>标签。对于前端添加，可以使用<meta>标签指定CSP规则。[示例] - 自然地添加引用：[^3], [^4] - 生成相关问题。 </think>### 前端添加CSP策略的方法 内容安全策略（CSP）是提升Web应用安全性的关键机制，主要用于防止跨站脚本（XSS）等前端攻击。添加CSP策略的方法主要有两种：一种是通过服务器端HTTP响应头（需后端配置），另一种是通过前端HTML中的`<meta>`标签（可直接在前端代码中实现）。以下我将逐步解释这两种方法，重点聚焦于前端添加方式（即使用`<meta>`标签），并提供具体示例和注意事项。 #### 1. **前端添加CSP策略的方法：使用 `<meta>` 标签** - 这种方法直接在HTML页面中添加`<meta>`标签，无需服务器端干预，适用于纯前端或静态网站。 - **语法结构**：在HTML的`<head>`部分插入`<meta>`标签，其中`http-equiv`属性设置为`"Content-Security-Policy"`，`content`属性包含CSP规则。 - **核心规则**：CSP规则定义可信资源的来源（白名单），例如： - `default-src 'self'`：默认所有资源必须来自当前域。 - `script-src 'self'`：限制脚本仅来自当前域。 - `style-src 'self'`：限制样式表仅来自当前域。 - `img-src 'self'`：限制图片仅来自当前域。 - 其他资源类型（如`object-src`或`child-src`）可根据需求添加规则。 - **优点**：易于实现，适合小型项目或测试环境；缺点是无法覆盖所有资源类型（如某些浏览器对`meta` CSP的支持有限）。 - **注意事项**：确保规则严格，避免使用`'unsafe-inline'`或`'unsafe-eval'`等宽松指令，否则会降低安全性[^3]。 #### 2. **前端添加示例** 以下是一个完整的HTML示例，展示如何在页面中添加CSP策略： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 添加CSP策略：限制资源来源为当前域，并禁止内联脚本 --> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; object-src 'none';"> <title>前端CSP示例</title> </head> <body> <h1>安全的Web页面</h1> <script> // 脚本只允许来自'self'（当前域） console.log("CSP策略生效"); </script> </body> </html> ``` - **解释**：此策略禁止加载外部脚本、样式或图片（仅允许当前域），并禁用外部对象（如Flash）。如果页面尝试注入外部资源或内联脚本，浏览器将阻止执行。 - **关键点**：规则`object-src 'none'`可防止潜在漏洞（如恶意插件），增强XSS防护[^4]。 #### 3. **服务器端添加方法（补充参考）** 虽然用户专注于前端方法，但完整CSP策略通常推荐通过HTTP响应头实现（服务器端）。这需要后端配置（如Nginx或Apache）： - **语法**：在HTTP响应头中添加`Content-Security-Policy`字段。 - **示例**：响应头`Content-Security-Policy: script-src 'self'; style-src 'self'; default-src 'none'`。 - **优点**：覆盖更全面，支持所有资源类型；缺点是需要服务器权限。 - 此方法适用于生产环境，但不属前端范畴，详情可参考服务器文档[^4]。 #### 4. **实践建议** - **测试与部署**：在添加CSP前，使用工具（如CSP Evaluator）测试策略兼容性。避免在开发环境中使用`report-only`模式（通过`Content-Security-Policy-Report-Only`头）。 - **安全优化**：结合其他前端安全措施（如输入验证），以最大化防护效果。 - **引用依据**：CSP策略通过限制资源来源减少XSS风险，是Web安全的基础机制[^2][^3]。 总之，前端添加CSP策略最直接的方法是使用HTML的`<meta>`标签，确保规则严格定义白名单。这能显著增强应用安全性，但需注意浏览器兼容性。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值