前端安全

XSS

XSS （Cross Site Scripting）跨站脚本攻击

（1）原理：页面渲染的数据中包含可运行的脚本

（2）攻击的基本类型：反射型（url 参数直接注入）和存储型（存储到 DB 后读取时注入）

（3）注入点：HTML 节点内的内容（text）；HTML 中 DOM 元素的属性；Javascript 代码；富文本

//HTML节点内容注入
<div>
  <script>
    alert(1);
  </script>
</div>

//DOM属性注入
<img src="/images/1.png" onerror="alert(1);" />

//javascript代码
<script>
  var a = "1";
  alert(1);
  ("");
</script>

//富文本是html标签，文字，以及样式的集合，很容易实现HTML节点内容注入和DOM属性注入，有被攻击的风险

XSS 攻击防御

1. CSP 内容安全策略 (opens new window)，主流浏览器都实现了 CSP。

配置内容安全策略涉及到添加 Content-Security-Policy HTTP 头部到一个页面，并配置相应的值，以控制用户代理（浏览器等）可以为该页面获取哪些资源。比如一个可以上传文件和显示图片页面，应该允许图片来自任何地方，但限制表单的 action 属性只可以赋值为指定的端点。一个经过恰当设计的内容安全策略应该可以有效的保护页面免受跨站脚本攻击。 (MDN)

启用 CSP 的两种方式：

（1）一种是通过 HTTP 头信息的 Content-Security-Policy 的字段

（2） 通过网页的<meta>标签 <meta http-equiv="Content-Security-Policy" content="script-src 'self'">

参考：https://www.ruanyifeng.com/blog/2016/09/csp.html (opens new window)

2. 通过设置 HttpOnly 防止 Cookie 被读取。

3. 前端对用户的输入进行检查转义，建立白名单，只允许安全的字符和 HTML 标签存在：

4. 前端逻辑比较容易被绕过，所以后端也要对接收的数据进行检查过滤，并在输出或者拼接 HTML 的时候进行编码、转义。

CSRF

CSRF（Cross Site Request Forgy）跨站请求伪造

原理：在第三方网站向本网站发起请求

CSRF 攻击防御：

1. Referer 字段

   在 http 的请求头里，有一个 Referer 字段，记录了 http 请求的来源地址，服务端通过检查这个字段，判断请求是否来自合法地址。但需要注意的是，Referer 字段是由浏览器来进行添加的，所以存在被篡改的可能。

2. 验证机制

   通常 CSRF 是在用户不知情的情况下发送请求进行攻击的，所以可以利用验证机制强制用户与网站进行交互，例如发送验证码到用户的手机、邮箱，或者需要用户拼图、填写验证码等。但验证机制对于用户体验不太好，而且并不是所有操作都能加上验证的。

3. token

   服务端在用户登录后，签发一个随机的 token，可以埋在页面中，也可以存储在 sessionStorage 中，然后在客户端设置拦截器，为所有请求加上 token，服务端再设置拦截器，检查请求是否拥有 token。因为同源策略（协议、域名、端口相同为同源）的原因，CSRF 并不能拿到 token

点击劫持

原理：第三方网站通过 iframe 内嵌某一个网站，并且将 iframe 设置为透明不可见，将其覆盖在其他经过伪装的 DOM 上，伪装的可点击 DOM（按钮等）与实际内嵌网站的可点击 DOM 位置相同，当用户点击伪装的 DOM 时，实际上点击的是 iframe 中内嵌的网页的 DOM 从而触发请求操作

特点：用户自己做了点击操作；用户毫不知情；

点击劫持攻击防御

1. Javascript 禁止内嵌：当网页没有被使用 iframe 内嵌时，top 和 window 是相等的；当网页被内嵌时，top 和 window 是不相等的；可以在本网站的页面中添加如下判断：

<script>
if(window != window.top){
    window.top.location.href = window.location.href;
}
</script>

等价于 X-Frame-Options: DENY

但是这种方式并不是万能的，因为 iframe 标签中的属性 sandbox 属性是可以禁用内嵌网页的脚本的：

<iframe sandbox='allow-forms' src='...'></iframe>

2. 设置 http 响应头 X-Frame-Options：有三个值 DENY（禁止内嵌） SAMEORIGIN（只允许同域名页面内嵌） ALLOW-FROM（指定可以内嵌的地址）

能在所有的 web 服务器端预设好 X-Frame-Options 字段值是最理想的状态。

3. 一些辅助手段，比如添加验证码，提高用户的防范意识

中间攻击人

中间人攻击(Man-in-the-MiddleAttack，简称“MITM 攻击”)是指攻击者与通讯的两端分别创建独立的联系，并交换其所收到的数据，使通讯的两端认为他们正在通过一个私密的连接与对方 直接对话，但事实上整个会话都被攻击者完全控制。

中间人攻击可分为如下五种不同的类型：

1. Wi-Fi 欺骗：攻击者可以创建与本地免费 Wi-Fi 同名的虚假 Wi-Fi 接入点(AP)。例如，在上例的咖啡馆中，攻击者会模仿创建一个和墙上贴着 Wi-Fi 信息同名“Guest Wi-Fi”。一旦您连接上去，您的一切在线网络行为，将尽在攻击者的监控和掌握之中。

2. HTTPS 欺骗：攻击者通过欺骗您的浏览器，使您认为自己访问的是可信任站点。当您输入与该站点相关的登录凭据时，您的流量将被重定向到攻击者自建的非安全站点处。

3. SSL 劫持：通常，当您尝试连接或访问不安全的 HTTP://站点时，您的浏览器会自己将您重定向到安全的 HTTPS://处。此时，攻击者则可以劫持该重定向的过程，将指向其自建服务器的链接植入其中，进而窃取您的敏感数据、以及输入的所有信任凭据。

4. DNS 欺骗：为了准确地浏览到目标网站，域名系统会将地址栏中的 URL，从人类易于识别的文本格式，转换为计算机易于识别的 IP 地址。然而，DNS 欺骗则会迫使您的浏览器，在攻击者的控制下，发生转换异常，而去访问那些被伪造的地址。

5. 电子邮件劫持：如果攻击者获得了受信任机构(例如银行)的邮箱、甚至是邮件服务器的访问权限，那么他们就能够拦截包含敏感信息的客户电子邮件，甚至以该机构的身份发送各种电子邮件。

HTTPS 是否可以阻止中间人攻击?

HTTPS 能够防止基本的中间人攻击。但是 SSLStrip 类型的中间人攻击，强制将浏览器“卡”在旧的 HTTP 模式，我们可以采用 HTTP 严格传输安全性(HTTP Strict Transport Security，HSTS)。它能够强制要求 Web 服务器与所有用户仅使用 HTTPS 进行交互。

几种常见的防范中间人攻击的方法：

1. 使用 HTTPS：确保您只访问那些使用着 HTTPS 的网站。如前所述，HTTPS 提供了额外的安全保护层。在此，您可以考虑下载并安装 Electronic Frontier Foundation 的 HTTPS Everywhere 浏览器扩展程序。它是 Google Chrome 浏览器最好的隐私扩展程序之一。

2. 不要忽略警告：如果您的浏览器提示，您正在访问的网站存在着安全问题，那么就请引起足够的重视。毕竟安全证书警告可以帮您直观地判定，您的登录凭据是否会被攻击者截获。

3. 不要使用公共 Wi-Fi：如果您无法避免使用公共 Wi-Fi，那么请下载并安装安全防护，为连接增加安全性。同时，在使用公共 Wi-Fi 连接时，请留意浏览器的安全警告。如果警告的数量突然猛增，那么很可能就表明某个漏洞遭到了中间人攻击。

项目安全

接口加密

token 认证

接口防刷

其它