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

【问题标题】：vue js - HTML injection from plain text into a vue componentvue js - 从纯文本到 vue 组件的 HTML 注入
【发布时间】：2021-09-03 15:02:42
【问题描述】：

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

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

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

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

这是问题的流程：

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：