前端培训-中级阶段(13,15)-web网络攻击,CSP内容安全策略

本文涉及的产品
内容审核增强版开发者实践包,10万次资源包1年有效
简介: 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。

拖更小伙又来了,今天我们来聊聊 web网络攻击。


  1. XSS (跨站脚本攻击)


  1. CSRF (跨站请求伪造)


  1. 劫持
  1. 运营商劫持
  2. 中间人攻击


  1. XFF (伪造XFF头绕过服务器IP过滤)


  1. 文件上传


  1. 风控
  1. 刷优惠券
  2. 拉新套现
  3. 撞库、暴力破解
  4. 短信轰炸、邮件轰炸


  1. CSP (内容安全策略)


XSS 跨站脚本攻击


XSS 应该是前端遇到次数最多的问题。通过一些手段,注入一段文字,实现攻击。


xss 攻击场景


  1. 评论区,<input>标签 输入,<div>标签 输出


<input value="xss"> 本意是输入一段文字,结果显示成了输入框


  1. 个人资料编辑,<input>标签 输入,<input>标签 输出


"><script>alert()</scrpit> 本意是编辑文本,结果因为拼接导致字符串被异常隔开。


  1. 富文本
    比较复杂,需要用白名单过滤,不在白名单中的都转义


  1. url 填写处,a 链接或者 img 图片


https://lilnong.top " onclick="alert(1)" 判断url合法,防止拼接异常


xss 防御方法


  1. 富文本使用白名单区分。


  1. 输出,使用插值或转义


  1. 插值 innerTextsetAttribute()
  2. 转义 <变成&lt;"变成&quot;


  1. url处理,插值或过滤


  1. 推荐使用插值
  2. encodeURI


CSRF 跨站请求伪造


XSS 是通过把代码注入,在其他客户端机器上执行。CSRF 是通过诱导用户,在其他站上,触发请求。


CSRF 攻击场景


  1. 直播送礼,调用接口 sendGift(liveid, anchorid, giftid),服务端验证 cookie。


突然,QQ 收到一个链接,礼物免费领。你打开,这个网页背后默默的调用了sendGift(liveid, anchorid, giftid),只不过他传的liveid、anchorid 都是他自己的。但是因为 cookie 的机制,会默认带上,导致服务端认为这是你主动触发的一次操作。


  1. 修改密码,有的修改密码不需要检验旧密码。诱导网页后台直接修改密码。


CSRF 防护


  1. Referrer 校验


  1. token 令牌。


比如阿里云,将令牌直接输出到网页中,如果要进行敏感操作,需要传过去令牌。令牌一次有效最新有效


因为有跨域限制,不同源网页之间无法获取内容。


劫持攻击&中间人攻击


运营商劫持


http 移动端比较多。


  1. 不良运营商,非法植入广告。


  1. 公共wifi,非法劫持。


中间人攻击


中间人也可以理解为伪装的运营商,只不过运营商属于公众,不会太过分。实施中间人攻击时,攻击者常考虑的方式是ARP欺骗或DNS欺骗等


  1. 信息篡改


当主机A、和主机B通信时,都由主机C来为其“转发”。而A、B之间并没有真正意思上的直接通信,他们之间的信息传递同C作为中介来完成,但是A、B却不会意识到,而以为它们之间是在直接通信。这样攻击主机在中间成为了一个转发器,C可以不仅窃听A、B的通信还可以对信息进行篡改再传给对方,C便可以将恶意信息传递给A、B以达到自己的目的。


  1. 信息窃取


代理服务器。当A、B通信时,C不主动去为其“转发”,只是把他们的传输的数据备份,以获取用户网络的活动,包括账户、密码等敏感信息。


XFF (伪造XFF头绕过服务器IP过滤)


  1. 刷票


当然,他会有真实的ip,只需要按真实ip过滤即可。


同样,又出现大量的代理。a请求代理,代理请求服务端,这样只能做个池子过滤了。


文件上传


有时候,我们需要做一个富文本编辑器,其中就有上传的功能,我们一般来说是先把他所有实例代码部署。之后先看看是否符合要求。最后接入修改。


问题就出现在了这里。有时一些代码未删除,或者漏删。这个时候就有问题了,因为是测试代码,未限制类型。比如攻击者上传jsp代码


防护方案


  1. 限制可上传类型,比如只可以上传图片类型,视频类型。尽量避免可执行代码。


  1. 上传目录控制,尽量使用新的存储。防止走模板引擎


  1. 后缀名防护,html替换为txt


  1. 上cdn。前端跨域,相对来说可以避免很多问题(跨域也会引起问题,比如图片合成,源会被污染)。


风控


风控属于一个持续工程。属于一个可以分层封禁的。


  1. 刷优惠券、拉新套现


  1. 限制账户(微信账户,手机号)
  2. 限制ip()
  3. 限制设备(机器码,客户端能获取)


  1. 撞库、暴力破解、短信轰炸、邮件轰炸
  1. 限制频率(同一地址每天10次)


说说破解方案。


  1. 人力刷,无敌。只能说拉来的不是有效用户。所以要结合业务,转为有效用户或者限制个数。


  1. 机刷
  1. ip限制。代理池
  2. 账号限制。和多号,阿里小号,等等一些平台,低价账号,然后养号。


说到底,还是要结合业务。找到具体的控制线。


比如说,根据用户等级,确定用户活跃度,30级以下 10个名额,30级以上 20个名额,80级以上 30个名额,心悦8 40个名额。


CSP (内容安全策略)


掘金使用的是这个方案。它可以禁止使用不安全来源的资源。


内容安全策略 (CSP) 是一个额外的安全层,用于检测并削弱某些特定类型的攻击,包括跨站脚本 (XSS) 和数据注入攻击等。无论是数据盗取、网站内容污染还是散发恶意软件,这些攻击都是主要的手段。
CSP通过指定有效域——即浏览器认可的可执行脚本的有效来源——使服务器管理者有能力减少或消除XSS攻击所依赖的载体。一个CSP兼容的浏览器将会仅执行从白名单域获取到的脚本文件,忽略所有的其他脚本 (包括内联脚本和HTML的事件处理属性)。作为一种终极防护形式,始终不允许执行脚本的站点可以选择全面禁止脚本执行。

有两种设置方式


  1. 服务端返回 Content-Security-Policy HTTP头部


  1. 网页中设置 <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">


CSP 限制


  1. default-src 默认,给所有配置项设置。


  1. child-src WebWorker 和 <frame><iframe>嵌套浏览上下文。


  1. connect-src 脚本接口加载的链接地址


  1. ping
  2. Fetch
  3. XMLHttpRequest
  4. WebSocket
  5. EventSource


  1. font-src 加载的字体的有效源@font-face


  1. frame-src <frame><iframe>的有效源。


  1. img-src 图像和图标的有效来源。


  1. manifest-src manifest有效源


  1. media-src 媒体来源有效<audio>,<video>和<track>元素。


  1. object-src <object>,<embed>和<applet>元素。


  1. script-src JavaScript的有效源。可以限制行内无效


  1. style-src 样式表的有效源。


  1. worker-src 指定有效来源Worker,SharedWorker或ServiceWorker脚本。
相关文章
|
7天前
|
编解码 异构计算
RT-DETR改进策略【Neck】| BiFPN:双向特征金字塔网络-跨尺度连接和加权特征融合
RT-DETR改进策略【Neck】| BiFPN:双向特征金字塔网络-跨尺度连接和加权特征融合
41 9
RT-DETR改进策略【Neck】| BiFPN:双向特征金字塔网络-跨尺度连接和加权特征融合
|
7天前
|
机器学习/深度学习 计算机视觉
RT-DETR改进策略【Neck】| ASF-YOLO 注意力尺度序列融合模块改进颈部网络,提高小目标检测精度
RT-DETR改进策略【Neck】| ASF-YOLO 注意力尺度序列融合模块改进颈部网络,提高小目标检测精度
36 3
RT-DETR改进策略【Neck】| ASF-YOLO 注意力尺度序列融合模块改进颈部网络,提高小目标检测精度
|
7天前
|
机器学习/深度学习 编解码 自动驾驶
RT-DETR改进策略【模型轻量化】| 替换骨干网络为MoblieNetV1,用于移动视觉应用的高效卷积神经网络
RT-DETR改进策略【模型轻量化】| 替换骨干网络为MoblieNetV1,用于移动视觉应用的高效卷积神经网络
31 3
RT-DETR改进策略【模型轻量化】| 替换骨干网络为MoblieNetV1,用于移动视觉应用的高效卷积神经网络
|
7天前
|
机器学习/深度学习 移动开发 测试技术
RT-DETR改进策略【模型轻量化】| 替换骨干网络为MoblieNetV2,含模型详解和完整配置步骤
RT-DETR改进策略【模型轻量化】| 替换骨干网络为MoblieNetV2,含模型详解和完整配置步骤
27 1
RT-DETR改进策略【模型轻量化】| 替换骨干网络为MoblieNetV2,含模型详解和完整配置步骤
|
7天前
|
机器学习/深度学习 编解码 TensorFlow
RT-DETR改进策略【模型轻量化】| 替换骨干网络为EfficientNet v1 高效的移动倒置瓶颈结构
RT-DETR改进策略【模型轻量化】| 替换骨干网络为EfficientNet v1 高效的移动倒置瓶颈结构
23 0
RT-DETR改进策略【模型轻量化】| 替换骨干网络为EfficientNet v1 高效的移动倒置瓶颈结构
|
7天前
|
机器学习/深度学习 计算机视觉 异构计算
RT-DETR改进策略【模型轻量化】| 替换骨干网络 CVPR-2023 FasterNet 高效快速的部分卷积块
RT-DETR改进策略【模型轻量化】| 替换骨干网络 CVPR-2023 FasterNet 高效快速的部分卷积块
18 0
RT-DETR改进策略【模型轻量化】| 替换骨干网络 CVPR-2023 FasterNet 高效快速的部分卷积块
|
7天前
|
机器学习/深度学习 计算机视觉 iOS开发
RT-DETR改进策略【模型轻量化】| 替换骨干网络 CVPR-2024 RepViT 轻量级的Vision Transformers架构
RT-DETR改进策略【模型轻量化】| 替换骨干网络 CVPR-2024 RepViT 轻量级的Vision Transformers架构
31 0
RT-DETR改进策略【模型轻量化】| 替换骨干网络 CVPR-2024 RepViT 轻量级的Vision Transformers架构
|
7天前
|
机器学习/深度学习 计算机视觉 网络架构
RT-DETR改进策略【模型轻量化】| 替换骨干网络 CVPR-2024 StarNet,超级精简高效的轻量化模块
RT-DETR改进策略【模型轻量化】| 替换骨干网络 CVPR-2024 StarNet,超级精简高效的轻量化模块
92 63
RT-DETR改进策略【模型轻量化】| 替换骨干网络 CVPR-2024 StarNet,超级精简高效的轻量化模块
|
7天前
|
机器学习/深度学习 计算机视觉
RT-DETR改进策略【模型轻量化】| 替换骨干网络为 MobileViTv1高效的信息编码与融合模块,获取局部和全局信息
RT-DETR改进策略【模型轻量化】| 替换骨干网络为 MobileViTv1高效的信息编码与融合模块,获取局部和全局信息
89 62
RT-DETR改进策略【模型轻量化】| 替换骨干网络为 MobileViTv1高效的信息编码与融合模块,获取局部和全局信息
|
7天前
|
机器学习/深度学习 自动驾驶 计算机视觉
RT-DETR改进策略【模型轻量化】| 替换骨干网络为 GhostNet V1 基于 Ghost Module 和 Ghost Bottlenecks的轻量化网络结构
RT-DETR改进策略【模型轻量化】| 替换骨干网络为 GhostNet V1 基于 Ghost Module 和 Ghost Bottlenecks的轻量化网络结构
86 61
RT-DETR改进策略【模型轻量化】| 替换骨干网络为 GhostNet V1 基于 Ghost Module 和 Ghost Bottlenecks的轻量化网络结构

热门文章

最新文章

  • 1
    部署使用 CHAT-NEXT-WEB 基于 Deepseek
  • 2
    springSecurity学习之springSecurity过滤web请求
  • 3
    FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
  • 4
    WEB 版的报表工具有没有意义?
  • 5
    java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
  • 6
    零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
  • 7
    【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
  • 8
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 9
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 10
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈