VUE项目中预防XSS攻击

小希学全栈_Node
680 阅读4分钟

由于项目发现存在xss攻击的风险，排查后发现是使用了v-html，解决方法可以使用Vue dom-purify代替或者如果不需要渲染成DOM节点的话，直接{{}}进行渲染数据！

当使用v-html指令时，Vue.js不会对传入的字符串进行任何特殊处理或转义，直接将其作为innerHTML来插入页面，这意味着任何包含在v-html表达式中的JavaScript代码都有可能被执行。

以下是我学到的预防xss攻击的一些措施，希望对大家有所帮助！

介绍

Cross-Site Scripting（跨站脚本攻击）简称XSS，是一种代码注入攻击。 攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行，这种攻击通常发生在网站未能正确过滤或验证用户提交的数据时。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。

分类

XSS攻击主要有以下几种类型：

  1. 反射型XSS：恶意脚本直接从服务器响应中返回，然后在用户访问该页面时被执行。这种类型的攻击通常涉及用户输入的链接，其中包含恶意脚本代码。攻击者将恶意代码提交到目标网站的数据库中。当用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
  2. 存储型XSS：恶意脚本被永久性地存储在数据库或网站的静态文件中。每当有用户访问包含这些恶意脚本的页面时，恶意代码就会被执行。
  3. DOM-Based XSS：这种类型的攻击不需要持久存储的恶意脚本。它依赖于Web页面中的JavaScript代码来执行恶意操作，通常在用户交互（如点击按钮或键盘输入）时触发。

XSS攻击可以导致各种后果，包括但不限于：

  • 窃取敏感信息：攻击者可能通过XSS获取用户的会话令牌、密码或其他个人数据。
  • 控制用户会话：攻击者可以在用户不知情的情况下控制其浏览器，进行如购物或银行交易等操作。
  • 钓鱼攻击：通过构造看起来像合法网站的恶意页面，欺骗用户输入敏感信息。
  • 传播恶意软件：攻击者可能利用XSS将病毒或恶意软件注入到用户的设备上

预防

为了防止XSS攻击，网站开发者需要采取一系列措施，包括：

  • 输入验证：确保所有用户提交的数据都经过严格的验证和清理。
  • 输出编码：对输出到网页上的所有数据进行适当的编码，以避免被解释为HTML标签或脚本。
  • 使用安全的API：避免直接使用不安全的函数处理用户输入，而应使用安全的API来处理数据。
  • 使用Content Security Policy（CSP） ：用于定义浏览器应该信任哪些来源的资源，从而限制了恶意脚本的执行范围。

输入过滤

1.正则表达式

以下是一个简单的正则表达式示例，用于过滤掉一些常见的XSS攻击向量：

const xssFilterRegex = /<[^>]*>|(on\w+\s*=)|(javascript:)/gi;

这个正则表达式的组成部分解释如下：

  • <[^>]*>：匹配任何以<开始并以>结束的标签，但不包括>本身。
  • (on\w+\s*=)：匹配像onclick=这样的事件处理器属性。
  • javascript:：匹配以javascript:开头的URL，这可以用于执行JavaScript代码。
<input v-model="inputValue" @input="filterInput">
data() {
  return {
    inputValue: ''
  };
},
methods: {
  filterInput(event) {
    this.inputValue = event.target.value.replace(xssFilterRegex, '');
  }
}

请注意，这种方法只能作为基本的输入验证，不能完全保证安全。

也可以使用如VeeValidate等库来实现更复杂的验证逻辑。

输出

使用Vue dom-purify代替v-html指令进行Vue.js中的XSS防御

虽然v-html渲染原始HTML内容，但如果用户输入或者接口返回的数据没有得到适当的清理，它就有XSS攻击的风险。

DOMPurify精心清理提供的HTML字符串，移除任何可能构成安全威胁的恶意代码或脚本。这确保了只有安全和受信任的内容在您的Vue应用中被渲染。

安装
npm install vue-dompurify-html
注册：
import Vue from 'vue';
import VueDOMPurifyHTML from 'vue-dompurify-html';
 
Vue.use(VueDOMPurifyHTML);
 
new Vue({
  // ...你的应用配置
}).$mount('#app');
使用
<div v-dompurify-html="unsafeHTML"></div>

模板语法{{}}

对于模板引擎输出数据变量，主要是考虑转义 HTML，也就是主要是这些 & < > " ' / 字符进行转义。一般模板引擎也会默认开启这个部分的功能

<div>{{ '<script>alert(1)</script>' }}<div>

CSP

CSP (Content-Security-Policy) 用于检测和减轻用于 Web 站点的特定类型的攻击。通过以下有两种方式开启：

  1. 通过 HTTP 头信息的 Content-Security-Policy 的字段
  2. 通过网页的 标签
Content-Security-Policy: script-src 'self'; object-src 'none';
style-src cdn.example.org third-party.org; child-src https:;

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

参考

juejin.cn/post/728741… (vue中使用v-html如何避免xss攻击)

blog.csdn.net/lgno2/artic… (Vue 如何防止 XSS 攻击？)

juejin.cn/post/722071… (预防 XSS 攻击)

avatar
文章
阅读
粉丝