javascript - JS Code over AJAX with jQuery - 这种方法安全吗？

Question

我有一个 AJAX 调用，它返回需要注入(inject)页面的 HTML 片段，以及“脚本”元素下的一些 JS 代码。

响应中没有html/body/head元素，只有需要注入(inject)的HTML。所以响应可能是:

<div>lorem ipsum</div>
<script>alert(1);</script>

据我了解，需要通过使用 eval() 或创建元素将通过 AJAX 获取的 JS 代码添加到页面，即:

var script = document.createElement('script');
script.type = 'text/javascript';
script.text = response;
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);

但是，我已经尝试使用 .html() 在 jQuery 中按原样嵌入响应 - 令我惊讶的是，似乎 JS 代码和 HTML 部分都按预期处理，添加了 HTML 部分到页面，JS 代码运行得很好。

这是我试过的:

$.ajax({
    url: url,
    success: function(data) {
        $('#foo').html(data);
        // #foo now contains '<div>lorem ipsum</div>' and the JS alert was fired
    }
});

这是一种安全的方法吗？它适用于所有浏览器吗？

如果不是 - 什么是完成我正在尝试的最好方法(我可能必须解析响应以将 <script> 元素与其余元素分开)？

非常感谢!

Answer 1

好吧，有两个问题，首先这不是最好的解决方案(并且可能会在浏览器上中断)，其次如果该代码不是硬编码的(即使那样)，它很容易造成 xss 漏洞.如果 ajax 的 html 或 url 是可变的，您就会感到头疼。

基本上，我不推荐它，我会寻找替代解决方案。