2

I need to add CSP headers to a website. The site uses Vue 2.* for some basic reactivity stuff. Nothing fancy, just some v-model, v-bind and v-on. Likewise it's all used inline; Vue components would be overkill.

Pseudo-code:

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

When setting the script CSP header to Content-Security-Policy: script-src 'self'; everything inside the mounted element is rendered blank.

I've read that a render function should be used instead in order to avoid the eval() call in Vue's template compiler, but that brings us back to converting everything to a Vue component.

Is there any alternative that allows me to keep the element's inner content inline in the global HTML file?

1
  • In my case the markup appeared in the HTML source but within the context of the virtual dom the output was <!----> or an empty comment block. This was true even with sha-512 configured to allow 'strict-dynamic'`, and an inline Vue template running under Chromium.
    – vhs
    Feb 17, 2019 at 6:19

1 Answer 1

1

No. If you have Vue markup in the HTML, it's not really HTML, it's a Vue template, and Vue's processing of templates uses eval.

The idea that components are overkill suggests that you see them as daunting or esoteric. They're a basic, fundamental part of Vue programming. We use them for lots of very small things. Make a component whose template is the HTML you currently have in your app now. Use the render function in this article to apply it to your div. Done.

3
  • I don't necessarily think components are daunting but in this project all pages mount Vue on a top level div (immediate child of the body tag) to allow it to be used at will for some quick aesthetic sugar. Feb 25, 2018 at 8:40
  • 1
    I'm in agreement with OP this is overkill. Perhaps they should improve their question with actual code because I just tried this with a search form and was met only with strife.
    – vhs
    Feb 17, 2019 at 10:00
  • I think it's the use of Vue that is overkill in the OP's situation. It's a framework being used for "some quick aesthetic sugar."
    – Roy J
    Feb 17, 2019 at 13:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.