前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

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

1. XSS (跨站脚本攻击)
2. CSRF (跨站请求伪造)

3. 劫持

   1. 运营商劫持
   2. 中间人攻击
4. XFF (伪造XFF头绕过服务器IP过滤)
5. 文件上传

6. 风控

   1. 刷优惠券
   2. 拉新套现
   3. 撞库、暴力破解
   4. 短信轰炸、邮件轰炸
7. CSP (内容安全策略)

XSS 跨站脚本攻击

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

xss 攻击场景

1. 评论区，<input>标签 输入，<div>标签 输出
   <input value="xss"> 本意是输入一段文字，结果显示成了输入框
2. 个人资料编辑，<input>标签 输入，<input>标签 输出
   "><script>alert()</scrpit> 本意是编辑文本，结果因为拼接导致字符串被异常隔开。
3. 富文本
   比较复杂，需要用白名单过滤，不在白名单中的都转义
4. url 填写处，a 链接或者 img 图片
   https://lilnong.top " onclick="alert(1)" 判断url合法，防止拼接异常

xss 防御方法

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

2. 输出，使用插值或转义

   1. 插值 innerText setAttribute()
   2. 转义 <变成<、"变成"等

3. url处理，插值或过滤

   1. 推荐使用插值
   2. encodeURI

CSRF 跨站请求伪造

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

CSRF 攻击场景

1. 直播送礼，调用接口 sendGift(liveid, anchorid, giftid)，服务端验证 cookie。
   突然，QQ 收到一个链接，礼物免费领。你打开，这个网页背后默默的调用了sendGift(liveid, anchorid, giftid)，只不过他传的liveid、anchorid 都是他自己的。但是因为 cookie 的机制，会默认带上，导致服务端认为这是你主动触发的一次操作。
2. 修改密码，有的修改密码不需要检验旧密码。诱导网页后台直接修改密码。

CSRF 防护

1. Referrer 校验
2. token 令牌。
   比如阿里云，将令牌直接输出到网页中，如果要进行敏感操作，需要传过去令牌。令牌一次有效，最新有效。
   因为有跨域限制，不同源网页之间无法获取内容。

劫持攻击&中间人攻击

运营商劫持

http 移动端比较多。

1. 不良运营商，非法植入广告。
2. 公共wifi，非法劫持。

中间人攻击

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

1. 信息篡改
   当主机A、和主机B通信时，都由主机C来为其“转发”。而A、B之间并没有真正意思上的直接通信，他们之间的信息传递同C作为中介来完成，但是A、B却不会意识到，而以为它们之间是在直接通信。这样攻击主机在中间成为了一个转发器，C可以不仅窃听A、B的通信还可以对信息进行篡改再传给对方，C便可以将恶意信息传递给A、B以达到自己的目的。
2. 信息窃取
   代理服务器。当A、B通信时，C不主动去为其“转发”，只是把他们的传输的数据备份，以获取用户网络的活动，包括账户、密码等敏感信息。

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

1. 刷票
2. 爬虫

当然，他会有真实的ip，只需要按真实ip过滤即可。
同样，又出现大量的代理。a请求代理，代理请求服务端，这样只能做个池子过滤了。

文件上传

有时候，我们需要做一个富文本编辑器，其中就有上传的功能，我们一般来说是先把他所有实例代码部署。之后先看看是否符合要求。最后接入修改。
问题就出现在了这里。有时一些代码未删除，或者漏删。这个时候就有问题了，因为是测试代码，未限制类型。比如攻击者上传jsp代码。

防护方案

1. 限制可上传类型，比如只可以上传图片类型，视频类型。尽量避免可执行代码。
2. 上传目录控制，尽量使用新的存储。防止走模板引擎
3. 后缀名防护，html替换为txt
4. 上cdn。前端跨域，相对来说可以避免很多问题（跨域也会引起问题，比如图片合成，源会被污染）。

风控

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

1. 刷优惠券、拉新套现

   1. 限制账户（微信账户，手机号）
   2. 限制ip（）
   3. 限制设备（机器码，客户端能获取）

2. 撞库、暴力破解、短信轰炸、邮件轰炸

   1. 限制频率（同一地址每天10次）

说说破解方案。

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

2. 机刷

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

说到底，还是要结合业务。找到具体的控制线。
比如说，根据用户等级，确定用户活跃度，30级以下 10个名额，30级以上 20个名额，80级以上 30个名额，心悦8 40个名额。

CSP (内容安全策略)

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

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

有两种设置方式

1. 服务端返回 Content-Security-Policy HTTP头部
2. 网页中设置 <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">

CSP 限制

1. default-src 默认，给所有配置项设置。
2. child-src WebWorker 和 <frame> <iframe>嵌套浏览上下文。

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

   1. ping
   2. Fetch
   3. XMLHttpRequest
   4. WebSocket
   5. EventSource
4. font-src 加载的字体的有效源@font-face。
5. frame-src <frame> 和 <iframe>的有效源。
6. img-src 图像和图标的有效来源。
7. manifest-src manifest有效源
8. media-src 媒体来源有效<audio>，<video>和<track>元素。
9. object-src <object>，<embed>和<applet>元素。
10. script-src JavaScript的有效源。可以限制行内无效
11. style-src 样式表的有效源。
12. worker-src 指定有效来源Worker，SharedWorker或ServiceWorker脚本。

微信公众号：前端linong

资料

1. 前端培训目录、前端培训规划、前端培训计划
2. 内容安全策略( CSP ) - HTTP | MDN