How does one handle ' in user-supplied data in vue.js?

Question

So I have a block of user-supplied text I'm pulling in from a CMS. However, in that string is a simple ' which blows up the whole string and returns an error. I'm trying to locate a solution to keep Vue from tripping up on this and I've hit a wall. Although I have a feeling it's something embarrassingly obvious. Here's the code:

<span v-html="sidebarContent"></span>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      // the content below is a representation of what is spit out by a
      // server-side rendered variable "@Html.Raw(@Model.Element("BodyCopy").Value)"
      sidebarContent: '<p>This is example text of what's being returned.</p>',
    },
  })
</script>

The offending issue appears to be the "what's" - and specifically the apostrophe ' in the word. The users will often be returning full sentences where these apostrophes will pop up rather frequently, and so the data needs to be able to properly handle those. Any ideas how to accomplish this?

Also the error being returned is: "Uncaught SyntaxError: Unexpected identifier"

score 1 · Answer 1 · answered Jan 13 '17 at 22:51

1

Either use double quotes, or escape your string properly

sidebarContent: '<p>This is example text of what\'s being returned.</p>',

answered Jan 13 '17 at 22:51

georaldc

1,880
16
24

As I thought - embarrassingly obvious. The double quotes worked a charm. Escaping the string was not feasible as I cannot ask our CMS users to escape their content. – David Vasquez Jan 13 '17 at 22:55
What happens if your users enter a "? – David Jones Jan 13 '17 at 22:56
Good question! (pun intended) I just tested it, and it seems to render fine. – David Vasquez Jan 13 '17 at 23:01
@DavidVasquez your CMS users shouldn't have to escape anything. They can put in single or double quotes or whatever and they would go in just fine inside your variables. You only need to handle escaping when typing out string literals, like in your example – georaldc Jan 13 '17 at 23:02
@georaldc yes as I tried to convey in my request, the data is pulled from a cms, but including @Model.Element("BodyCopy").Value didn't seem to be very useful in explaining why it was breaking, so I substituted that for an example of the output that was breaking it. ...and actually, I just realized that the double quotes aren't working after-all, as the user may still enter something in double quotes which breaks the app again. So how does one, when they cannot control what is entered, ensure the data is properly interpreted by Vue? (I've updated my example to clarify what is going on) – David Vasquez Jan 13 '17 at 23:08
2

@DavidVasquez Oh ok. In that case, you will have handle escaping strings server side before you use them client side. This is important too not only to fix issues with quotes, but to prevent having malicious code being interpreted by your browser since you can never trust user supplied data to be safe (look up XSS for more info) – georaldc Jan 13 '17 at 23:31
@georaldc Yeah, I was just coming to the same conclusion - I was too focused on solving this in a front-end mindset when, as you said, I need to be fixing this on the backend first. Thanks for the feedback! – David Vasquez Jan 13 '17 at 23:34
1

I think you could also pass json formatted strings instead to keep your data structure consistent. Just JSON.parse them on your javascript side and handle accordingly. Either way, you can keep your backend CMS code the same way it is and just adjust only when you need to output. It's generally a bad idea to store escaped input since you could by accident, do something like double escaping your data which could be bad. – georaldc Jan 13 '17 at 23:37

score 0 · Answer 2 · edited May 23 '17 at 11:45

So as @georaldc pointed out, I was trying to solve this problem in the wrong way. The problem wasn't with Vue, but with my usage of razor.

The solution, as it turns out, was to use HttpUtility.JavscriptStringEncode on my razor code. Here's the data value I should have been including:

sidebarContent: '@Html.Raw(HttpUtility.JavaScriptStringEncode(Model.Element("BodyCopy").Value))',

The following thread was also helpful in solving this: How to elegantly escape single and double quotes when passing C# string to javascript

How does one handle ' in user-supplied data in vue.js?

2 Answers2