从Pug（Jade）传递一个数组到jQuery脚本

Question

我有一个数组fields，其中包含一组字符串：

var fields = ['foo', 'bar', 'zed'];

I pass it to pug from express like this:

app.get('/some_route', function(req, res) {

    res.render('some_view', { fields: fields });

});

现在我想在jquery脚本中使用该数组， 我已经尝试过：

<script>
    $( document ).ready(function() {
        var fields = #{fields};
        // return: var fields = foo,bar,zed;
    });
</script>

并且：

<script>
    $( document ).ready(function() {
        var fields = JSON.parse(#{fields});
        // return: var fields = JSON.parse(foo,bar,zed);
    });
</script>

谢谢

- YouneL

Answer 1

将其JSON编码并将其放置在某个属性中，例如在<script>本身上：

script(id='field-source', data-fields=JSON.stringify(fields)).
    $(document).ready(function () {
        var fields = JSON.parse($('#field-source').data('fields'));
    });

如果属性已经可以可靠地工作，那么通过一些小心的转义¹（仅使用JSON编码是不够的！）可以直接将其放入脚本中，但这并不值得努力。

_{¹ 首先进行JSON编码，然后通过将U+2028和U+2029替换为\u202[89]使其在JavaScript上下文中安全，然后通过将<替换为\x3c使其在HTML上下文中安全。仅替换</是不够的，因为<!--也可能以某些可想象的方式干扰解析。}

- Ry-

---

根据您的回答，这个应该也可以工作：var fields = JSON.parse(#{JSON.stringify(customerFields)})？ - YouneL

我只需添加以下代码即可完成此工作：var fields = !{JSON.stringify(customerFields)}。 - YouneL

这正是我所说不能做的。这是一种HTML注入（“XSS”）漏洞。 - Ry-