vue防止xss注入-如何防止xss注入

第三方分享代码
hacker 3年前 (2022-07-17) 黑客教程 150 3

目录介绍:

急急急 tp5.1输出原html标签?

使用vue中的v-html指令,否则会因防止xss攻击不渲染html标签

解决方法如下:

1、双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令:

pUsing mustaches: {{ rawHtml }}/ppUsing v-html directive: span v-html="rawHtml"/span/p

2、建议去查看vue的相关的文档,这些东西需要前端做,和tp没有关系的

vue中阻止click事件冒泡,防止触发另一个事件的方法

使用vue阻止子级元素的click事件冒泡,很简单,用stop

div

@click="test1()"

span

@click.stop="test2()"按钮1/span

span按钮2/span

/div

这样点击div里面的按钮1,就不会触发div绑定时间test1()方法。

以上这篇vue中阻止click事件冒泡,防止触发另一个事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:详解vue事件对象、冒泡、阻止默认行为vue绑定的点击事件阻止冒泡的实例

为什么要同源策略

一个重要原因就是保护cookie,cookie中存着用户的登陆凭证,就相当于用户的账号密码。

想象以下场景,你正吃着火锅唱着歌,突然收到一封邮件说你的银行账号存在安全隐患,点击修复。虽然银行的官方网站是,但是想到你的全部家当24块3毛都在卡里,慌乱的你没有注意这么多点击链接输入帐号密码进行登陆。这个网站其实是

iframe src=""

在你输入帐号密码的时候,如果没有同源策略,外部已经有脚本获取你的输入或者直接通过document.cookie窃取了你的信息并且发送给攻击者了。

那有了同源策略,是不是我们的网站就万无一失了呢。并不是,还有很多其他手段威胁到网站安全,比如xss,csrf,clickJacking,本篇文章就简单阐述一下他们的攻击手段和基础攻防(后续添加)。

xss

Cross Site Script,译为是跨站脚本攻击;其原本缩写是 CSS,但为了和层叠样式表(Cascading Style Sheet)有所区分,因而被迫改名为 XSS。主要分为反射型和储存型。

反射型

反射型的特点是不持久,它的特点是xss的代码出现在访问的链接里,作为一部分输入提交到服务器,然后服务器响应后返回浏览器,然后浏览器执行xss的代码。

一般攻击者通过邮件或者其他途径发送链接,用户点击之后达到攻击目的。

储存型

存储型和反射型的差别仅在于他的攻击代码会存储到服务器。这种攻击的最典型例子就是博客论坛的留言功能,访问包含这条留言的页面时,就会触发攻击代码。

比如某个论坛的个人中心里的个人简介,我们就可以在里面尝试注入代码进行练习,先来测试可用的标签

scriptapimgbodybuttonvardiviframemetaobjectmarqueeisindex inputselectkeygenframesetembedsvgmathvideoaudiotextarea

发现只有a标签存活下来,再来测试属性

a href onmouseover onclick

xss存在的主要原因在于没有对于用户的提交内容和接口的返回内容没有进行严格的过滤。

而防止xss的主要手段也是对输入和url参数进行过滤,对输出进行编码,还有就是cookie设置http-only。像常用的vue就有

const decodingMap = {

'': '',

'': '',

'"': '"',

'': '',

'

': '\n',

' ': '\t',

''': "'"

}

来对输入进行进行过滤,还有百度中输入scriptalert(1)/script也会被转译成scriptalert(1)%2Fscript。

至于http-only,严格来说没有阻止攻击,只是阻止了攻击后的cookie劫持。

最近和业内的一些前端大神交流,广州蓝景的前辈告诉我,现在前端的框架使用,以VUE.JS为主,大家觉得呢?

Angular的实现最严谨(国外用得多),React的思想最正确,所以Vue是最好的前端框架。

Angular的话,其实思路比较明确了特定情况下,一定会选这个,没有替代性,比如我现在正在做的多团队协作,不用NG的注入机制,不用TS的强校验,就没法完美解决,那就当然要用NG啦。

React是我最喜欢的,设计思路是王道,但是对使用者要求太高,对需求稳定性的要求也高,开发维护成本其实是3个框架中最高的,不过如果能用的好,效果也是最好的。

Vue提倡的渐进式的开发,而这点正是最贴切前端开发的思路,容易入手容易协同,能够更快速灵活的开发迭代,而这些正是Vue的成功之处,可以说是最具互联网思维的前端框架了。选择Vue不是因为它完善,而是因为它能包容不完善。

目前的创业公司基本都会选择Vue,Vue是最符合快速开发快速迭代的,人员培养又简单,后期维护又不复杂。

web前端需要掌握的哪些知识

一个合格的web前端需要掌握哪些技术?

最基础的自然是JavaScript,HTML和css这三种语言。

首先了解下它们到底是什么。

HTML是用户看到的网页的骨架,比如你会发现当前页面分为左中右三个部分,其中还填充了不同的文字和图片;每个子部分还会继续细分,比如当前页面的中间部分下方有输入框等等。

CSS是网页展示的细节控制,比如你会发现有的文字是红底白色,有的子部分占了页面的二分之一宽,有的只占六分之一,有些部分需要用户进行某些操作(如点击,滑动)才会出现等等,这些就是有CSS来控制。

JavaScript是负责捕捉用户在浏览器上的操作,并与后端服务器进行数据交换的脚本语言。当用户在前端进行点击,输入等操作的时候,会触动绑定了该动作的JavaScript脚本,然后JavaScript收集数据,调用后端的api接口,再将后端返回的数据交给HTML和CSS渲染出来。

一个网页的HTML代码和CSS代码是可以直接在浏览器中查看的,你可以直接按F12,就能看到下图右侧的模块,左右侧红框就是代码与实际页面的对应关系。因此如果你看到某个网站的布局很不错,不妨点击F12,进行学习。

前端框架

然而,实际应用中,已经很少有正规的项目组直接用上述三种语言进行web 前端开发了,而是使用很多封装了这三种语言的框架,比如

Vue.js

,angular,react native等等。它们是来自谷歌和Facebook的大神项目组,基于自己的经验,封装了原生前端语言,实现了更多更复杂更酷炫的功能。因此,可以说,学会使用这些框架,能达到事半功倍的效果。

比如用了vue,它是自底向上增量开发的设计,其核心只关心图层,而且还可以与其他库或已存项目融合,学习门槛极其友好;另一方面,vue可以驱动单文件组件和vue生态系统支持的库开发的复杂单页应用。有了这个生态系统,可以说,vue是处在一个不断壮大,不断完善的欣欣向荣的状态。

网络通信协议

由于前后端分离的趋势,前端还需要了解很多网络通信协议的知识,这里不局限于http协议,因为据我的经验,有时候我们还会用到websocket等协议。因此,前端需要简单了解不同协议的特点以及使用方式,但是好消息是不用像学习计算机网络课程一样对每种协议的原理都了解的特别透彻,只要学会如何用前端语言发送这种协议的请求就够了。

vue是什么 vue特点 vue和其他前端框架区别

vue是什么

Vue.js (读音 /vju?/,类似于 view) 是一套基于javascript的用于构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

vue特点

简洁、轻量、组件化、快速、数据驱动、模块友好

vue和其他前端框架区别

1.与AngularJS的区别

相同点:

都支持指令:内置指令和自定义指令。

都支持过滤器:内置过滤器和自定义过滤器。

都支持双向数据绑定。

都不支持低端浏览器。

不同点:

1AngularJS的学习成本高,比如增加了Dependency Injection(依赖注入)特性,而Vue.js本身提供的API都比较简单、直观。

2在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢。

Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。

对于庞大的应用来说,这个优化差异还是比较明显的。

手机渲染速度:angular1 300ms * vue 200ms * react 100ms

2.与React的区别

相同点:

React采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用。

中心思想相同:一切都是组件,组件实例之间可以嵌套。

都提供合理的钩子函数,可以让开发者定制化地去处理需求。

都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。

在组件开发中都支持mixins的特性。

不同点:

React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。

Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作DOM。

vue的应用场景

简单地说,就是需要对 DOM 进行很多自定义操作的项目小项目;理论上 Vue 配合类似Flux的架构也可以胜任超大规模多人协作的复杂项目。

相关推荐

网友评论

  • (*)

最新评论

  • 访客 2022-07-17 03:24:24 回复

    事件对象、冒泡、阻止默认行为vue绑定的点击事件阻止冒泡的实例为什么要同源策略一个重要原因就是保护cookie,cookie中存着用户的登陆凭证,就相当于用户的账号密码。想象以下场景,你正吃着火锅唱着歌,突然收到一封邮件说你的银行账号存在安全隐患,点击修复。虽然

    1
  • 访客 2022-07-17 01:30:38 回复

    方法。以上这篇vue中阻止click事件冒泡,防止触发另一个事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。您可能感兴趣的文章:详解vue事件对象、冒泡、阻止默认行为vue绑定的点击事件阻止冒泡的实例为什么要同源策略一个重要原因就是保护c

    2
  • 访客 2022-07-17 02:42:44 回复

    要学会如何用前端语言发送这种协议的请求就够了。vue是什么 vue特点 vue和其他前端框架区别vue是什么Vue.js (读音 /vju?/,类似于 view) 是一套基于javascript的用于

    3