2

Certain dynamic web frameworks use this code fragment

<script>
appSettings = JSON.parse(
   decodeURIComponent(
     "%7B%22setting1%22%3A%22foo%22%2C%22setting2%22%3A123%7D"));
</script>

Is there a standard HTML5/JavaScript problem are they trying to solve with this code. Why not just

<script>
appSettings = {"setting1":"foo","setting2":123};
</script>

Note: this is dynamically generated code. I'm assuming on the server they are doing something like

var settingsString = encodeURIComponent(JSON.stringify(settings));
var output = '<script>appSettings=JSON.parse(decodeURIComponent("' + 
             settingsString + 
             '"));</script>';

But it seems like it would work just as well like this

var settingsString = JSON.stringify(settings);
var output = '<script>appSettings=' + 
             settingsString + 
             ';</script>';

One idea is the latter could contain code but they are the ones providing the string, it's not user data so they're no chance it could be code. Plus using JSON.stringify on the server would remove all code. On the client even then a simple JSON.parse of a JSON.stringifyied object would prevent code.

Is there a concrete problem being solved by the triple parsing? Once by JavaScript, once by decodeURIComponent, once by JSON.parse?

THIS IS NOT AN OPINION BASED QUESTION

The question is what problem is being solved. Either there is a problem being solved or there is not. No opinions required to answer that question. For example if JSON.stringify happens to emit unparseable code sometimes (which as far I know it doesn't but if someone knows better then that would be a good answer as to why).

Also note: I'm not asking why their framework does this. I'm asking if there is real problem being solved in standard HTML5/JavaScript. In other words, should I adopt this pattern because I'm going to run into an issue someday if I don't.

Improve this question
9
  • 4
    I can think of various reasons why somebody might do it that way (although I can think of (FSVO) better ways to solve the same problems), but you're asking us to speculate on an unknown persons thought processes, which isn't really answerable. Commented Dec 15, 2015 at 10:01
  • 1
    @Quentin, No I'm not asking you to speculate. Either there is an concrete objective reason OR there isn't. That's the question. What's the concrete objective reason for it. What problem is being solved. AFAIK there's no escape issues with JSON so the triple parsing is superfluous. But I could be wrong hence the question. Commented Dec 15, 2015 at 10:05
  • 2
    Is there a reason why you refuse to mention which framework it is that does this? It would help a lot in finding out the cause. Commented Dec 15, 2015 at 10:07
  • 2
    One benefit of this encoding is if your JSON contains HTML (e.g. closing </script> tag) inside, the browser will interpret that as HTML. Commented Dec 15, 2015 at 10:16
  • 1
    @gman: Telling us the name of the framwork would allow us to inspect its source and hunt for definitive comments. Commented Dec 15, 2015 at 10:30

3 Answers 3

Reset to default
1

Is there a concrete problem being solved by the triple parsing?

Yes. Your suggested solution has two problems:

The decodeURIComponent + JSON.parse approach is a crude workaround however and looks more like a quick fix than a proper solution.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Can you elaborate on why it's a quick fix vs a proper solution?
It blows up the size unnecessarily, once for embedding JSON in JS strings and once for url-encoding everything. Just escaping the problematic character (sequence)s should have been enough.
1

@katspaugh is correct

Testing

var settingString = JSON.stringify({
  "</script>":  "<script>bar=123</script>",
});

Generates the code for the above example as

<script>
appSettings = {"</script>":"<script>window.bar=123</script>"}
</script>

Which fails to parse as HTML. Adding the encodeURIComponent on the server JSON.parse(decodeURIComponent(...)) on the client fixes that issue

Improve this answer

Comments

0

DO NOT USE IT.

let str = `C:\\Users\\Administrator\\Desktop\\小灶\\GT4T_translated_Chinese Simplified (简体中文)\\2013\%2F193461.pdf`

let newStr = decodeURIComponent(JSON.parse(`"${str}"`))

Depending on the str content, you may get unexpected errors. The code above will cause this error:

SyntaxError: Unexpected token U in JSON at position 4
Improve this answer

Comments