Question

我试图逃脱我的JSON中的一些撇号。我知道它并不理想，但我将数据附加到DOM并稍后在代码中调用它。目前，只要数据中有'，我就会收到错误消息。我尝试过使用replace和encodeURI，但似乎没有用。

我的代码基本上看起来像：

var addItem = function (item, target){
  var obj = $(item).data('obj');
  var obj_string = JSON.stringify(obj);
  target.append("<div data-obj='" + obj_string + "'> Added </div>
}

当我检查元素时，它会在到达撇号时断开：

{"publisher":"EA","games":[{"game":"Dragon's"}]}

在元素检查器中看起来像这样：

{"publisher":"EA","games":[{"game":"Dragon" s"}]}

接下来的一切都被打破了。我是怎么逃避它的？

我发现很多方法，如果它是纯粹的jquery但是它在html中似乎不起作用。

Answer 1

您可以使用.data()来避免转义和字符串化©直接将obj设置为元素。

$('<div/>').data('obj', obj).text('Added').appendTo(target);

请记住，使用此方法时，您不会获得实际元素本身的数据属性，但是当您使用.data请求数据时，数据就会存在。

Answer 2

您正在使用已使用单引号的字符串连接您的内容。连接的结果很可能是<div data-obj='Dragon's'>，这不是你想要的。

连接单引号时（不确定实体是否会被解释）：

.append("<div data-obj='" + obj_string.replace("'", "&#130;") + "'> Added </div>");

或者更安全，您可以使用jQuery构建节点，这将为您提供本机转义以获得性能损失：

.append($("<div>Added</div>").data("obj", obj_string));

Answer 3

不要让自己对XSS开放，请尝试：

var div = document.createElement('div');
div.appendChild(document.createTextNode("Added"));
div.setAttribute("data-obj",obj_string);
target.append(div);

在jQuery中转义撇号

3 个答案: