攻击

xss攻击

也叫跨站脚本攻击

本质

恶意代码未经过滤，与网站正常的代码混在一起，浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。

由于直接在用户的终端执行，恶意代码能够直接获取用户的信息，利用这些信息冒充用户向网站发起攻击者定义的请求。

利用了用户对特定 Web 应用程序的信任

csrf攻击

也叫跨站请求伪造攻击

本质

它强制经过身份验证的用户向当前对其进行身份验证的 Web 应用程序提交请求。利用了 Web 应用程序对经过身份验证的用户的信任。

如果 CSRF 攻击无法区分单个用户生成的请求和未经用户同意而生成的请求，则它会利用 Web 应用程序中的漏洞

如何工作？

强制用户提交状态更改请求。

例如：

提交或删除记录。
提交交易。
购买产品。
更改密码。
发送消息。

防范：

通过 CSRF 令牌，CSRF 令牌是用于防止 CSRF 攻击的安全随机令牌。令牌是唯一的，并且应该具有很大的随机值以使其难以猜测。

CSRF 安全应用程序为每个用户会话分配一个唯一的 CSRF 令牌。这些标记被插入到与关键服务器端操作相关的 HTML 表单的隐藏参数中。然后将它们发送到客户端浏览器。

DOMPurify

参考：
https://github.com/cure53/DOMPurify

下载

npm i dompurify

引入

import DOMPurify from 'dompurify'

将脏字符串转化为干净字符串

const res = DOMPurify.sanitize(this.str)

例子：

// 插值表达式 // template 代表组件要渲染的结构
<template>
  <div id="app">
    <!-- 解析标签 -->
    <!-- 不安全 -->
    <div v-html="str"></div>
    <!-- 安全 -->
    <div v-html="clean()"></div>
  </div>
</template>

// script 用于提供组件的逻辑代码，需要默认导出一个对象
<script>
import DOMPurify from 'dompurify'
export default {
  data() {
    return {
      str: '<img src="https://img.syt5.com/2019/1105/20191105050742778.jpg.564.300.jpg" οnlοad="console.log(123)"/>'
    }
  },
  methods: {
    clean() {
      const res = DOMPurify.sanitize(this.str)
      console.log(res)
      return res
    }
  }
}
</script>

// style 用于提供组件的样式
<style></style>

CSP安全策略

参考：
https://content-security-policy.com/

https://blog.csdn.net/weixin_47450807/article/details/123224654

介绍

CSP 本质上就是建立白名单，开发者明确告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截是由浏览器自己实现的。我们可以通过这种方式来尽量减少 XSS 攻击。

开启方式

通常可以通过两种方式来开启 CSP：

设置 HTTP Header 中的 Content-Security-Policy


"Content-Security-Policy":策略
"Content-Security-Policy-Only":策略

设置 meta 标签的方式

<meta http-equiv="Content-Security-Policy" content="script-src 'self'">

如果HTTP头与Meta定义同时存在，则优先采用HTTP中的定义

写法

例如

// 限制所有的外部资源，都只能从当前域名加载
Content-Security-Policy: default-src 'self'

// default-src 是 CSP 指令，多个指令之间用英文分号分割；多个指令值用英文空格分割
Content-Security-Policy: default-src https://host1.com https://host2.com; frame-src 'none'; object-src 'none'  

// 错误写法，第二个指令将会被忽略
Content-Security-Policy: script-src https://host1.com; script-src https://host2.com

// 正确写法如下
Content-Security-Policy: script-src https://host1.com https://host2.com

// 通过report-uri指令指示浏览器发送JSON格式的拦截报告到某个地址
Content-Security-Policy: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;