2011-04-08 72 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代碼,您要執行的性質是什麼?