Vue v-html指令不运行<script src="..">标记

Vue的v-html指令用于将数据作为HTML解析并渲染到DOM中。然而，为了防止XSS攻击，Vue默认会禁止解析和渲染包含<script>标记的内容。

<script>标记通常用于引入外部脚本文件或执行JavaScript代码。由于安全原因，Vue默认禁止解析和渲染包含<script>标记的内容，以防止恶意脚本的注入和执行。

如果确实需要在Vue中渲染包含<script>标记的内容，可以通过在组件中使用v-html指令，并结合使用DOMPurify库来实现安全的HTML解析和渲染。

DOMPurify是一个用于净化HTML的库，可以移除不安全的标签和属性，从而防止XSS攻击。可以通过在Vue项目中安装和引入DOMPurify库，然后在使用v-html指令时，先将HTML内容通过DOMPurify进行净化，再进行渲染。

以下是一个示例：

首先，安装DOMPurify库：

npm install dompurify

然后，在Vue组件中引入DOMPurify库并使用v-html指令：

<template>
  <div>
    <div v-html="sanitizedHtml"></div>
  </div>
</template>

<script>
import DOMPurify from 'dompurify';

export default {
  data() {
    return {
      htmlContent: '<script src="..."></script>',
      sanitizedHtml: '',
    };
  },
  mounted() {
    this.sanitizedHtml = DOMPurify.sanitize(this.htmlContent);
  },
};
</script>

在上述示例中，我们首先在组件中定义了一个包含<script>标记的HTML内容。然后，在mounted钩子函数中，使用DOMPurify对HTML内容进行净化，将结果赋值给sanitizedHtml变量。最后，通过v-html指令将sanitizedHtml渲染到DOM中。

需要注意的是，使用v-html指令渲染包含<script>标记的内容存在一定的安全风险，因此在实际应用中应谨慎使用，并确保对输入的HTML内容进行充分的验证和净化，以防止XSS攻击的发生。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云容器服务（TKE）、腾讯云云数据库MySQL版、腾讯云CDN加速等。具体产品介绍和链接地址可以参考腾讯云官方网站：https://cloud.tencent.com/