将转义数据与 JavaScript 中选择框的未转义值进行比较？答案

【问题标题】：Comparing escaped data with select box's unescaped value in JavaScript?将转义数据与 JavaScript 中选择框的未转义值进行比较？
【发布时间】：2014-02-18 12:37:46
【问题描述】：

我有一个页面，我使用 AJAX 请求获取选择框选项，从该数据构建一个选择框，然后使用选择框的选定值从 AJAX 请求返回的响应中获取其他信息（它存储为全局变量）。

因为我在从我的 PHP AJAX 处理程序返回数据之前使用htmlentities() 转义数据（我应该这样做以避免 XSS 攻击，对吗？），返回数据中的索引/属性名称被转义。因此，如果 AJAX 响应对象如下所示：

data:
{
    ...,
    Caf&eacute;: [...],
    ...
}

然后，一旦我从该数据创建了一个选择框选项，并在以后获取选择框的值，如下所示：

 $("#select").val();

从选择框中检索到的值是Café。这是一个问题，因为如果我尝试从data 中的索引中获取一些东西，就像这样：

data[$("#select").val()]

然后我得到一个索引未定义的错误，因为索引不是Café，而是Caf&eacute;。

解决我遇到的问题的最佳方法是什么？可能有一个 PHP 解决方案，例如不转义“安全”字符的方法，或者也可能有一个好的 JavaScript 解决方案，那么最好的选择是什么？

编辑：根据 ZubaiR 的评论，没有必要将从 AJAX 处理程序返回的数据转义为 JSON，这意味着应该可以解决我的问题。但是，我在不使用 AJAX 时（将数据直接回显到页面时）遇到了这个问题，所以我也想为这种情况找到解决方案。

【问题讨论】：

htmlentities 用于转义 html 的数据。如果以 json 格式输出，则不需要它。如果你想在 html 页面中插入你的 json 数据，那么你可以从 javascript 中转义数据。
@ZubaiR 很高兴知道，谢谢！不过，我在回显 JavaScript 代码时也遇到了这个问题，所以我会更新我的问题以将其扩展到这种情况。

标签： javascript jquery ajax html-entities

【解决方案1】：

我对你的情况做了一个小测试，产生了一些奇怪的结果

你可以在jsbin找到测试

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body>
<select id="test_select">
    <option value="caf&eacute">caf&eacute (escaped value)</option>
    <option value="café">caf&eacute (not escaped value)</option>
</select>
<button id="test_button">Click to check my value from data</button>

<script type="text/javascript">
    var data = {"caf&eacute":1, "café":2};
    $(function () {
        $('#test_button').click(function() {
            alert(data[$('#test_select').val()]);
        })
    })
</script>
</body>
</html>

对于任何选择选项，我都会在 jsbin 上得到“2”。在我的本地电脑上，第一个得到“未定义”，第二个得到“2”。

因此，要解决您遇到的问题，您需要使用 café 作为您的选项值（未转义）并且也不要转义 js 值

【讨论】：