代码重用是什么意思_xss攻击 html代码,v-html 的 XSS 攻击

Vue中有一个很方便的指令叫v-html，它可以让我们直接输出HTML，但是它有一个缺点。

Vue官网是这样解释这个“命令”的

双大括号将数据解释为纯文本而不是 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

使用： {{ }}

使用 v-html ：

输出代码：

使用：这是红色的。

使用 v-html ：这是红色的。

此范围的内容将直接替换为属性值，如 HTML - 解析的属性值中的数据绑定将被忽略。请注意，您不能使用 v-html 来组成部分模板，因为 Vue 不是基于字符串的模板引擎。相比之下，对于用户界面（UI）来说，组件更适合作为可重用和可组合的基本单元。

在网站上动态呈现任意 HTML 可能非常危险，因为它很容易导致 XSS 攻击。仅对受信任的内容使用 HTML 插值，切勿对用户提供的内容使用 HTML 插值。

什么是 XSS 攻击？

XSS是跨站脚本攻击（Cross-Site）的缩写。

XSS是一种脚本注入攻击。攻击者通过提交表单、发表评论等方式，将预先准备好的恶意脚本注入到良性且值得信赖的网站中。

当其他用户进入网站时，该脚本会在用户不知情的情况下秘密执行。这样的脚本可能会窃取用户的信息、修改页面内容、或者假冒用户执行其他操作等，其后果是不可估量的。

发送到 Web 浏览器的恶意内容通常采用代码片段的形式，但也可能包括 HTML、Flash 或浏览器可能执行的任何其他类型的代码。

简单模拟：

:

new Vue({el:'#app',data:{:'',}});

注意事项：

尝试使用插值表达式{{}}，它将要显示的内容转换为字符串。

如果使用v-html，请确保来自服务器的渲染数据是安全的。

使用第三方UI组件库时，请检查其渲染页面的方式以及是否使用v-html。

参考：

[1]

[2]

[3]