vue项目:解决v-html可能带来的XSS是跨站脚本攻击

简介: vue项目:解决v-html可能带来的XSS是跨站脚本攻击

一、项目简介

vue开发,nuxt项目

二、问题简述

当使用v-html时,出现提示如图:

三、解决问题

3.1、方案

使用vue-dompurify-html代替v-html

3.2、安装

yarn add vue-dompurify-html

3.3、plugins下创建vueInject.js  (名字自己取)

import VueDOMPurifyHTML from 'vue-dompurify-html'
import Vue from 'vue'
Vue.use(VueDOMPurifyHTML)

 

3.4、nuxt.config.js

配置项 plugins

引入文件

3.5、重启项目

3.6、项目使用:

<div  v-dompurify-html="form.content"></div>

四、效果:

五、独学而无友,则孤陋而寡闻, 欢迎关注、收藏、评论、指正

六、参考链接:

nuxt中v-html指令警告(warning ‘v-html‘ directive can lead to XSS attack vue/no-v-html)_dan_seek的博客-CSDN博客

相关文章
|
6天前
|
JavaScript 应用服务中间件 nginx
vue项目中页面遇到404报错
vue项目中页面遇到404报错
|
21天前
|
JavaScript 安全 前端开发
js开发:请解释什么是XSS攻击和CSRF攻击,并说明如何防范这些攻击。
XSS和CSRF是两种常见的Web安全威胁。XSS攻击通过注入恶意脚本盗取用户信息或控制账户,防范措施包括输入验证、内容编码、HTTPOnly Cookie和CSP。CSRF攻击则诱使用户执行未经授权操作,防范手段有CSRF Tokens、双重验证、Referer检查和SameSite Cookie属性。开发者应采取这些防御措施并定期进行安全审计以增强应用安全性。
18 0
|
1月前
|
JavaScript
vue.js项目评估流程图特效
vue.js项目评估流程图特效
73 2
vue.js项目评估流程图特效
|
6天前
|
JavaScript
Vue项目中强制刷新页面的方法
Vue项目中强制刷新页面的方法
11 0
|
25天前
|
JavaScript 前端开发 网络架构
Vue3项目中使用vue-router
Vue3项目中使用vue-router
40 0
|
1天前
|
JavaScript 搜索推荐 测试技术
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
|
4天前
|
JavaScript
如何在vue项目中快速导入marked
如何在vue项目中快速导入marked
12 1
|
5天前
|
JavaScript 应用服务中间件 网络安全
vue项目上线和优化
vue项目上线和优化
|
25天前
|
JavaScript 数据可视化 定位技术
vue项目中mapboxgl的几个经典操作代码示例
vue项目中mapboxgl的几个经典操作代码示例
28 0
|
25天前
|
JavaScript
使用 Vue CLI 创建 Vue 项目的详细步骤
使用 Vue CLI 创建 Vue 项目的详细步骤
7 0