vue js - 从纯文本到 vue 组件的 HTML 注入 [英] vue js - HTML injection from plain text into a vue component
问题描述
我正在将一些代码从 ASPX 迁移到 VUE.JS
在以前的系统中存在获取纯文本并注入到 HTML 中的功能(如带有文本、图像、链接和输入的消息).在 VUE 中,注入的 HTML 无法正常工作...
我针对根本问题创建了一个演示.
有关如何解决此问题的一些建议?纯文本可以有不同的JS功能(可能有50多种不同的场景)
Javascript 没有用这样的注入代码执行.您可以通过将 console.log('test')
写入 标签来测试.
为了解决这个问题,您可以在替换函数之后包含这个小的正则表达式函数,它会评估每个脚本标签.
codeBlock.match(/(?<=<script>).*?(?=<\/script>)/gms).forEach(功能(匹配){window.eval(匹配);});
这也是您的演示的分叉版本,带有修复:https://codesandbox.io/s/vue-injection-problem-forked-wigzr?file=/src/components/HelloWorld.vue
I'm working on migrating some code from ASPX to VUE.JS
In the previous system exists the functionality that gets the plain text and injected into the HTML (Like messages with text, images, links, and inputs). In VUE the injected HTML doesn't work fine...
I created a demo with the root problem.
Where basically we want to inject HTML into a VUE component like HTML... and works. But inside the plain HTML also it's included JS code.
This is a flow of the problem:
Some suggestions on how to work around this problem? The plain text could have different JS functions (could be more than 50 different scenarios)
Javascript is not being executed with injected code like that. You can test that by writing console.log('test')
into the <script>
tag.
To solve this problem you can include this little regex function after your replace function, which evaluates every script tag.
codeBlock.match(/(?<=<script>).*?(?=<\/script>)/gms).forEach(function (match) {
window.eval(match);
});
Here is also a forked version of your demo with the fix: https://codesandbox.io/s/vue-injection-problem-forked-wigzr?file=/src/components/HelloWorld.vue
这篇关于vue js - 从纯文本到 vue 组件的 HTML 注入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!