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

简介: 前端最基础的就是 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脚本。
相关文章
|
9月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
753 108
|
9月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
765 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
11月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
204 2
|
11月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
316 1
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
缓存 前端开发 JavaScript
Web应用性能优化策略
Web应用性能优化策略
394 105
|
人工智能 运维 安全
网络安全公司推荐:F5荣膺IDC全球Web应用与API防护领导者
网络安全公司推荐:F5荣膺IDC全球Web应用与API防护领导者
391 4
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1147 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
Kubernetes 安全 Devops
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
367 10
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
418 6

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1075
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    472
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    363
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    349
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    469
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    635
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1004
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    250
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    843
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    430