【问题标题】:How to use components in v-html如何在 v-html 中使用组件
【发布时间】:2016-09-05 02:55:46
【问题描述】:

我正在尝试在 v-html 中使用组件。 我想从自己的 API 中获取 html,然后我会展示出来。

这是我的代码。

HTML:

<!-- app -->
<div id="app">
  <span v-html="html"></span>
  <badge></badge>
  <span v-html="html2"></span>
  <partial name="my-partial"></partial>
  <span v-html="html3"></span>
</div>

Javascript:

Vue.component('badge', {
  template: '<span class="component-tag">This is component</span>',
})
Vue.partial('my-partial', '<p>This is a partial!</p>')
// start app
new Vue({
  el: '#app',
  data: {
    html: '<p>THIS IS HTML</p>',
    html2: '<badge></badge>',
    html3: '<partial name="my-partial"></partial>'
  }
})

https://jsfiddle.net/9w3kz6xm/4/

我尝试使用 partials,因为 Vue 文档说“如果你需要重用模板片段,你应该使用 partials。”

它不起作用。也许我犯了错误,我不知道什么是错误。

谢谢。

【问题讨论】:

  • 当文档说“你应该使用 partials”时,并不意味着“使用 partials 和 v-html”,它的意思是“使用 partials 而不是 v-html”。使用v-html 插入的所有内容都只会是纯 HTML,这意味着其中没有任何组件、指令、胡子标签或部分或任何特定于 Vue 的内容。
  • 按照你的链接,我觉得一切正常。
  • @LinusBorg 我明白了!谢谢!这是我的答案代码。 https://jsfiddle.net/9w3kz6xm/7/
  • @Ben 感谢您的评论。我得到了答案。谢谢!

标签: javascript vue.js


【解决方案1】:

非常确定 Vuejs 使得直接使用外部 html 变得非常困难。 v-html 将简单地替换 html 内容,因此不会执行任何指令。它的目的是避免 XSS 攻击,如下所述:https://vuejs.org/v2/guide/syntax.html#Raw-HTML

在您的网站上动态呈现任意 HTML 可能非常危险,因为它很容易导致 XSS 漏洞。仅对受信任的内容使用 HTML 插值,从不对用户提供的内容使用。

如果您确实需要使用外部 html,可以使用此处记录的Vue.compile()https://vuejs.org/v2/api/#Vue-compile

可以在此处找到一个工作示例:https://jsfiddle.net/Linusborg/1zdzu7k1/ 及其相关讨论可以在这里找到:https://forum.vuejs.org/t/vue-compile-what-is-staticrenderfns-render-vs-staticrenderfns/3950/7

【讨论】:

  • 在某些情况下 v-html 并没有阻止我的 XSS。这是一个在使用 v-html 时为我暴露漏洞的示例...将其粘贴到通过 v-html 解析的文本中:
  • 根据 Vuejs 文档 Only available in the full buildcompile 方法有一个警告。 vuejs.org/v2/guide/…
  • 答案自相矛盾。 v-html 上的文档说它allows XSS,这是真的。同样的东西在 React 中被称为 dangerouslySetInnerHTML​ 是有原因的。 v-html 的目的是在没有编译器开销的模板中分配 innerHTML,而不是解决安全问题。可以通过 HTML 清理来防止 XSS。
  • @EstusFlask 是正确的,v-html 在这里根本没有阻止任何事情。尝试使用这个包而不是:github.com/LeSuisse/vue-dompurify-html 进行简单的 Vue-y 集成。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2019-02-05
  • 1970-01-01
  • 2020-04-05
  • 1970-01-01
  • 2020-01-26
  • 2016-04-07
  • 1970-01-01
相关资源
最近更新 更多