前端培训-中级阶段（13、15）- web网络攻击、CSP内容安全策略（2019-08-29期）

转载自 SegmentFault

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

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

• XSS (跨站脚本攻击)

• CSRF (跨站请求伪造)

劫持

运营商劫持

• 中间人攻击

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

• 文件上传

风控

刷优惠券

• 拉新套现

• 撞库、暴力破解

• 短信轰炸、邮件轰炸

• CSP (内容安全策略)

XSS 跨站脚本攻击

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

xss 攻击场景

• 评论区，<input>标签 输入，<div>标签 输出 <input value="xss"> 本意是输入一段文字，结果显示成了输入框

• 个人资料编辑，<input>标签 输入，<input>标签 输出 "><script>alert()</scrpit> 本意是编辑文本，结果因为拼接导致字符串被异常隔开。

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

• url 填写处，a 链接或者 img 图片 https://lilnong.top " onclick="alert(1)" 判断url合法，防止拼接异常

xss 防御方法

• 富文本使用白名单区分。

输出，使用插值或转义

插值 innerText setAttribute()

• 转义 <变成<、"变成"等

url处理，插值或过滤

推荐使用插值

• encodeURI

CSRF 跨站请求伪造

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

CSRF 攻击场景

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

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

CSRF 防护

Referrer 校验

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

劫持攻击&中间人攻击

运营商劫持

http 移动端比较多。

• 不良运营商，非法植入广告。

• 公共wifi，非法劫持。

中间人攻击

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

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

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

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

• 刷票

• 爬虫

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

文件上传

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

防护方案

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

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

• 后缀名防护，html替换为txt

• 上cdn。前端跨域，相对来说可以避免很多问题（跨域也会引起问题，比如图片合成，源会被污染）。

风控

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

刷优惠券、拉新套现

限制账户（微信账户，手机号）

• 限制ip（）

• 限制设备（机器码，客户端能获取）

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

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

说说破解方案。

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

机刷

ip限制。代理池

• 账号限制。和多号，阿里小号，等等一些平台，低价账号，然后养号。

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

CSP (内容安全策略)

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

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

有两种设置方式

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

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

CSP 限制

default-src 默认，给所有配置项设置。

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

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

ping

• Fetch

• XMLHttpRequest

• WebSocket

• EventSource

• font-src 加载的字体的有效源@font-face。

• frame-src <frame> 和 <iframe>的有效源。

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

• manifest-src manifest有效源

• media-src 媒体来源有效

• object-src