如何安全地通过javascript将XSS编码来自PHP的不受信任数据通过AJAX注入DOM？

Question

我对XSS预防感到非常自信，我们在网站上使用了较旧的设置...我们使用OWASP的XSS缓解功能从数据库中删除用户提供的数据（我们通过准备好的语句，直到输出时间才进行编码）并通过它进行打印（为便于阅读而简化）：

show.php

print "<li>";
print "<a href='page?id=".xssafe($row->TRUSTED_VALUE)."'>".xssafe($row->UNTRUSTED_VALUE)."</a>";
print "</li>";

由于众多原因，可扩展性，分页，灵活性，我们正在转向面向AJAX的方案。我们不是直接打印出这些LI块，而是在页面加载时立即对它们进行AJAX（技术上是$（document）.ready（））并通过javascript＆amp; jQuery处理一切。我很关注这种方法，因为我已经阅读了很多关于这个主题的内容，但我对如何维护XSS安全性仍然没有信心。

我们的新设置是：

retrieve.php（我原来还有xssafe（）包装器，但是读到我应该只使用json_encode（））

$data['TRUSTED_VALUE'] = $row->TRUSTED_VALUE; // 123
$data['UNTRUSTED_VALUE'] = $row->UNTRUSTED_VALUE; // who knows?
header('Content-Type: application/json');
print json_encode($data);

show.php

<script src="show.js"></script>

show.js

$.ajax({
        url: 'retrive.php',
        dataType: 'json',
        data: {page: pageNum},
        success: loadLI
}); 

function loadLI() {
        data = response.data;
        var li = document.createElement('li');
        var anchor = document.createElement('a');
        anchor.setAttribute('href', 'page?id='+encodeURIComponent(data.TRUSTED_VALUE));
        anchor.appendChild(document.createTextNode(data.UNTRUSTED_VALUE));
        li.appendChild(anchor);

}

我应该在我们的retrieve.php脚本中保留xssafe（）包装器函数，然后是json_encode，然后通过Javascript注入这些值吗？或者我们的新设置安全吗？或者有更好的方法吗？感谢。

Answer 1

你正在做的事情似乎很安全。

createTextNode在页面上创建一个文本节点 - JavaScript将在内部为您处理编码。

setAttribute将在页面上设置一个属性 - 同样适用于此处，该参数被视为强类型值，并且不应该使用恶意代码将其转义。

  

我应该在retrieve.php中保留xssafe（）包装函数吗？   脚本，然后是json_encode

所以，没有。