轉義內容與jQuery的.html（）函數

我需要接受任意的用戶輸入。後來，我想將已經轉義爲HTML實體的輸入複製到textarea中，以便編輯它。但是，jQuery的jQuery.html()函數讀出HTML實體，就好像它們是真實的HTML並將用戶腳本直接注入到頁面中。我需要抓取用戶輸入的內容，即使它包含<script>標籤，並輸出到可以編輯它的textarea。轉義內容與jQuery的.html（）函數

所以，我需要這樣的：

<textarea name="empty"></textarea> 
<div name="user-input"> &lt;script&gt; window.alert('hi'); &lt;/script&gt; </div>

變成這樣：

<textarea name="empty"> &lt;script&gt; window.alert('hi'); &lt;/script&gt; </textarea> 
<div name="user-input"> &lt;script&gt; window.alert('hi'); &lt;/script&gt; </div>

JavaScript的觸發器。 textarea變爲：

<textarea name="empty"> <script> window.alert('hi'); </script> </textarea>

顯示一個空的文本框並將用戶的JavaScript注入頁面。

現在我獲取用戶輸入的內容，並將它們放置到textarea的，像這樣：

$('#edit-textarea').html(($('#user-input').text()));

我已經試過這幾個變化無濟於事。

請參閱http://jsfiddle.net/vkRkt/8的測試用例。

編輯：

請參閱下面的討論。我的解決方案是使用jquery.val()而不是jquery.html()。我跳過val，因爲我的印象是它是jquery.attr('value', new_value)的別名，它有它自己的注入問題（可以用「」來停止）。val()與attr('value', val)不一樣，在我的注入嘗試中似乎是安全的簡短的測試。

如果有人碰到這個以後運行，並知道val其實並沒有做到這一點的安全方法，請回答，並立即更新我們。

感謝。

來源

2011-10-04 jeffcook2150

$('#edit-textarea').val(($('#user-input').text()));

工作正常我，我也嘗試使用.text()而不是.val()，它當然也保持逃跑。如果您不希望數據爲HTML，請勿使用.html()。

jsFiddle Demo

來源

2011-10-04 08:56:00 kapa

我以前調整值，但是這不是真的修改textarea的內容，*和*我的報價都沒有逃過aforehand這麼一個簡單的「允許用戶注入正確的地方。我希望避免通過使用html（），我只想填寫和 – jeffcook2150

之間的區域有趣的是，經過進一步考慮，val（）將該值設置爲JavaScript屬性，我相信它只是一個快捷方式'attr（'value'，new_value）'，所以也許這會起作用。謝謝，我會嘗試一下 – jeffcook2150

HTML只是開始的位置，從此以後，所有事情都發生在DOM中。 – kapa

轉義內容與jQuery的.html（）函數

回答

相關問題