vue 如何防止xss攻击框架_LearningNotes-1/Vue/Vue中防止XSS脚本攻击 at master · axuu/LearningNotes-1

Vue中防止XSS脚本攻击

最近写了一个博客评论模块，因为引入了表情包，所以就将原来的v-text的形式，改成了v-html，也就是渲染html标签，但是这样不可不免的会带来问题，就是XSS跨站脚本攻击

XSS解决方案官网：点我传送

XSS脚本攻击

跨站脚本攻击缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页面时，嵌入Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。XSS攻击针对的是用户层面的攻击！

例如我在评论框输入以下内容

链接

这个时候评论就会出现一个超链接

只要我们点击这个链接后，就会出现一个alert弹框

上面代码因为写的的是循环10次后，alert消失，但是如果是while(true)，那么后果不堪设想，会进入无止无休的弹框

解决XSS脚本攻击

首先需要安装xss模块

npm install xss --save

然后在main.js中引入

import xss from 'xss'

// 定义全局XSS解决方法

Object.defineProperty(Vue.prototype, '$xss', {

value: xss

})

然后针对需要渲染的页面，调用$xss()方法

我们在点击刚刚的页面，发现已经不会有弹框了，但是有出来了新的问题，就是我引入的标签也被过滤了

引入xss后

这个时候，我们就需要自定义拦截规则了，我们在data中添加如下配置，下面是自定义白名单，也就是什么标签以及标签的属性能够正常使用，其它的都会被拦截

data() {

return {

// xss白名单配置

options : {

whiteList: {

a: ['href', 'title', 'target'],

span: ['class']

}

};

然后在使用的时候，增加option配置

这个时候，表情已经成功显示了，并且原来的脚本攻击也不生效，达到了我们的目的~

vue 如何防止xss攻击框架_LearningNotes-1/Vue/Vue中防止XSS脚本攻击 at master · axuu/LearningNotes-1 · GitHub...相关推荐

浏览器攻击框架BeEF Part 2：初始化控制
前言在上一章,笔者已经介绍了BeEF框架.在这一章,笔者将介绍攻击浏览器技术的第一步:初始控制. 浏览器攻击方法流程攻击浏览器一般分为几个阶段,看下图: 整个过程分为三个步骤,第一步是初始化控制, ...
WEB攻击手段及防御第1篇－XSS
概念 XSS全称为Cross Site Script,即跨站点脚本攻击,XSS攻击是最为普遍且中招率最多的web攻击方式,一般攻击者通过在网页恶意植入攻击脚本来篡改网页,在用户浏览网页时就能执行恶意的 ...
vue 启动时卡死_十分钟浅入Vue 原理
vue原理引用众所周知vue是一个MVVM 渐进式框架,MVVM是vue的设计模式,在vue框架中数据会自动驱动视图. 1.MVVM设计模式解释 View是视图,就是DOM:对应视图也就是H ...
什么是跨域脚本攻击?
跨域脚本攻击又叫XSS攻击,属于客户端攻击,攻击者在我们的网页中嵌入恶意脚本,当用户使用浏览器浏览被嵌入恶意脚本的网页时,脚本就会在我们的浏览器中执行.XSS攻击的核心是脚本 XSS可以分为以下三类: ...
Java防止Xss注入json_浅谈 React 中的 XSS 攻击
作者:陈吉转发链接:https://mp.weixin.qq.com/s/HweEFh78WXLawyQr_Vsl5g 前言前端一般会面临 XSS 这样的安全风险,但随着 React 等现代前端框 ...
精通JavaScript攻击框架:AttackAPI
多年来客户端安全一直未引起人们的足够重视,但是如今情况发生了急剧转变,客户端安全已经成为信息安全领域的焦点之一.Web恶意软件.AJAX蠕虫.浏览历史暴破.登录检测.傀儡控制技术网络端口扫描以及浏览器 ...
ASP.NET Core中的OWASP Top 10 十大风险-跨站点脚本攻击 (XSS)
本博文翻译自: https://dotnetcoretutorials.com/2017/10/25/owasp-top-10-asp-net-core-cross-site-scripting-xs ...
php mysql可以跨站_Laravel5中防止XSS跨站攻击的方法
本文实例讲述了Laravel5中防止XSS跨站攻击的方法.分享给大家供大家参考,具体如下: Laravel 5本身没有这个能力来防止xss跨站攻击了,但是这它可以使用Purifier 扩展包集成 HT ...
前端安全之XSS攻击（跨域脚本攻击）
提示:前端查漏补缺,仅代表个人观点,不接受任何批评文章目录一.XSS是什么? 二.XSS 类型划分 1.反射性XSS (Reflected XSS) 2.存储型XSS (Stored XSS) 3 ...

vue 如何防止xss攻击框架_LearningNotes-1/Vue/Vue中防止XSS脚本攻击 at master · axuu/LearningNotes-1 · GitHub...

vue 如何防止xss攻击框架_LearningNotes-1/Vue/Vue中防止XSS脚本攻击 at master · axuu/LearningNotes-1 · GitHub...相关推荐

最新文章

热门文章

vue 如何防止xss攻击 框架_LearningNotes-1/Vue/Vue中防止XSS脚本攻击 at master · axuu/LearningNotes-1 · GitHub...

vue 如何防止xss攻击 框架_LearningNotes-1/Vue/Vue中防止XSS脚本攻击 at master · axuu/LearningNotes-1 · GitHub...相关推荐

最新文章

热门文章

vue 如何防止xss攻击框架_LearningNotes-1/Vue/Vue中防止XSS脚本攻击 at master · axuu/LearningNotes-1 · GitHub...

vue 如何防止xss攻击框架_LearningNotes-1/Vue/Vue中防止XSS脚本攻击 at master · axuu/LearningNotes-1 · GitHub...相关推荐