Vue 内联模板和 CSP

Question

我需要将 CSP 标头添加到网站。该站点将 Vue 2.* 用于一些基本的反应性内容。没什么特别的，只是一些v-model、v-bind 和v-on。同样，它都是内联使用的； Vue 组件将是矫枉过正。

伪代码：

<body>
    <div id="app">
        <button v-on="toggle">...</button
    </div>
    <script>
        new Vue({
            el: '#app"
        });
    </script>
</body

当将脚本 CSP 标头设置为 Content-Security-Policy: script-src 'self'; 时，已安装元素内的所有内容都呈现为空白。

我改用 read that a render function should be used 是为了避免在 Vue 的模板编译器中调用 eval()，但这让我们回到将所有内容转换为 Vue 组件的问题。

是否有任何替代方法可以让我将元素的内部内容内嵌在全局 HTML 文件中？

Answer 1

没有。如果 HTML 中有 Vue 标记，那它就不是真正的 HTML，它是一个 Vue 模板，而 Vue 对模板的处理使用了eval。

组件过大的想法表明您认为它们令人生畏或深奥。它们是 Vue 编程的基本组成部分。我们将它们用于许多非常小的事情。创建一个组件，其模板是您现在在应用程序中拥有的 HTML。使用this article 中的渲染函数将其应用到您的 div。完成。