2011-04-08 120 views
1

我有一个AJAX调用,它返回一个需要注入页面的HTML片段,以及一些'脚本'元素下的一些JS代码。JS代码AJAX与jQuery - 这种方法是否安全?

里有没有响应HTML /体/头元素,只需要被注入的HTML。这样的反应可能是:需要通过要么使用eval()或通过创建一个元素,即添加到页面

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

从我的理解,JS代码是通过AJAX获取:

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

但是,我试过在jQuery中使用.html()嵌入响应 - 令我惊讶的是,似乎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>元素与其他元素分开)?

非常感谢提前!

回答

3

嘛,有两个问题,第一,如果该代码是什么,但硬编码(即使在当时的)不是最好的解决办法(并可能打破浏览器),和第二,它是方式容易地创建一个XSS违约。如果ajax'd html或url可以更改,那么您会遇到一些麻烦。

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

+1

我同意 - 您不希望用户有权访问以编程方式影响您的代码。例如,更好的方式是根据您获得的响应将您自己的预编写函数作为回调调用,而不是通过线路接收代码进行评估。此外,您可以更轻量级地接收JSON内容,然后构建插入的HTML代码段,而不是通过ajax发送完整的HTML内容。 – 2011-04-08 01:12:07

0

jQuery的html的()函数使用的innerHTML和IE需要defer属性要在脚本设置装载这种方式,否则将无法执行。我认为createElement方法是一个更好的方法。

进一步说,我的看法是,这是更好地只传送JSON并避免EVAL-ING动态JavaScript。然后,您可以使用JSON.parse解析响应,并且客户端代码可以执行此数据所需的任何操作。

0

听起来像你想做的事情可以由JSON-P完成。

基本上,而不是让一个XHR调用,您可以动态创建一个脚本元素,它的SRC属性点,你要加载的URL。该服务器然后将返回以下内容:

$('<div>foo</div>').appendTo('#bar'); 
alert(1); 

好处是,您可以使JSON-P调用跨域。缺点是你仍然可以开放自己的XSS攻击。但说实话,无论你做什么,这总是一个问题。只要你点了你的Is并穿过你的Ts,我认为可以做任何一个选择。

为了提供一个非-EVAL/SCRIPT选项,你可以描述后续JS代码,您要执行的性质是什么?