.text() 是否安全以清理数据？ [jQuery]

Question

我看到其他地方有人问过这个问题：

Escaping HTML strings with jQuery

@travis 标记为正确的答案说 .text() 很好。但是，有些人在评论中（例如@nivcaner 和@lior）提到这种解决方案并不好。我们站在哪里？我可以安全使用它吗？

我正在开发一个 Web 应用程序，用户可以在该应用程序中在其浏览器中创建一个可以通过 JQuery 添加表格、标题和视频的文档。当用户“保存”他的文档时，它的结构被翻译成一个数组，其中数组的所有元素都由“纯”文本组成，没有标签（例如，每个表格单元格都有一个数组元素，其中包含该文本的文本）细胞等）。然后将数组转换为 JSON 格式并发送到服务器，并通过 PHP 以 JSON 格式处理/清理/保存。

之后，其他用户可以访问该文档，这当然会引入潜在的安全漏洞。想法是他们从服务器读取 JSON 数据，然后在客户端通过 javascript/JQuery 重新创建文档。

虽然我非常有信心我的 PHP 代码能够正确地清理 JSON 数据，但我担心恶意用户可能会欺骗其他用户从不受信任的来源读取 JSON 数据的攻击。出于这个原因，我觉得最好在客户端重新创建表等之前验证来自服务器的任何 JSON 数据。假设变量currentCellText 包含要写入表格单元格#mytd 中的（JSON 读取）文本，我可以安全地使用代码$("#mytd").text(currentCellText) 重新创建单元格内容吗？

Answer 1

来自jQuery .text() article：

我们需要注意，此方法会根据需要对提供的字符串进行转义，以便在 HTML 中正确呈现。为此，它调用 DOM 方法 .createTextNode()，不会将字符串解释为 HTML。

这意味着数据被存储到一个文本节点，根据规范，它不能将存储的文本呈现为 HTML，因此使用$("#mytd").text(currentCellText) 应该是安全的。

jQuery 实现的 1.x 行支持本文。当您查看 jQuery 1.11.3 的未压缩源代码时，您会发现：

jQuery.fn.extend({
    text: function( value ) {
        return access( this, function( value ) {
            return value === undefined ?
                jQuery.text( this ) :
                this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );
        }, null, value, arguments.length );
    },
    ...

相关行是这样的：

this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );

该行的大部分内容只是定位正确的document 来创建文本节点，但作为传入字符串的value 永远不会直接被解释为HTML。

此外，查看 jQuery 2.1.4 的未压缩代码，您会发现该实现使用 .textContent 属性进行赋值，该属性依赖于浏览器实现来对传递的文本进行完全净化，而不是部分：

jQuery.fn.extend({
    text: function( value ) {
        return access( this, function( value ) {
            return value === undefined ?
                jQuery.text( this ) :
                this.empty().each(function() {
                    if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
                        this.textContent = value;
                    }
                });
        }, null, value, arguments.length );
    },
    ...

这段代码的相关部分在这里：

this.empty().each(function() {
    if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
        this.textContent = value;
    }
});

因为这是在将参数传递给 .text() 函数时执行的操作。