vue On SSR, do not escape RAW nodes

What problem does this feature solve?

When rendering a script tag on server the content is escaped, breaking the js code.

<script>
  var x = "y";
</script>

is rendered as

<script>
  var x = &quot;y&quot;;
</script>

What does the proposed API look like?

A solution would be to allow users to define what to be escaped, to override this map

https://github.com/vuejs/vue/blob/833175e9d6e8f47367e49e1752cd149a677cdae8/src/platforms/web/server/util.js#L43

Or a option to disable escaping et all here

https://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1ce/src/server/optimizing-compiler/codegen.js#L228

Thanks.

Sep 23 '18 18:09 ghost

Your components should not include script tags. There is even a Vue error/warning for that If you are talking about something else, could you please provide a small repro?

Sep 24 '18 06:09 posva

When using Vue for SSR only(without intention to hidrate) i surely can use scripts and styles in templates.

See the condition for that error to appear: https://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1ce/src/compiler/parser/index.js#L133

Here is the repro https://runkit.com/sleewoo/5ba897abdcb0ef0012e77a49

Sep 24 '18 08:09 ghost

mmh, true, was added at https://github.com/vuejs/vue/pull/3425

Sep 24 '18 17:09 posva

thanks

Sep 24 '18 17:09 ghost

turns out that even when i disable the escaping entirely here, it still escapes the quotes if there are {{ something }} in the script

https://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1ce/src/server/optimizing-compiler/codegen.js#L228

Sep 25 '18 12:09 ghost

<div>
  <script>
    var x = "y";
    var a = "{{ something }}";
  </script>
</div>

is rendered like

<div data-server-rendered="true"><script>
    var x = &quot;y&quot;;
    var a = &quot;something&quot;;
  </script></div>

Sep 25 '18 13:09 ghost

Guys thank you for the help I really appreciate it. But pls note that I have little or next to no knowledge on programming or coding..

Anyways SW, is the code something I can just cut and paste or share?

Thanks

NBaules

Get Outlook for iOShttps://aka.ms/o0ukef

From: Slee Woo [email protected] Sent: Tuesday, September 25, 2018 9:28 PM To: vuejs/vue Cc: Ngerikl Baules; Manual Subject: Re: [vuejs/vue] On SSR, do not escape RAW nodes (#8829)

is rendered like

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fvuejs%2Fvue%2Fissues%2F8829%23issuecomment-424340963&data=02%7C01%7C%7C4b441f57a06a432f355308d622ead0ed%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636734789245204018&sdata=nRrAVbBJF3mGEoejWNuPIFF%2F1O2MBfv0OTVqg3PFFPA%3D&reserved=0, or mute the threadhttps://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAQTcduA6bPu9d8_qLFh4djy6aPlw2ZyLks5uei-LgaJpZM4W100r&data=02%7C01%7C%7C4b441f57a06a432f355308d622ead0ed%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636734789245204018&sdata=kYSai4X53Ikx4HFO3zLRQM6qACsJPDrrX80k%2F5pr%2FYM%3D&reserved=0.

Sep 25 '18 13:09 nbaulesglobalsolutions

so this time is vue-server-renderer

replacing this https://github.com/vuejs/vue/blob/3d36a443c755bf16f2656a8595dda9076f021a4a/src/server/optimizing-compiler/runtime-helpers.js#L21

with

_ssrEscape: (s) => s,

will disable escaping and render valid script

Sep 25 '18 13:09 ghost

@yyx990803 can you please take a look, for sure you have a better idea how to address this issue, thanks

Dec 13 '18 20:12 ghost

here is a new repro - https://runkit.com/sleewoo/5c12c6621c8e9f0014a02e7a

Dec 13 '18 20:12 ghost

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

Feb 21 '22 11:02 nolimitdev

vue vue copied to clipboard

On SSR, do not escape RAW nodes

What problem does this feature solve?

What does the proposed API look like?

vue
vue copied to clipboard