前端设置Content-Security-Policy

最新推荐文章于 2024-03-16 19:43:29 发布
最新推荐文章于 2024-03-16 19:43:29 发布
阅读量2.8w 收藏 27
点赞数 18
文章标签： 安全 http xss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/petterDong/article/details/106575480
版权

前端设置 Content-Security-Policy

1.什么是 Content-Security-Policy?

首先W3C的官方解释链接 Content-Security-Policy

MDN的链接配置 Content-Security-Policy

简单来说:

跨域脚本攻击 XSS 是最常见、危害最大的网页安全漏洞。为了防止它们，浏览器自动禁止外部注入恶意脚本.

CSP 的实质就是白名单制度，开发者明确告诉客户端，**哪些外部资源可以加载和执行，**等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。

CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。

两种方法可以启用 CSP。一种是通过 HTTP 头信息的Content-Security-Policy的字段。

1.在HTML上使用

通过meta 标签

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

例如:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-eval' 'unsafe-inline';img-src  'self'  'unsafe-inline'  'unsafe-eval'  data:">

限制方式

  • default-src 限制全局,默认所有都会使用这种规则
  • script-src 限制JavaScript的源地址。
  • style-src 限制层叠样式表文件源。
  • img-src 限制图片和图标的源地址
  • … 还有很多

限制规则

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’;

多个资源时,后面的会覆盖前面的

值demo说明
*img-src *允许任意地址的url,但是不包括 blob: filesystem: schemes.
‘none’object-src ‘none’所有地址的咨询都不允许加载
‘self’script-src ‘self’同源策略,即允许同域名同端口下,同协议下的请求
data:img-src ‘self’ data:允许通过data来请求咨询 (比如用Base64 编码过的图片).
domain.example.comimg-src domain.example.com允许特性的域名请求资源
*.example.comimg-src *.example.com允许从 example.com下的任意子域名加载资源
https://cdn.comimg-src https://cdn.com仅仅允许通过https协议来从指定域名下加载资源
https:img-src https:只允许通过https协议加载资源
‘unsafe-inline’script-src ‘unsafe-inline’允许行内代码执行
‘unsafe-eval’script-src ‘unsafe-eval’允许不安全的动态代码执行,比如 JavaScript的 eval()方法
data:img-src data:允许加载base64图片
mediastream:media-src mediastream:允许mediastream: URI作为内容来源。

参考文献

  1. Content-Security-Policy详解

  2. CSP策略及绕过方法

petterDong
关注
  • 18
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
内容安全策略（content-security-policy）
我的LOG
12-31 3万+
iframe 在使用iframe 的时候 <iframe style="border:0;width:100%;height:100%" src="https://github.com/join"/> 经查 报的是 Refused to frame ‘https://github.com/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘non
Always Disable Content-Security-Policy-crx插件
04-02
语言:English,English (UK) 对于Web应用程序测试，始终禁用Content-Security-Policy。 当图标为彩色时，将禁用CSP标头。 这是Phil Grayson扩展的一个分支，唯一的区别是此扩展默认情况下禁用标头。 原文：https：//chrome.google.com/webstore/detail/disable-content-security/ieelmcmcagommplceebfedjlakkhpden使用后果自负。 禁用当前页面的内容安全策略。 测试新的第三方标签在页面上包含哪些资源时很有用。 单击扩展程序图标以重新启用CSP标头。 再次单击扩展图标以禁用CSP标头。 仅将此作为最后的手段。 禁用CSP意味着禁用旨在保护您免受跨站点脚本攻击的功能。 最好使用report-uri，它指示浏览器将CSP违规发送到URI。 这样一来，您就可以在浏览器中保持启用CSP的状态，但仍然知道阻止了什么操作。 https://report-uri.com是一个免费工具，可为您提供一个Web界面来检查您站点上的CSP违规行为。
meta标签添加Content-Security-Policy
weixin_43940592的博客
03-04 2920
const head = document.getElementsByTagName('head'); const meta = document.createElement('meta'); meta.httpEquiv = 'Content-Security-Policy'; meta.content = 'upgrade-insecure-requests'; head[0].appendChild(meta);
Content-Security-Policy —— HTML HTTP的内容安全策略
最新发布
2401_83621499的博客
03-16 827
/ 以下图片将无法加载指定哪些manifest可以应用到资源。
http内容安全策略Content Security Policy(CSP)
focus on security
08-24 5488
内容安全策略CSP是安全性的附加层，有助于检测和缓解某些类型的攻击，包括跨站点脚本(https://owasp.org/www-community/attacks/xss/)和数据注入攻击。这些攻击可用于从数据盗窃，站点损坏到恶意软件分发的所有方面。 CSP被设计为完全向后兼容（除CSP版本2，其中有在向后兼容性一些明确提到的不一致性）。不支持它的浏览器仍然可以与实现它的服务器一起使用，反之亦然：不支持CSP的浏览器只是忽略它，照常运行，默认为Web内容的标准同源策略。如果站点不提供CSP标头，则浏览器同
koa-csp：用于设置响应头：Content-Security-Policy
02-03
koa-csp 这是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 ( ) ) ; // It is equivalent to app . use ( csp ( { enableWarn : true , policy : { 'default-src' : [ 'self' ]
Web 安全之内容安全策略详解（Content-Security-Policy,CSP）
乌龙茶不甜的博客
04-27 1万+
1.CSP 简介 内容安全策略（Content Security Policy，简称CSP）是一种以可信白名单作机制，来限制网站是否可以包含某些来源内容，缓解广泛的内容注入漏洞，比如 XSS。 简单来说，就是我们能够规定，我们的网站只接受我们指定的请求资源。默认配置下不允许执行内联代码（2.CSP 使用方式 CSP可以由两种方式指定： HTTP Header 和 HTML。 通过定义在HTTP header 中使用： "Content-Security-Policy:" 策略集 通过定义在 HTML me
Content Security Policy设置
阳光
06-06 4557
Content Security Policy (CSP) 是一种加固 Web 应用的安全性的技术，通过在网站页面中设置 CSP Header 来限制页面中能够执行的脚本、样式、图片等资源。其中 script-src 只允许本网站和 example.com 的脚本加载，img-src 只允许本网站和 data: URI 的图片加载，style-src 只允许本网站和内联样式加载，font-src 只允许本网站和 example.com 的字体加载。请根据实际情况进行调整。
CSP 内容安全策略
qq_53058639的博客
01-09 276
Content-Security-Policy和Content-Security-Policy-Report-Only，也可以同时使用，Content-Security-Policy带有策略强制性，而Content-Security-Policy-Report-Only中的策略只产生报告不具有强制性。CSP(Content-Security-Policy)内容安全策略，官方解释：CSP是一个额外的完全层，用于检测并小若某些特定类型的攻击，包括跨站脚本攻击XSS和数据注入攻击等。2. 前端通过标签进行配置。
内容安全策略 Content-Security-Policy
热门推荐
qq_30436011的博客
10-24 2万+
1、限制资源获取：限制网页当中一系列的资源获取的情况，从哪里获取，请求发到哪个地方限制方式：default-src限制全局的和链接有关的作用范围根据资源类型（connect-src、img-src等），限制资源范围2、报告资源获取越权：在网页当中获取了一些我们不应该获取的资源的时候，给服务进行报告，报告资源获取越权，然后做出调整之所以报这个错误，就是我们加了这个头的作用。这个时候 inline脚本还是不能执行的。如果引入外链的脚本文件，则会报错，这样就可限制，只能使用我们本站使用的脚本。
关于HTTP中的CSP(Content-Security-Policy)内容安全策略
Wang的专栏
03-08 4393
关于HTTP中的CSP 在HTTP协议中为了使我们的网站足够的安全，经常要用到CSP(Content-Security-Policy)内容安全策略 CSP的作用 限制网站中资源的获取，以及请求发送到哪里 报告资源获取越权 CSP的限制方式 default-src限制全局和链接请求有关的东西 指定资源类型 connect-src manifest-src img-src font-src media-src style-src frame-src script-src 网页上和链接有关的…
ember-cli-content-security-policy
04-28
ember-cli-内容安全政策 此插件使您可以在项目中轻松使用（CSP）。 该策略可以通过Content-Security-Policy HTTP响应标头或作为index.html文件中的元标记来传递。 如果配置为使用HTTP响应标头提供CSP，则标头将自动设置（如果与开发中的Ember CLI的快速服务器或生产中的一起使用）。 如果不使用FastBoot在生产中为应用提供服务，则必须将Web服务器配置为设置CSP标头。 可以使用提供的Ember CLI命令导出配置的CSP。 如果配置为使用meta标记交付CSP，则不需要为生产中的应用程序提供服务的Web服务器的其他配置。 无论如何，使用此插件有助于在开发Ember应用程序时将CSP保持在您思想的最前沿。 兼容性 Ember.js v2.18或更高版本 Ember CLI v3.4或更高版本 Node.js v10或更高版本 安装
fastify-csp:固定插件以设置Content-Security-Policy标头
05-08
固定-csp 固定插件以设置Content-Security-Policy标头。 为什么？ 您可能知道是使用的。 您也可以将其用作fastify的中间件。 那么，为什么我做了这个插件？ 您可能会在找到原因，并希望您喜欢它。 :) 区别 该插件已通过所有测试用例。 但是csp有一些区别： 不支持kebab大小写指令名称。 所有指令名称都应以驼峰大小写。 使用lru缓存生成静态策略，不会影响动态情况。 安装 通过npm： npm i fastify-csp 通过纱： yarn add fastify-csp 用法 const fastify = require ( 'fastify' ) ; const fastifyCsp = require ( 'fastify-csp' ) ; const app = fastify ( ) ; app . register ( fa
csp:包 csp 提供了一个 Go HTTP 处理程序，用于设置 Content-Security-Policy 标头和接收 CSP 违规报告
06-26
热电偶 csp 提供了一个 Go HTTP 处理程序，用于设置 Content-Security-Policy 标头和接收 CSP 违规报告。 用法 go get sourcegraph.com/sourcegraph/csp
HCIP-Security 网络安全 上课笔记
06-26
HCIP-Security 网络安全 上课笔记
HCIA-Security V4.0 培训教材
12-27
HCIA-Security V4.0 培训教材
Content-Security-Policy.md
06-05
如何设置meta 标签防止XSS攻击,以及CSP的一些说明, CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单...一种是通过 HTTP 头信息的`Content-Security-Policy`的字段。
ContentSecurityPolicyFilter:一个可配置的Java Servlet过滤器，将“ Content-Security-Policy”标头添加到ServletResponse
05-02
将“ Content-Security-Policy”或“ Content-Security-Policy-Report-Only”标头添加到响应中。 另请参阅： 通常，您只需要有限的数目，也不需要任何init参数。 如果未定义init参数，则Header将如下所示： ...
content-security-policy.com:content-security-policy.com网站的源代码
04-27
content-security-policy.com content-security-policy.com网站的源代码
使用flask+js 解决“Content-Security-Policy”头缺失 问题
01-13
使用Flask和JavaScript解决"Content-Security-Policy"头缺失问题的方法如下： 1. 在Flask应用程序中设置"Content-Security-Policy"头。可以通过在应用程序的路由函数中使用`@app.after_request`装饰器来设置响应头。示例代码如下： ```python from flask import Flask, make_response app = Flask(__name__) @app.after_request def add_csp_header(response): response.headers['Content-Security-Policy'] = "default-src 'self'" return response ``` 上述代码将在每个响应中添加"Content-Security-Policy"头，并将其值设置为"default-src 'self'"，表示只允许加载来自同一域名的资源。 2. 在JavaScript中处理跨域请求。如果你的JavaScript代码需要从不同的域名加载资源，可能会遇到"Access-Control-Allow-Origin"错误。为了解决这个问题，可以在服务器端设置响应头，允许来自其他域名的请求。示例代码如下： ```python from flask import Flask, make_response app = Flask(__name__) @app.after_request def add_cors_header(response): response.headers['Access-Control-Allow-Origin'] = '*' return response ``` 上述代码将在每个响应中添加"Access-Control-Allow-Origin"头，并将其值设置为"*"，表示允许来自任何域名的请求。 3. 在前端页面中引入JavaScript文件。在HTML文件中，使用`<script>`标签引入JavaScript文件，并确保该文件位于与HTML文件相同的域名下。示例代码如下： ```html <!DOCTYPE html> <html> <head> <title>Flask + JavaScript</title> <script src="static/js/script.js"></script> </head> <body> <!-- 页面内容 --> </body> </html> ``` 上述代码将在页面中引入名为"script.js"的JavaScript文件，该文件位于"static/js/"目录下。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值