前端安全

[tiantingrui]

你了解哪些前端安全相关的只是？或者说了解那些名词？

浏览器相关：

1. XSS
2. CSRF
3. HTTPS
4. CSP (内容安全策略，可以禁止加载外域的代码，禁止外域的提交)
5. HSTS (强制客户端使用HTTPS与服务端建立链接)
6. X-Frame-Options（控制当前页面是否可以被嵌入到iframe中）
7. SRI（subresource intergrity 子资源的完整性）
   1. terry-sshid3223jis.js 注入到 index.html, 并且上传到 cdn
   2. 用户在请求的时候，根据terry-sshid3223jis.js去请求，而这个文件可能被篡改
   3. 打包的时候根据 js文件内容生成一个 hash 值，并且把 hash 值作为 intergrity属性注入到 script 上
8. Referrer-Policy（控制 referrer 的携带策略）

Node(服务端)相关：

1. 本地文件操作相关，路径拼接导致的文件泄露(ssh、host、etc)
2. ReDos（正则表达式攻击）
3. 时序攻击
4. ip origin referrer request headers

[tiantingrui]

详细的聊一聊XSS

1. 概念
2. 攻击类型
3. 如何防范
4. 自己工作中是否遇到？如何解决的？

Cross-site scripting, XSS

攻击者想尽一切办法可执行代码 注入到网页中.

外在表现上，都有哪些攻击场景呢？

1. 评论区植入 js 代码（即可输入的地方）
2. url 上拼接 js 代码

技术角度上，有哪些类型的XSS攻击？

1. 存储型 Server

论坛发帖，商品评价，用户私信等等这些用户保存数据的网站

攻击步骤：

• 攻击者将恶意代码提交到目标网站的数据库中
• 用户打开目标网站的时候，服务端将评论（恶意代码）从数据库中取出，拼接到 html 返回给浏览器
• 用户浏览器收到 html 后，混在其中的恶意代码就会被执行
• 窃取用户数据，发送到攻击者网站

2. 反射型 Server

攻击者结合各种手段，诱导用户点击恶意 url (广告)

通过URL传参数的功能，比如网站的搜索或者跳转等

攻击步骤：

• 攻击者构造出 自己恶意的url
• 直接执行可执行的恶意代码

3. DOM型 Browser

取出和执行恶意代码的操作，由浏览器完成。

攻击步骤： url 参数中写入可执行脚本，然后用户点击相关链接执行了恶意脚本

如何去防范 XSS 攻击？

主旨：防止攻击者提交恶意代码，防止浏览器执行恶意代码！

1. 对数据进行严格的输入编码，比如 html 元素，js,css,url vue v-html react dangerouslyHtml

2. CSP content Security Policy 内容安全策略 （X-XSS-Protection） default-src 'self' 所有加载的内容必须来自站点的同一个源

   • .terry.com

3. 输入验证 phone，URL，电话号码，邮箱

4. 开启浏览器的XSS防御：Http Only Cookie

5. 验证码

[tiantingrui]

能再稍微详细聊一下 CSRF吗？

Cross-site request forgery, 跨站请求伪造

攻击步骤

1. 受害者登录 a.com，并且保留了登录凭证 cookie
2. 攻击者诱导受害者访问了 b.com
3. b.com 向 a.com 发送请求，a.com/xxxx，浏览器会直接带上 a.com的 cookie
4. a.com 收到请求了，忠实执行了对应操作
5. 攻击者在受害者并不知情的情况下，冒充受害者让 a.com 执行了自己定义的操作

a.com/act/withdraw?num=12453

攻击类型

• GET型：在页面中的某个 img 发起一个 GET 请求

<img src="xxxxx">

• POST型：自动提交表单到恶意网站

<form method="POST"> 
  <input type="hidden" name="account" value="terry">
</form>
<script>document.forms[0].submit()</script>

• 诱导用户点击链接

<a href="xxx" />

如何防范CSRF攻击

CSRF一般都是发生在第三方域名，攻击者无法获取到cookie 信息的。

1. 阻止第三方域名的访问

1. 同源检测

request header origin referrer Referrer-Policy （用来监管哪些访问来源信息 - 会在 referrer 中发送）

2. Cookie SameSite

Strict: 浏览器会完全禁用第三方cookie Lax: POST img iframe 不会携带 cookie None: 什么都可以，和之前一样

2. 提交请求的时候附加额外信息

1. CSRF Token

• 用户打开页面的时候，服务器利用加密算法生成一个Token
• 每次页面加载的时候，前端把获取到的 Token, 加到能够发送请求的Html元素上，比如form , a
• 每次js 发起请求，也都携带Token
• 服务器每次接收请求时，就校验Token的有效性

2. 双重Token

• 用户在访问网站的时候，服务器向浏览器注入一个额外的cookie, 内容随便，比如：csrfcookie=terry
• 每次前端发起请求，都去拼上一个参数 csrfcookie=terry
• 服务校验csrfcookie=terry 是否正确

cookie肯定不是 http only.

1. 如果前端域名和服务器域名不一致，比如前端 fe.a.com， 服务端 rd.a.com,cookie 只能种到 .a.com 上，并且设置为 非 http only
2. a.com 下的每个子域名都可以获取到这个 cookie
3. 一旦某个子域名遭到了 xss攻击，cookie很容易被窃取和篡改

[tiantingrui]

本地文件操作 Node

比如我们提供一个静态服务，通过请求的参数url 来返回给用户/前端想要的资源.(有可能访问到其他目录下的文件)

• express.static
• koa-static
• resolve-path

const fs = require("fs");
const http = require("http");
const path = require("path");

const resovlePath = require("resolve-path");

http
  .createServer(function (req, res) {
    try {
      const rootDir = path.join(__dirname, "static");
      const file = path.join(rootDir, req.url);
      fs.readFile(file, function (err, data) {
        if (err) {
          // res.writeHead(404, { "Content-Type": "text/plain;charset=utf-8" });
          // res.end("找不到对应资源");
          // return;
          throw err;
        }

        res.writeHead(200, { "Content-Type": "text/plain;charset=utf-8" });
        res.end(data);
      });
    } catch (error) {
      console.log(error);
      res.writeHead(404, { "Content-Type": "text/plain;charset=utf-8" });
      res.end("找不到对应资源");
    }
  })
  .listen(8008);

console.log("server is listening on port 8008");