How to encode a JSON string that includes HTML characters?

Question

I have an ASP.NET MVC view model that I need to pass to a JavaScript function when the page loads, and I'm currently doing that like so:

<script type="text/javascript">
    $(window).on("load", function () {
        myFunction(@Html.Raw(JsonConvert.SerializeObject(Model)));
    });
</script>

In other words, I'm using JSON.NET to serialize the model to JSON, and inserting that (un-encoded) into my <script> block.

When rendered, the script block ends up looking something like:

<script type="text/javascript">
    $(window).on("load", function () {
        myFunction({"myProperty": "the property value"});
    });
</script>

That works, up to a point. But when my model contains a string property that whose text includes HTML tags *, these confuse the browser into thinking that the <script> block has ended, and the browser starts rendering the tags embedded in the view model.

Edit: per the comments, this only happens if there's a </script> tag.

For example:

<script type="text/javascript">
    $(window).on("load", function () {
        myFunction({"myProperty": "<script>...</script>"});
    });
</script>

How can I solve this?

@Jamiec you're wrong, browers do do that. They look for `` and just end the script. — Halcyon, Jun 08 '17 at 11:25
@Jamiec: well, in this case, both IE11 and Chrome exhibit the same behaviour. It's worth mentioning that the JSON fragment is very large, and the problematic text is an entire HTML document, which may have a bearing on whether the browser says "surely there must have been a missing end-tag or quote". — Gary McGill, Jun 08 '17 at 11:27
@Halcyon there is no `` tag in the string in the question - its `div` tags! (hence the "something not telling us" point) — Jamiec, Jun 08 '17 at 11:28
@Jamiec: OK, that was just a trivial example (my property isn't called "myProperty" either :-) As I mentioned above, the actual text contains a full HTML document. — Gary McGill, Jun 08 '17 at 11:29
@Jamiec you're correct, it only breaks on the specific string ``. The sample code is wrong. — Halcyon, Jun 08 '17 at 11:30
@Jamiec: I don't think that's true - my question is how to properly encode the model if it contains HTML, not if it contains that specific HTML. — Gary McGill, Jun 08 '17 at 11:32
As I can demonstrate ([here](https://jsfiddle.net/hduz157y/)) there is nothing whatsoever wrong with the code you posted. This is why we ask for a [mcve] before answering code questions - so we're clear what the problem is. From your question, there is no problem. If you demonstrated that it was a `` tag which causes the problem, *then* we have a question! — Jamiec, Jun 08 '17 at 11:35
Possible duplicate of https://stackoverflow.com/questions/41629278/how-to-write-a-script-tag-inside-a-javascript-code (I already VtC as missing a mcve otherwise this would get dupe hammered by me) — Jamiec, Jun 08 '17 at 11:38
@Jamiec: I wasn't aware that the `` tag was the issue. Am I not allowed to post a question without knowing the answer in advance? Sorry, but I find your comments hostile and unhelpful. — Gary McGill, Jun 08 '17 at 11:38
Sorry you feel that way. It wasnt my intention. But, again, this is why we ask for a [mcve] - otherwise you've not showed enough effort! If you would have created the mcve from youer original code you would have realised it wasnt *any* html, but some specific thing. — Jamiec, Jun 08 '17 at 11:39
@GaryMcGill had you made a real **runnable** example ... you would have found out that it works fine without a script tag — charlietfl, Jun 08 '17 at 11:40
@Jamiec: you're right - if I'd trimmed it down to the bare minimum that failed, I would have ended up with only the tag. But the HTML that was actually embedded was very large, and I'm not sure how I could be reasonably expected to assume that a specific tag was causing the issue. I still think you're missing my point that I was looking for advice on *how to encode a JSON string that includes HTML characters*. I assume that there's a common pattern - or perhaps a facility in ASP.NET MVC, and I'd like to know what it is. I'm not *just* trying to fix this one example. — Gary McGill, Jun 08 '17 at 11:46
Every other bit of html isnt an issue. So no, there is nothing built in to support this as it's a non-issue in 99.99% of cases. — Jamiec, Jun 08 '17 at 11:50
@Jamiec: that's a bold claim. Almost as bold as your earlier claim that no browser interprets HTML inside a javascript string. :-) — Gary McGill, Jun 08 '17 at 11:53
I give up. Ive tried explaining, you're basically resorting to ad-hominim attacks. — Jamiec, Jun 08 '17 at 11:55

score 2 · Accepted Answer · answered Jun 08 '17 at 11:26

This is a know problem. PHP's json_encode function encodes / as \/ to avoid exactly this problem.

A straightforward solution is to write your own JSON encode wrapper-function that replaces </script> by <\/script> after JSON encoding.

Maybe there is a better solution though, I'm not familiar with asp.net.

How to encode a JSON string that includes HTML characters?

1 Answers1