前端安全--攻与防

免责声明：本章内容大部分来自网络资料收集，小部分为本人编写。我要感谢原作者的奉献精神。由于年代久远，内容来源也相当复杂，我无法一一列出引用来源。如果您的内容被引用，请私信我会在文章中链接或删除。本文为内部技术分享内容，现分享给大家！

## DOS 攻击

###攻击原理：

DOS攻击攻击网站的各个方面，使整个流程无法运行，目的是使服务瘫痪。最常见的就是发送大量请求，导致服务器过载而关闭。

### 注意事项：

- 扩大服务器[有钱公司玩]

- 去高防云服务器【主要是贵】

- 实时监控，屏蔽某些恶意、密集请求的IP段

- 增加接口验证，对部分敏感接口限制单个IP的访问次数

- 缓存静态资源并隔离对源文件的访问，例如CDN加速

## CSRF-跨站请求伪造

### 什么是CSRF 攻击？

CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，并在第三方网站中向被攻击网站发送跨站请求。利用受害者在被攻击网站获得的注册凭据，绕过后台用户验证，冒充用户的目的是在被攻击网站上执行操作。

### CSRF 有哪些危险？

攻击者窃取了您的身份并以您的名义发送恶意请求。 CSRF可以做的事情:以你的名义发送电子邮件、窃取你的账户甚至购买商品、转移虚拟货币、个人隐私泄露和财产安全

### CSRF攻击类型及原理

攻击者构造后端请求地址，通过某种手段诱导用户点击或自动发起请求。如果用户登录了，后台就会认为用户正在操作，并执行相应的逻辑。

#### 主动攻击类型

- 受害者访问a.com并在浏览器中留下a.com的登录状态（例如cookie）

- 攻击者引诱受害者访问网站b.com

- b.com网站存在访问a.com接口的恶意代码（删除/添加/修改等）。浏览器请求头默认会携带a.com网站的cookie。

- 当受害者点击b.com时，b.com会获取a.com的登录凭据，并冒充受害者用户在a.com上执行恶意操作。

#### 被动攻击

- 攻击者在a.com上发布带有恶意链接的帖子或评论（向a.com提交添加、删除和修改的诱导img/form/a标签）

- 当其他处于登录状态的受害者点击评论中的恶意链接时，他们会假装使用受害者的登录凭据发起攻击

- CSRF主要利用受害者的登录凭据发起恶意增删改查，不会窃取受害者的私人信息。

- CSRF攻击的常见类型

**获取类型CSRF**

GET类型的CSRF利用非常简单，只需要一个HTTP请求。通常是这样使用的

受害者访问包含该img的页面后，浏览器会自动向bank.example/withdraw?ac…发送请求

**POST 类型CSRF**

这种类型的CSRF 通常使用自动提交的表单来利用，例如：

访问该页面后，表单会自动提交，相当于模拟用户完成了POST操作。

POST 类型的攻击通常比GET 更严格一些，但仍然不那么复杂。任何个人网站、博客或页面被黑客上传的网站都可能成为攻击源。后端接口的安全不能放在只允许POST上。

**POST类型攻击特征**

- 攻击一般是针对第三方网站发起的，而不是针对被攻击的网站。受损的网站无法阻止攻击的发生。

- 攻击利用受害者在被攻击网站上的登录凭据来冒充受害者提交操作；而不是直接窃取数据。

- 整个过程中，攻击者无法获取受害者的登录凭据，而只是“欺骗”受害者。

- 跨站请求可以通过多种方式进行：图片URL、超链接、CORS、表单提交等。有些请求方式可以直接嵌入第三方论坛和文章中，从而难以追踪。

### CSRF预防措施

#### 防止第三方网站获取cookie，比如设置Chrome的SameSite属性

- Samesite=Strict，这称为严格模式，表示该cookie在任何情况下都不能用作第三方cookie

- Samesite=Lax，这叫宽松模式，比严格模式限制更多：如果请求是这种请求（改变当前页面或者打开新页面）并且也是GET请求，那么这个cookie就可以作为第三方cookie。 （默认）

- 所有情况下均不会携带；

缺点：SameSite试用阶段，兼容性不是很理想。

#### 服务器使用Referer Header和Origin Header进行同源验证。

- 缺点1：攻击者可以部分修改或隐藏Referer

- 缺点2: 某些浏览器或操作会丢失原始标头，例如302 重定向

- 缺点三：HTTPS页面跳转到HTTP页面，所有浏览器Referer丢失。

- 缺点四：无法识别被动攻击

- 其他：一些低版本浏览器对于origin和referer不太稳定，导致各种意想不到的结果，极不稳定。

#### 使用令牌进行身份验证。三方跨站请求无法获取header中的token。本站接口在请求前会在请求头中添加token进行身份认证。三方请求不会携带token。

- 缺点一：Token认证对服务器压力很大。需要搭建专门的服务器进行token认证，消耗服务器成本，增加请求时间。

- 缺点二：对于页面上ajax、fetch等异步请求以外的请求，如表单提交、链接等，需要一一添加token，无法形成统一的token添加入口，存在一些遗漏。相对而言，令牌认证是一种更好的保护措施。

#### 使用双cookie进行认证，在每个请求参数后面附加scrfCookie='随机数'防御参数，并将防御参数值混入cookie中。服务器会将请求头中的cookie中的防御cookie参数与请求参数中的参数进行比较。

缺点：对于前后端分离的代码，后端接口和前端可能有不同的来源。例如前端www.xx.com，后端接口为api.xx.com。前端要获取后端接口域下的cookie，必须将cookie放在xx.com下，以保证所有子域都能获取到。这会增加XSS攻击的风险，得不偿失。

## XSS-跨站脚本攻击

### 什么是跨站脚本攻击？

跨站脚本（Cross-Site Scripting，简称XSS）是一种代码注入攻击。攻击者将恶意脚本注入目标网站，以便它们可以在用户的浏览器上运行。利用这些恶意脚本，攻击者可以获取用户的cookie、SessionID等敏感信息，从而危及数据安全。为了与CSS区别，将攻击的首字母改为X，故称为XSS。

### XSS 攻击有哪些危险？

#### 危险

1、盗取各种用户账户，如机器登录账户、用户网银账户、各种管理员账户

2. 控制企业数据，包括读取、篡改、添加、删除企业敏感数据的能力

3、窃取具有商业价值的重要公司信息

4. 非法转让

5. 强制发送电子邮件

6. 网站恶意软件

7、控制受害者机器对其他网站发起攻击

####案例

1. 2005年，19岁的Samy Kamkar对MySpace.com发起了XSS蠕虫攻击。 Samy Kamkar的蠕虫在短短几个小时内感染了100万用户——。它在每个用户的自我介绍后都添加了一句话：“但最重要的是，Samy是我的英雄。” （萨米是我的偶像）。这是Web安全史上第一个重量级XSS蠕虫，具有里程碑意义。

2、2007年12月，百度空间遭受蠕虫攻击，用户开始互相转发垃圾短信。

3、QQ邮箱m.exmail.qq.com域名发现反射型XSS漏洞。

4 2011年，新浪微博遭到黑客XSS攻击。黑客诱导用户点击诱惑链接，然后自动发送带有相同诱惑链接的微博帖子。攻击范围正在逐层扩大，同样是蠕虫攻击。

### XSS 攻击有哪些类型？

####反射XSS攻击

顾名思义，恶意JavaScript脚本是用户向网站发送的请求的一部分，然后网站将这部分返回给用户，并在页面上执行恶意脚本。一般发生在前后端集成应用中，服务器端逻辑会改变最终的网页代码。

反射型XSS攻击步骤：

1. 攻击者构造一个包含恶意代码的特殊URL。

2、当用户打开带有恶意代码的URL时，网站服务器会从URL中取出恶意代码，拼接成HTML返回给浏览器。

3、用户浏览器收到响应后解析并执行，其中混杂的恶意代码也被执行。

4、恶意代码窃取用户数据并发送给攻击者网站，或者冒充用户行为调用目标网站接口执行攻击者指定的操作。

#### 基于DOM 的XSS 攻击

目前比较流行前后端分离的项目，反射型XSS没有发挥的空间。但这种攻击不需要经过服务器。我们知道网页本身的JavaScript也可以改变HTML。黑客利用它来插入恶意脚本。

基于DOM的XSS攻击步骤：

1. 攻击者构造一个包含恶意代码的特殊URL。

2. 用户打开带有恶意代码的URL。

3、用户浏览器收到响应后，解析并执行。前端JavaScript提取URL中的恶意代码并执行。

4、恶意代码窃取用户数据并发送给攻击者网站，或者冒充用户行为调用目标网站接口执行攻击者指定的操作。

#### 存储型XSS 攻击

也称为持久性XSS，顾名思义，黑客将恶意JavaScript 脚本长期存储在服务器数据库中。一旦用户访问相关页面数据，恶意脚本就会被执行。常见于搜索、微博、社区贴吧评论等。

存储的XSS攻击步骤：

1. 攻击者向目标网站的数据库提交恶意代码。

2、当用户打开目标网站时，网站服务器从数据库中取出恶意代码，拼接成HTML返回给浏览器。

3、用户浏览器收到响应后解析并执行，其中混杂的恶意代码也被执行。

4、恶意代码窃取用户数据并发送给攻击者网站，或者冒充用户行为调用目标网站接口执行攻击者指定的操作。

####各种XSS攻击特点总结

通过上面提到的各种XSS攻击类型，我们可以总结出它们有以下区别：

- 反射型XSS的恶意脚本存储在URL中，存储型XSS的恶意代码存储在数据库中。

- 反射型XSS攻击常见于通过URL传递参数的函数，如网站搜索、跳转等。

- 存储型XSS攻击常见于具有用户保存数据的网站功能，例如论坛帖子、产品评论、用户私信等。

- 基于DOM的XSS攻击中，恶意代码的清除和执行是由浏览器完成的，这是前端JavaScript本身的安全漏洞。另外两类XSS都是服务器端安全漏洞。

### XSS预防措施

从上面对XSS攻击的介绍我们知道，XSS攻击主要有两个步骤：

1.攻击者提交恶意代码

2.浏览器执行恶意代码

所以我们可以根据这两点来制定预防措施：

#### 输入过滤

当用户提交时，前端对输入进行过滤，然后提交给后端。这种方法并不可行，因为攻击者可能绕过前端过滤，直接构造请求，提交恶意代码。通常，后端会在将输入数据写入数据库之前对其进行过滤。输入侧过滤虽然在某些情况下可以解决特定的XSS问题，但是会引入很多不确定性和乱码。在防御XSS 攻击时应避免这种类型的方法。

防止存储和反射的XSS 攻击

- 改为纯前端渲染，代码和数据分离。

- 完全转义HTML：用户输入永远不应该被信任。最常见的方法是对输入和输出内容进行转义，包括方括号、尖括号和斜杠。

````js

函数转义（str）{

str=str.replace(//g, '')

str=str.replace(//g, '')

str=str.replace(/\'/g, 'quto;')

str=str.replace(/'/g, ''')

str=str.replace(/`/g, '`')

str=str.replace(/\\//g, '/')

返回字符串

}

````

#### 防止DOM类型的XSS攻击

DOM型XSS攻击实际上是指网站本身的前端JavaScript代码不够严谨，将不可信的数据作为代码执行。使用.innerHTML、outerHTML 和document.write() 时要特别小心。不要将不受信任的数据以HTML 形式插入到页面中。相反，尝试使用.textContent、setAttribute 等。

如果使用Vue/React技术栈，并且不使用v-html/dangerouslySetInnerHTML函数，可以避免前端渲染阶段innerHTML和outerHTML的XSS风险。 DOM中的内联事件监听器，如location、onclick、onerror、onload、onmouseover等，a标签的href属性，以及JavaScript的eval()、setTimeout()、setInterval()等，都可以将字符串作为代码运行。如果将不可信的数据拼接成字符串传递给这些API，很容易产生安全风险，一定要避免。

## 页面劫持

### 原理

攻击者通过请求的数据传输过程修改数据，或者对网站域名进行泛域名解析以重定向网站、向网站注入广告等。

### 类型

####跳跃式劫持

通过泛域名解析（DNS解析）等方式，将用户访问的页面重定向到其他网站进行恶意竞争，或者重定向到一些钓鱼网站，侵犯用户的个人利益和其他网站的利益和声誉。

#### 注入劫持

拦截、修改网站请求的资源、添加恶意代码或广告等。

## 如何防止网络劫持

- 最有效、最暴力的方法是直接切换到HTTPS建立安全通道。

- 监控漏洞并根据实际情况进行调整

## 点击劫持

### 什么是点击劫持？

点击劫持是一种通过视觉欺骗，诱导用户触发点击来达到攻击目的的手段。

### 点击劫持攻击是如何运作的？

攻击者通过iframe将目标网站嵌入到自己的网页中，并通过不透明等手段将iframe设置为透明，使其肉眼看不见。这样，当用户在攻击者的网站上进行操作时，比如点击一个按钮（这个按钮的顶层实际上是一个iframe），目标网站就被点击劫持了。

### 点击劫持预防措施？

将X-FRAME-OPTIONS 属性添加到HTTP 调用。该属性控制页面是否可以嵌入到iframe 中。有以下三个值：

1. DENY：不能嵌套或被所有网站加载；

2. SAMEORIGIN：只能被同域的网站嵌套或加载；

3. ALLOW-FROM URL：可以嵌套或由指定网站加载。

判断当前网页是否嵌套在iframe中

##Iframe

iframe在给我们的页面带来更加丰富的内容和能力的同时，也带来了很多安全隐患。由于iframe 中的内容是由第三方提供的，因此默认情况下它们不受我们的控制。他们可以在iframe中运行JavaScript脚本、Flash插件、弹出对话框等，这可能会破坏前端用户体验。

### 如何防止我的网站被其他网站的iframe引用？

(1)js防御方案：将以下代码放在网站页面的标签前面，这样当别人通过iframe框架引用你的网站页面时，浏览器就会自动跳转到你的网站引用的页面。

（2）使用X-Frame-Options防止网页被iframe：X-FRAME-OPTIONS是微软提出的一个http header，专门用于防御利用iframe嵌套的点击劫持攻击。它允许配置以下值

X-Frame-Options:DENY //拒绝任何域加载

X-Frame-Options: SAMEORIGIN //允许在同源域下加载

X-Frame-Options: ALLOW-FROM //可以定义允许框架加载的页面地址

### 如何禁止使用的iframe对当前网站执行某些操作？

HTML5 添加了新的沙箱属性以提高iframe 的安全性。 iframe 因安全问题而臭名昭著，主要是因为iframe 经常被用来嵌入第三方，然后执行某些恶意操作。

沙箱应用场景：现在我的网站需要使用iframe来引用某个网站，但又不想让DOM被网站操作，不想加载某些js（广告、弹框等），或者当前窗口被强行重定向到某个链接等。我们可以设置沙箱属性:

-allow-same-origin：允许被视为同源，即操作父DOM或cookie等。

-allow-top-navigation：允许当前iframe的引用网页跳转到链接或通过url加载

-allow-forms：允许表单提交

-allow-scripts：允许执行脚本文件

-allow-popups：允许浏览器打开新窗口进行跳转

- “”：设置为空时，以上全部允许，全部禁止

## CDN 劫持

### CDN原理？

它的名字是CDN——Content Delivery Network，内容分发网络。具体来说，CDN使用较多的缓存服务器（CDN边缘节点），并将其放置在用户访问相对集中的区域或网络中。当用户访问网站时，采用全局加载技术将用户的访问引导到最近的缓存服务器，由缓存服务器响应用户的请求。 （有点像电商本地仓吧？）CDN应用广泛，支持多种行业、多种场景的内容加速，如：小图片文件、大文件下载、视音频点播、直播、全站加速、安全加速等。

### 什么是CDN 劫持？

为了让用户能够登录他们开发的钓鱼网站，互联网上很多黑客都会劫持CDN，让用户自动重定向到他们开发的网站。然而，许多用户往往不知道自己已被劫持。其实验证是否被劫持的方法就是输入任意一个URL，看看打开的网页是否与你输入的URL一致。

### CDN劫持防范措施

使用SRI解决CDN劫持

SRI全称Subresource Integrity——子资源完整性，是指浏览器用来验证资源（通常从CDN获取）的完整性以确定其是否被篡改的安全功能。

可以通过在link标签或script标签中添加integrity属性来启用SRI功能，如下所示：

完整性值分为两部分。第一部分指定了哈希值生成算法（sha256、sha384 和sha512），第二部分是经过Base64 编码的实际哈希值，以破折号（-）分隔。完整性值可以包含多个用空格分隔的哈希值。只要文件匹配任何哈希值，就可以验证并加载资源。启用SRI可以有效保证页面引用资源的完整性，避免恶意代码执行。

浏览器如何处理SRI

- 当浏览器在脚本或链接标记中遇到完整性属性时，它会在执行脚本或应用样式表之前将加载文件的哈希值与预期的哈希值进行比较。

- 当脚本或样式表的哈希值与预期不匹配时，浏览器必须拒绝执行脚本或应用样式表，并且必须返回网络错误，指示无法获取脚本或样式表。

## 内容安全策略(CSP)

### 什么是CSP？

内容安全策略（CSP），简称CSP，是一个附加的安全层，用于检测和削弱某些类型的攻击，包括跨站脚本攻击（XSS）和数据注入攻击。它可以清楚地告诉客户端浏览器当前页面哪些外部资源可以加载执行，哪些不能。

### CSP原理

CSP的本质是白名单系统。开发者明确告诉客户端哪些外部资源可以加载执行，相当于提供了一个白名单。它的实现和执行全部由浏览器完成，开发者只需要提供配置即可。 CSP大大增强了网页的安全性。即使攻击者发现漏洞，他或她也无法注入脚本，除非他还控制着列入白名单的可信主机。

### CSP的含义

1. CSP 的主要目标是减少和报告XSS 攻击，这种攻击利用浏览器对从服务器获取的内容的信任。恶意脚本能够在受害者的浏览器中运行，因为浏览器信任内容的来源，即使有时脚本并非来自它应该来自的地方。

2. CSP 使服务器管理员能够通过指定有效域来减少或消除XSS 攻击所依赖的向量，这些域是浏览器识别的可执行脚本的有效来源。符合CSP 的浏览器将仅执行从白名单域获取的脚本文件，忽略所有其他脚本（包括内联脚本和HTML 事件处理属性）。作为最终的保护形式，从不允许脚本执行的站点可以选择完全禁用脚本执行。

### CSP的分类

- 一旦配置并启用Content-Security-Policy，不符合CSP的外部资源将被阻止加载。

- Content-Security-Policy-Report-Only 表示不强制执行限制选项，仅记录违反限制的情况。它必须与report-uri 选项一起使用。

### 如何启用CSP？

(1) 通过HTTP头配置Content-Security-Policy。以下配置表示该页面只允许加载并执行当前来源和apis.baison.com 的脚本：

(2)通过页面标签进行配置，如下