vue js - 从纯文本到 vue 组件的 HTML 注入

Posted 2023-02-21

【中文标题】vue js - 从纯文本到 vue 组件的 HTML 注入

【英文标题】：vue js - HTML injection from plain text into a vue component

【发布时间】：2021-09-03 15:02:42

【问题描述】：

我正在将一些代码从 ASPX 迁移到 VUE.JS

在以前的系统中，存在获取纯文本并注入 html 的功能（例如带有文本、图像、链接和输入的消息）。 在 VUE 中注入的 HTML 不能正常工作...

我创建了一个带有根本问题的演示。

CodeSandbox Exercise

基本上，我们希望将 HTML 注入到 VUE 组件中，例如 HTML……并且可以工作。但在纯 HTML 中也包含 JS 代码。

这是问题的流程：

关于如何解决此问题的一些建议？ 纯文本可以有不同的JS函数（可能有50多种不同的场景）

【参考方案1】：

更好的解决方案是在替换功能之后使用document.write(codeBlock);。

https://codesandbox.io/s/vue-injection-problem-forked-rsmh8?file=/src/components/HelloWorld.vue:1186-1212

【参考方案2】：

javascript 没有被这样的注入代码执行。您可以通过将console.log('test') 写入<script> 标记来进行测试。

要解决这个问题，您可以在替换函数之后包含这个小正则表达式函数，它会评估每个脚本标签。

codeBlock.match(/(?<=<script>).*?(?=<\/script>)/gms).forEach(function (match) 
  window.eval(match);
);

这里还有一个带有修复的演示的分叉版本： https://codesandbox.io/s/vue-injection-problem-forked-wigzr?file=/src/components/HelloWorld.vue

【讨论】：

看来正则表达式有些问题解决方法不能正常工作