vue
vue copied to clipboard
vuejs
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 = "y";
</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.
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?
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
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
<div>
<script>
var x = "y";
var a = "{{ something }}";
</script>
</div>
is rendered like
<div data-server-rendered="true"><script>
var x = "y";
var a = "something";
</script></div>
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.
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
@yyx990803 can you please take a look, for sure you have a better idea how to address this issue, thanks
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
