# 安全漏洞防护

## XSS 跨站脚本攻击

> XSS 攻击（Cross-Site Scripting），又称跨站脚本攻击，是一种常见的网络安全漏洞。
>
> 攻击者通过在网页中注入恶意脚本代码，当用户访问该页面时，恶意脚本将被执行，攻击者就可以利用这些脚本做一些非法的事情，例如盗取用户的 Cookie、密码、账号等重要信息，或者让用户执行一些危险操作，如更改网页内容、跳转到其他页面等。
>
> XSS 攻击常见的手段是在表单、URL 参数、Cookie、HTTP 头等输入位置中注入恶意脚本代码，通过这些途径攻击者可以向用户呈现与原始网页看似一样的页面，从而骗取用户的信任，让用户自行执行攻击者预设的恶意操作。

常见预防:

1. 输入检查和过滤：对输入的数据进行过滤和校验，**过滤掉特殊字符**，限制输入的数据类型、长度等，确保输入的数据是安全的。  
2. 输出编码：在输出数据到页面前，将所有**特殊字符转换为 HTML 实体**或 JavaScript 字符串，防止被浏览器解释执行。
3. 使用**CSP**：Content Security Policy (CSP) 是一个安全标头，可帮助减少和防止跨站点脚本 (XSS)、点击劫持和其他代码注入攻击，限制页面加载和执行的脚本来源，只允许特定的域名或者 URL 能够加载和执行脚本。
4. 使用**HttpOnly**标志：HttpOnly 是一个 cookie 属性，可以防止 cookie 被 JavaScript 访问，防止 XSS 攻击窃取 cookie。
5. 限制权限：限制客户端的执行权限，使用沙盒机制隔离可疑代码。

其中:

* 将所有特殊字符转换为 HTML 实体

```js
function escapeHtml(text) {
  return text.replace(/[&<>"']/g, function(match) {
    switch(match) {
      case '&':
        return '&amp;';
      case '<':
        return '&lt;';
      case '>':
        return '&gt;';
      case '"':
        return '&quot;';
      case "'":
        return '&#039;';
    }
  });
}

console.log(escapeHtml('Hello, "world"!')); // 输出：Hello, &quot;world&quot;!
```

* HTML 5 引入了沙盒机制，可以用来隔离不可信代码。

```html
<iframe sandbox="allow-scripts" src="http://example.com"></iframe>
```

* Web Worker 是浏览器提供的一种 JavaScript 线程，可以在主线程之外运行代码，可以用来处理耗时的任务，同时还可以用来增强网页的安全性，防止 XSS 攻击

```js
// 主线程中
const worker = new Worker('worker.js');

// 监听消息
worker.onmessage = function(event) {
  // 处理返回结果
  console.log('结果：', event.data);
};

// 发送消息
const html = '<script>alert("xss");</script>';
worker.postMessage(html);

// worker.js 中
onmessage = function(event) {
  const html = event.data;
  const encodedHtml = encodeHTML(html);
  // 发送返回结果
  postMessage(encodedHtml);
};

function encodeHTML(html) {
  // 将特殊字符转换为实体
  return html.replace(/&/g, '&amp;')
             .replace(/</g, '&lt;')
             .replace(/>/g, '&gt;')
             .replace(/"/g, '&quot;')
             .replace(/'/g, '&#39;');
}
```

## CSRF 跨站请求伪造

> CSRF（Cross-Site Request Forgery）跨站请求伪造，是一种攻击技术，攻击者通过伪装成合法用户的请求来执行某些操作，例如更改账户密码或者发表恶意评论等。
>
> 攻击者利用用户已经通过身份验证的状态下在站点中保留的身份验证信息，在受害者不知情的情况下发送伪装的请求。一旦受害者打开这些伪装请求的网站，攻击者就可以访问他们在网站上的账户并执行操作。

举例: 在黑客的网站上, `<img url="htttp://deleteUserUrl?id=xxx" />`,

常见预防措施:

1. 验证来源：在服务端对每个请求进行验证，确保请求来源于合法的网站。可以通过检查 HTTP 请求头中的**Referer字段**来验证请求的来源。但是，需要注意的是，Referer 字段可以被修改，因此，不应该完全依赖它来验证请求来源。
2. 添加CSRF Token：在每个表单或请求中添加一个 CSRF Token 字段，并在服务端进行验证。在用户访问页面时，服务器可以将一个随机生成的 CSRF Token 添加到页面中。在每个表单或请求中，都需要包含这个 Token，然后在服务端进行验证。这样可以确保每个请求都是由合法的用户发起的。
3. 添加**SameSite 属性**：可以将 Cookie 的 SameSite 属性设置为 Strict 或 Lax。这样可以防止浏览器在发送跨站点请求时自动携带 Cookie，从而防止 CSRF 攻击。
4. 使用双重 Cookie 验证：可以使用一种双重 Cookie 验证的方式，即在客户端使用 Cookie 存储 Token，在服务端使用另一个 Cookie 存储 Token 的散列值。当客户端发送请求时，服务端会将 Token 的散列值发送给客户端，客户端需要将散列值与 Token 进行比较，如果匹配，才能发起请求。
5. 使用**HTTP Only**属性：可以将 Cookie 的 HTTP Only 属性设置为 true。这样可以防止 JavaScript 代码访问 Cookie，从而防止攻击者获取 Cookie。
6. 加**验证码**