Angular安全专辑 —— CSP防止XSS攻击

news2024/12/25 12:29:14

 

什么是 CSPContent Security Policy

CSPContent Security Policy)是一种Web安全策略,用于减轻和防止跨站脚本攻击(XSS)等安全漏洞。它通过允许网站管理员定义哪些资源可以加载到网页中,从而限制了恶意脚本的执行。

CSP 可以起到什么作用

  • 禁止加载外域代码,防止复杂的攻击逻辑。
  • 禁止外域提交,网站被攻击后,用户的数据不会泄露到外域。
  • 禁止内联脚本执行。
  • 禁止未授权的脚本执行。

如何使用 CSP 解决 XSS 攻击

CSP通过设置HTTP头部中的Content-Security-Policy字段 在白名单策略中,可以使用他来指定浏览器仅渲染或执行来自白名单中的资源。即便是被恶意注入了脚本,因为脚本并不在白名单中,因此不会执行。

Node 为例 创建一个 express 服务,并设置 Content-Security-Policy 请求头, 以下是一个简单的示例将所有的脚本限制为只能从同一域加载,但是允许从google.com加载,这样就可以防止XSS攻击,但是允许使用Google Analytics

const express = require('express');

const app = express();

const port = 3001;

app.use(express.static('public'));

app.use(function (req, res, next) {

  res.setHeader(

    'Content-security-policy',

    `script-src 'self' https://*.google.com` + `img-src 'self'`

  )

  next();

});

app.listen(port, () => {

  console.log(`Example app listening at http://localhost:${port}`)

})

// https://i.newscdn.net/publisher-c1a3f893382d2b2f8a9aa22a654d9c97/2022/11/96aade6fbd470941cc2b13fb939ba174.png

接下来验证一下 CSP 是否生效 在代码中添加限制 img 同源机制,并添加一个接口返回一个 img 通过访问 http://localhost:3001/api/img 会发现页面上的图片无法加载,并在 Console 中输出错误


res.setHeader(
        'Content-security-policy',
        `img-src 'self'`
    )

因为图片的来源不在白名单中,重新将图片域名添加到Content-security-policy 中再次访问 http://localhost:3001/api/img 则可以正常加载图片

 

res.setHeader(
        'Content-security-policy',
        `img-src 'self' https://i.newscdn.net`
    )

完整代码 

app.get('/api/img', (req, res) => {
    const html = `<img src='https://i.newscdn.net/publisher-c1a3f893382d2b2f8a9aa22a654d9c97/2022/11/96aade6fbd470941cc2b13fb939ba174.png' alt="">`
    res.setHeader(
        'Content-security-policy',
        `img-src 'self' https://i.newscdn.net`
    )
    res.send(html)
    res.type('.html')
})

常见的CSP指令

default-src: 默认策略,适用于其他资源类型没有指定策略时的默认行为。

script-src: 控制加载脚本的来源。

style-src: 控制加载样式表的来源。

img-src: 控制加载图片的来源。

connect-src: 控制加载数据的来源(如AJAX请求)。

font-src: 控制加载字体的来源。

object-src: 控制加载插件(如Flash)的来源。

frame-src: 控制加载框架的来源。

media-src: 控制加载音视频的来源。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/851975.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【动态规划】数字三角形

算法提高课课堂笔记。 文章目录 摘花生题意思路代码 最低通行费题意思路代码 方格取数题意思路代码 摘花生 题目链接 Hello Kitty想摘点花生送给她喜欢的米老鼠。 她来到一片有网格状道路的矩形花生地(如下图)&#xff0c;从西北角进去&#xff0c;东南角出来。 地里每个道…

解决GitHub超时上不去

Github对于开发者开发者开发者来说肯定不陌生&#xff0c;但是Github 经常连接不上显示超时&#xff0c;一般都是节点ip的问题。本文主要介绍一下如何通过修改 Hosts 提升 Github 访问速度。之前在 Hosts 文件有加入过节点&#xff0c;不过容易失效&#xff0c;所以自己得常更新…

A10VSO140EF7、A10VSO45ED71变量柱塞泵比例放大器

A10VSO18EF1、A10VSO28EF2、A10VSO45EF5、A10VSO71EF7、A10VSO100EF2、A10VSO140EF7、A10VSO45ED71、A10VSO71ER72、A10VSO100ED71、A10VSO140ER72、A10VSO180ER71比例变量柱塞泵电流信号实现电比例控制。 高精确度。 发生电源故障时的安全功能&#xff0c;例如制动和转向系统…

Python爬虫(八)_Requests的使用

Requests&#xff1a;让HTTP服务人类 虽然Python的标准库中urllib2模块中已经包含了平常我们使用的大多数功能&#xff0c;但是它的API使用起来让人感觉不太好&#xff0c;而Requests自称"HTTP for Humans"&#xff0c;说明使用更简单方便。 Requests唯一的一个非转…

LeetCode--HOT100题(24)

目录 题目描述&#xff1a;234. 回文链表&#xff08;简单&#xff09;题目接口解题思路代码 PS: 题目描述&#xff1a;234. 回文链表&#xff08;简单&#xff09; 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &…

微信-jssdk使用

需求: h5中使用微信的jsSDK,后续实现微信定位以及多图上传 微信文档 申请测试公众号 1.测试公众号进行配置 其中的域名是本地的ip地址 config接口进行权限配置,动态获取JS-SDK权限验证的签名 获取公众号accessToken以及jsTicket public static String WeChatAppId="wx…

Redis数据库的下载和安装

目录 第一章、Redis数据库的下载和安装1.1&#xff09;nosql数据库和 Redis 介绍1.2&#xff09;Windows中下载安装Redis数据库1.3&#xff09;Linux中安装Redis数据库1.4&#xff09;Linux中启动redis1.5&#xff09;Linux中关闭redis 第二章、三种Redis客户端连接Redis数据库…

0804|IO进程线程day7 【重点】线程的同步互斥(互斥锁、信号量、条件变量的概念及基本操作)

线程的同步互斥中的两个概念&#xff1a;临界资源、临界区&#xff1a; 临界资源&#xff1a;当多个任务同时访问一个资源的时候&#xff0c;我们将该资源称之为临界资源。临界区&#xff1a;访问临界资源的代码&#xff0c;称之为临界区线程之间&#xff0c;如果要进行通信&am…

从少年变成恶龙的平台经济

点击文末“阅读原文”即可参与节目互动 剪辑、音频 / 卷圈 运营 / SandLiu 卷圈 监制 / 姝琦 封面 / 姝琦midjourney 产品统筹 / bobo 录音间 / 声湃轩北京站 东方甄选和抖音的“矛盾”再一次暴露出平台经济与入驻者之间微妙的关系。 平台经济&#xff0c;从一个引领时代…

人工智能有可能使下一代智力贫乏?

在ChatGPT推出之前&#xff0c;Maya认识的绝大多数大学生都会通过Google去完善自己的论文帮助。但人工智能之前的互联网其实是做不到真正的“高水平抄袭”&#xff0c;因为你根本无法找到复杂、具体、有创意或个性化的答案。 以上面提到的冲突解决课论文为例&#xff0c;写作要…

Effective Java笔记(30)优先考虑泛型方法

正如类可以从泛型中受益一般 &#xff0c;方法也一样。静态工具方法尤其适合于泛型化 。 Collections 中的所有“算法”方法&#xff08;例如 binarySearch 和 sort &#xff09;都泛型化了 。 编写泛型方法与编写泛型类型相类似 。 例如下面这个方法&#xff0c;它返回两个集合…

实战项目ssm权限系统 3-自定义注解+AOP拦截器记录登录日志

一 登录日志以及操作操作日志的操作 1.1 登录日志配置收集 1.1.1 编写log入库的service层接口 1.接口&#xff1a;在spring-security模块中 2.实现类&#xff1a;在service-system模块中 3.dao层&#xff1a;在service-system模块中 1.1.2 过滤器添加log记录 在过滤器中&…

ArcGISPro中如何使用机器学习脚本

点击工程 打开包管理器&#xff0c;我们可以发现&#xff0c;无法修改ArcGIS自带的默认python环境&#xff0c;所以我们需将默认环境进行克隆 点击设置 设置要克隆的地方&#xff0c;点击确定 激活克隆的环境&#xff0c;然后重写启动ArcGISPro 搜索并点击需要安装的库&#xf…

virtualBox安装openEuler、virtualBox安装欧安镜像、openEuler镜像安装、虚拟安装openEuler

应领导要求,为后面系统改成国产操作系统+国产数据的要求,写一篇openEuler的文章。 第一步:下载openEuler镜像:openEuler下载 | 欧拉系统ISO镜像 | openEuler社区官网 选择对应版本:现在一般是64位,下载64位即可 第二步:下载virtualbox,个人下载的7.0.10:Downloads …

【PCL-7】PCL统计滤波

【PCL-1】RANSAC平面分割_pcl ransac平面_WXG1011的博客-CSDN博客 这篇博客已介绍直通滤波与体素滤波&#xff0c;这里主要记录统计滤波。 统计滤波是遍历计算各测点与其领域点的平均距离&#xff0c;以此为标量&#xff0c;假设为高斯正态分布&#xff0c;按标准差去除离群点…

OpenAI允许网站阻止其网络爬虫;谷歌推出类似Grammarly的语法检查功能

&#x1f989; AI新闻 &#x1f680; OpenAI推出新功能&#xff0c;允许网站阻止其网络爬虫抓取数据训练GPT模型 摘要&#xff1a;OpenAI最近推出了一个新功能&#xff0c;允许网站阻止其网络爬虫从其网站上抓取数据训练GPT模型。该功能通过在网站的Robots.txt文件中禁止GPTB…

使用 Etcher 制作U盘系统盘

Etcher 资料&#xff1a; https://github.com/balena-io/etcher/blob/master/SUPPORT.md

网络优化工程师,你到底了解多少?

5G网络优化工程师到底是什么&#xff1f; 5G&#xff0c;第五代移动通信技术&#xff08;5th Generation Mobile Communication Technology&#xff0c;简称5G&#xff09;是具有高速率、低时延和大连接特点的新一代宽带移动通信技术&#xff0c;5G通讯设施是实现人机物互联的…

重磅!清华最新报告:文心一言超越ChatGPT 3.5

点击下方卡片&#xff0c;关注“CVer”公众号 AI/CV重磅干货&#xff0c;第一时间送达 今年国内厂商已发布很多大语言模型&#xff0c;其中最具代表性的产品有&#xff1a;百度的文心一言、阿里巴巴的通义千问、科大讯飞的星火等&#xff0c;最具代表性的开源工作有&#xff1a…

春秋云镜 CVE-2020-2551

春秋云镜 CVE-2020-2551 Weblogic iiop协议反序列化 靶标介绍 2020年1月15日&#xff0c;Oracle发布了一系列的安全补丁&#xff0c;其中Oracle WebLogic Server产品存在高危漏洞&#xff0c;漏洞编号CVE-2020-2551&#xff0c;CVSS评分9.8分&#xff0c;漏洞利用低难度&…