Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

On SSR, script tag escaped

See original GitHub issue

Version

2.5.22

Reproduction link

https://codesandbox.io/s/kx35l39lkv

Steps to reproduce

Open tab Console

What is expected?

<script data-server-rendered="true">
            var a = 'a';
            var x = "x";
            if (a && x) {}
            if (a > x) {}
            if (a < x) {}
          </script>

What is actually happening?

<script data-server-rendered="true">
            var a = 'a';
            var x = &quot;x&quot;;
            if (a &amp;&amp; x) {}
            if (a &gt; x) {}
            if (a &lt; x) {}
          </script>

There are no restrictions on rendering script tags on the server

Issue Analytics

State:
Created 5 years ago
Comments:7 (1 by maintainers)

Top GitHub Comments

1reaction

ghostcommented, Feb 4, 2019

Still we can not prohibit the use of Vue as a pure server renderer, when no client hydration needed.

0reactions

nolimitdevcommented, Feb 21, 2022

Possible ugly hack thanks to v-pre directive…

<body onload="var javascripts = document.querySelectorAll('javascript'); for (var javascript of javascripts) { var script = document.createElement('script'); var type = javascript.getAttribute('type'); if (type) script.setAttribute('type', type); script.innerText = javascript.innerText; javascript.parentNode.insertBefore(script, javascript); javascript.remove(); }">
      <javascript type="text/javascript" style="display: none" v-pre>
          // JS code here in <javascript> tag will be switched to <script> tag (Vue does not allow to disable escaping for some element)
      </javascript>
</body>

For simple server side html generation with just a few lines of javascript needed on frontend we really do not want to implement client hydration and add client.js with several hundreds of kB.

In future it will be nice to have some per-element option e.g. v-noescape. Everyone who use it know what and why he is doing - so sane developer will not use it for user input (the same as exists v-html - it is developer responsibility for input). I need <script> tag in template, I do not want it outside template and set using v-html as mentioned here https://github.com/vuejs/vue/issues/8996#issuecomment-433479939.

Top Results From Across the Web

Escape </ in script tag contents - html - Stack Overflow

I came here looking for a way to universally escape </script> inside the JavaScript code. After bit of research I figured that if...

Improving Redux state transfer performance with JSON.parse ...

Conclusion: JSON String inside a real <script> tag wins by a shocking margin. An 18% TTI improvement on an already pretty fast app...

escapeInject - vite-plugin-ssr

The escapeInject string template tag sanitizes HTML (to prevent so-called XSS injections security breaches). It's usually used in the render() hook defined ...

Security - Vue.js

Vue templates are compiled into JavaScript, and expressions inside templates will be executed as part of ... then it would be escaped to...

API Reference | Vue Meta

ssrAppId. type string; default ssr. The app id for a server side rendered app. ... If you wish to use a JSON variable...