这是我参与「第四届青训营」笔记创作活动的第5天

笔记的主要内容分为两个部分：攻击篇与防御篇。讲述了关于前端开发中需要注意的前端安全问题。

当我们在搜索引擎搜索信息时，会有非常多的网站被检索到。

安全问题“很常见”，会危害用户、公司、以及程序员。

两个角度看Web安全

• 假如你是一个Hacker（黑客）————攻击
• 加入你是一个开发者————防御

攻击篇

Cross-Site Scripting(XSS)跨站脚本攻击

简介：人们经常将跨站脚本攻击(Cross Site Scripting)缩写为CSS，但这会与层叠样式表(Cascading Style Sheets, CSS)的缩写混淆。因此有人将跨站脚本攻击缩写为XSS。

用户在浏览网站、使用即时通讯软件、甚至在阅读电子邮件时，通常会点击其中的链接。攻击者通过在链接中插入恶意代码，就能够盗取用户信息。攻击者通常会用十六进制（或其他编码方式）将链接编码，以免用户怀疑它的合法性。网站在接收到包含恶意代码的请求之后会产成一个包含恶意代码的页面，而这个页面看起来就像是那个网站应当生成的合法页面一样。许多流行的留言本和论坛程序允许用户发表包含HTML和javascript的帖子。假设用户甲发表了一篇包含恶意脚本的帖子，那么用户乙在浏览这篇帖子时，恶意脚本就会执行，盗取用户乙的session信息。

XSS特点

• 通常难以从UI上感知（暗地执行脚本）
• 窃取用户信息（cookie/token）
• 绘制UI（例如弹窗），诱骗用户点击/填写表单

Stored XSS

• 恶意脚本被存在数据库中
• 访问页面 -> 读数据 ===被攻击
• 危害最大，对全部用户可见

Reflected XSS

• 不涉及数据库
• 从 URL（链接）上攻击

DOM-based XSS

• 不需要服务器参与
• 恶意攻击的发起与执行均在浏览器内完成

Mutation-based XSS

• 利用了浏览器渲染DOM的特性（独特优化）
• 不同浏览器会有区别（按浏览器进行攻击）

Cross-site request forgery(CSRF)

跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。会构造指定HTTP请求，窃取或修改用户敏感信息。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。

Injection

SQL注入攻击

不止于SQL

• CLI
• OS command
• Server-Side Request Forgery(SSRF)(严格而言，SSRF不是Injection，但是原理类似)

SSRF

SSRF为服务器请求伪造，是一种右攻击者形成服务器端发起的安全漏洞。

有些web网站会提供从其他服务器上传数据的功能，会使用用户指定的url获取数据。由于对远程的url没有进行严格的过滤，所以攻击者可以通过该漏洞控制该web网站作为代理服务器攻击远程服务器或者该web的本地服务器。

正则表达式————贪婪模式

重复匹配时【?】vs【no?】：满足“一个”即可 vs 尽量多

ReDoS：基于正则表达式的DoS

Logical DoS

• 耗时的同步操作
• 数据库写入
• SQL join
• 文件备份
• 循环执行逻辑

DDoS

DDoS为分布式拒绝服务攻击。分布式拒绝服务攻击可以使很多的计算机在同一时间遭受到攻击，使攻击的目标无法正常使用，分布式拒绝服务攻击已经出现了很多次，导致很多的大型网站都出现了无法进行操作的情况，这样不仅仅会影响用户的正常使用，同时造成的经济损失也是非常巨大的。

传输层

传输层是整个网络体系结构中的关键层次之一，主要负责向两个主机中进程之间的通信提供服务。由于一个主机同时运行多个进程，因此运输层具有复用和分用功能。传输层在终端用户之间提供透明的数据传输，向上层提供可靠的数据传输服务。传输层在给定的链路上通过流量控制、分段/重组和差错控制来保证数据传输的可靠性。传输层的一些协议是面向链接的，这就意味着传输层能保持对分段的跟踪，并且重传那些失败的分段。

补充：OSI是一个开放性的通信系统互连参考模型，它是一个定义得非常好的协议规范。OSI模型有7层结构，每层都可以有几个子层。 OSI的7层从上到下分别是 7 应用层 6 表示层 5 会话层 4 传输层 3 网络层 2 数据链路层 1 物理层

防御篇

XSS

• 永远不信任用户的提交内容
• 不要将用户提交内容直接转换成DOM

XSS——现成工具

前端

• 主流框架默认防御XSS
• google-closure-library

服务端(Node) -DOMPurify

XSS——动态生成DOM

• string -> DOM new DOMParser()

• 上传svg

<svg><script>alert ("xss") </script></svg>

• Blob动态生成Script
• 自定义跳转链接
• 自定义样式

Content Security Policy (CSP)

• 哪些源（域名）被认为是安全的
• 来自安全源的脚本可以执行，否则直接抛错
• 对eval + inline script 说 禁止

CSRF

• 请求头部
• 表单token检测

1）用户绑定：攻击者也可以是注册用户 === 可以获取自己token 2) 过期时间：【前向保密】

SameSite

与CORS的对比

SameSite

• Cookie发送
• domain vs 页面域名
• 有限制性

CORS

• 资源读写（HTTP请求）
• 资源域名 vs 页面域名
• 白名单

Injection

• 找到项目中查询SQL的地方
• 使用 prepared statement

Dos

• Regex Dos
• Logical Dos

DDos

过滤

• 流量治理
• 负载均衡
• API网关

抗量

• CDN
• 快速自动扩容
• 非核心服务降级

HTTPS

HTTPS （全称：Hyper Text Transfer Protocol over SecureSocket Layer），是以安全为目标的 HTTP 通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。HTTPS 在HTTP 的基础下加入SSL，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。 HTTPS 存在不同于 HTTP 的默认端口及一个加密/身份验证层（在 HTTP与 TCP之间）。这个系统提供了身份验证与加密通讯方法。

HTTPS一些特性

• 可靠性：加密
• 完整性：MAC验证
• 不可抵赖性：数字签名

写在最后

安全无小事，前端安全很重要。这部分内容的笔记写的有些简略。在日后有机会会再进行修改。笔记中部分资料查自百度百科。有错误请大家指出，共同学习！