前端安全

 at 06:43(Updated)

XSS

XSS(Cross-site scripting) 是一种网站应用程式的安全漏洞攻击，是代码注入的一种。它允许恶意使用者将程式代码注入到网页上，其他使用者在观看网页时就受到影响。这类攻击通常包含了 HTML 以及使用者端脚本语言

XSS 攻击分为三种：反射型，存储型，DOM-based

攻击方式

<!-- http://wwww.xxx.com?name=<script>alert(1)</script> -->
<div>{{ name }}</div>

上述 URL 输入可能会将 HTML 改为 <div><script>alert(1)</script></div>，这样页面中就凭空多了一段可执行脚本。这种攻击类型是反射型攻击，也可以说是 DOM-based 攻击

防御方式

最普遍的做法就是转义输入输出的内容，对于引号，尖括号，斜杠进行转义

function escape(str) {
  str = str.replace(/&/g, "&amp;");
  str = str.replace(/</g, "&lt;");
  str = str.replace(/>/g, "&gt;");
  str = str.replace(/"/g, "&quto;");
  str = str.replace(/'/g, "&##39;");
  str = str.replace(/`/g, "&##96;");
  str = str.replace(/\//g, "&##x2F;");
  return str;
}

通过转义可以将 <script>alert(1)</script> 变成 &lt;script&gt;alert(1)&lt;&##x2F;script&gt;

对于富文本来说，不能通过上面的办法来转义所有字符，因为这样会把需要的格式也过滤掉。这种情况通常采用白名单过滤的方式，当然也可以通过黑名单过滤，但是考虑到需要过滤的标签和标签属性是在太多，更加推荐使用白名单的方式

const xss = require('xss')
const html = xss('<h1 id="title">XSS Demo</h1><script>alert("xss");</script>')
// <h1>XSS Demo</h1>&lt;script&gt;alert("xss");&lt;/script&gt;

CSRF

CSRF(Cross-site request forgery) 就是利用用户的登录状态发起恶意请求 CSRF - 跨站请求伪造，是一种常见的攻击方式。指 A 网站正常登录后，cookie 正常保存登录信息，网站 B 通过某种方式调用 A 网站接口进行操作，网站 A 的接口会在请求时自动带上 cookie

攻击方式

403560712-54fdb1994e6c50a3_fix732

防御方式

CSRF 攻击，仅仅是利用了 http 携带 cookie 的特性进行攻击，但是攻击站点还是无法得到被攻击站点的 cookie。与 XSS 不同，XSS 是直接通过拿到 Cookie 等信息进行攻击

CSRF 怎么获取用户的登录态

攻击全程不需要获取 cookie，只是在危险的网站欺骗用户去点击已登录的网站链接，利用已登录的网站自动发送 cookie 达到目的、因为 http 请求都会带着请求目标域下的 cookie，向同一个服务器发请求时会带上浏览器保存的 cookie，不管从哪个网站向目标网站发请求

点击劫持

点击劫持就像是将一个危险网站设置透明，然后在其上方设置一个按钮，当你点击这个按钮的时候，就会触发底部恶意网站的某些事件

防御方式

XS-Leaks

XS-Leaks 即跨站泄露。 XS-Leaks 利用了对 HTTP 缓存进行查询的机制，通过对资源缓存的判断进而推断出当前用户的相关信息。

攻击方式

XS-Leaks 攻击的主要流程如下：

2522384929-9f77456b1e725da9_fix732

防御方式

CSRF 的防御手段同样可以让 XS-Leaks 对带鉴权的请求访问无效，从而降低危险。当然有些时候这种攻击其实并不需要鉴权就能达成目的，因此 CSRF 的防御手段并不能做到完美抵御，所以在浏览器层面增加缓存分区就显得非常有必要了