Question

某些动态Web框架使用此代码片段

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

他们是否尝试使用此代码解决标准的HTML5 / JavaScript问题。为什么不呢

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

注意：这是动态生成的代码。我在服务器上假设他们正在做类似

的事情

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

但似乎它会像这样工作

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

一个想法是后者可能包含代码，但它们是提供字符串的代码，它不是用户数据，因此它们不可能是代码。另外在服务器上使用JSON.stringify将删除所有代码。在客户端上，即使是JSON.parse对象的简单JSON.stringify也会阻止代码。

三重解析是否解决了具体问题？一次通过JavaScript，一次通过decodeURIComponent，一次通过JSON.parse？

这不是基于意见的问题

问题是解决了什么问题。要么有问题要解决，要么没有问题。没有意见回答这个问题。例如，如果JSON.stringify有时会发出不可解析的代码（据我所知，它不会，但如果有人知道的话，那将是一个很好的答案，为什么）。

还要注意：我不是在问为什么他们的框架会这样做。我问的是在标准的HTML5 / JavaScript中是否存在真正的问题。换句话说，我应该采用这种模式，因为如果不这样做，我有一天会遇到问题。

Answer 1

@katspaugh是正确的

测试

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

将上述示例的代码生成为

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

无法解析为HTML。在客户端上的服务器encodeURIComponent上添加JSON.parse(decodeURIComponent(...))可修复该问题

Answer 2

三重解析是否解决了具体问题？

是。您建议的解决方案有两个问题：

它被解析为HTML。 </script>之类的内容可能会导致内联脚本遭受严重破坏。
它被解析为JS。 Not all JSON strings are valid JS literals。

decodeURIComponent + JSON.parse方法是粗略的解决方法，看起来更像是一个快速修复，而不是一个正确的解决方案。

为什么要使用JSON.parse（decodeURIComponent（staticString））？

2 个答案: