javascript - 正确转义 javascript 对象

Question

给定一个对象:{"key":"pairs","are":"fun"}它被回显到像 const foo = <?php echo $bar ?>; 这样的变量中。逃离物体的正确方法是什么？我试过encode_json它转义了所有双引号 {\"key\":\"pairs\",\"are\":\"fun\"}不允许对象渲染。我也尝试过esc_js它将双引号转换为 & quot; 。如何正确转义对象并将对象返回到 foo ？输出应该是 {"key":"pairs","are":"fun"}逃脱了任何恶意内容。

Answer 1

如果您使用 wp_json_encode 本身生成 JSON 字符串，则将 JSON 分配给浏览器中的 JavaScript 变量的输出应该相当安全。 wp_json_encode 函数将对字符进行转义，否则可能允许某人在赋值点注入(inject)代码。

但是，您还必须考虑如何使用键/值对中的值。如果您需要一个整数，可以通过 intval 运行该值，或者如果您需要稍后注入(inject)到页面中的纯文本，则可以通过 esc_html 运行它。

例如:

<?php
$map = [
        'key' => 'pairs',
        'are' => '"; I document.write(\'fun trying to break out\')',
        'i_am_expecting_plaintext' => esc_html('<a href="evillinkhere">Hello</a><script>evilscript();</script>'),
        'i_expect_an_integer' => intval("90i"), 
        'some_html_allowed' => wp_kses('<a href="http://nisamerica.com/">here</a><script>dangerous();</script>', ['a' => array('href'=>array())]),
];
?>

<script>const foo = <?php echo wp_json_encode($map, JSON_PRETTY_PRINT); ?>;</script>

产生以下输出:

<script>const foo = {
    "key": "pairs",
    "are": "\"; I document.write('fun trying to break out')",
    "i_am_expecting_plaintext": "&lt;a href=&quot;evillinkhere&quot;&gt;Hello&lt;\/a&gt;&lt;script&gt;evilscript();&lt;\/script&gt;",
    "i_expect_an_integer": 90,
    "some_html_allowed": "<a href=\"http:\/\/nisamerica.com\/\">here<\/a>dangerous();"
};</script>

附录:

wp_json_encode 之前给你 {\"key\":\"pairs\",\"are\":\"fun\"} 的原因是您向其提供的字符串已经采用 JSON 表示法。 wp_json_encode 的作用是获取 native PHP 变量并将它们转义为 JSON。它实际上是 json_encode 的一个非常薄的包装。我上面的建议实际上是用 PHP 生成 map ，并将其提供给编码函数，而不是制作字符串表示形式，然后尝试使其安全。