如何製作一個實時的HTML預覽textarea，以防止HTML /腳本注入

我正在轉向這裏作爲最後的手段。我搜索了谷歌，我遇到了麻煩來解決。我有一個帶有textarea元素的表單，它允許您在該區域中鍵入html，並且如果您有預覽模式處於活動狀態，則會在您輸入時呈現HTML標記。與StackOverflow在新帖子下方顯示預覽的方式不同。如何製作一個實時的HTML預覽textarea，以防止HTML /腳本注入

但是，我最近發現我的功能有一個漏洞。我所要做的就是輸入類似：

</textarea> 
    <script>alert("Hello World!");</script> 
<textarea style="display: none;">

而且不僅從textarea的生活中做到這一點來看，如果你保存表單和重裝說，在不同的頁面數據的代碼仍然textarea的範圍內執行上所述不同頁面但用戶不知道;對他們來說，所有看到的都是一個textarea（如果沒有明顯的警報）。

我發現此帖; Live preview of textarea input with javascript html，並試圖重構我的JS到那裏接受的答案，因爲我注意到我無法在JSFiddle示例中編寫腳本標記，但也許這是一些JSFiddle阻止該行爲，但我無法在我的JS文件。

這幾行字是我用住渲染HTML標記：

$(".main").on("keyup", "#actualTextArea", function() { 
    $('#previewTextArea').html($('#actualTextArea').val()); 
}); 

$(".main").on("keydown", "#actualTextArea", function() { 
    $('#previewTextArea').html($('#actualTextArea').val()); 
});

是否有這個可能進行重構，因此它是安全的方法嗎？我目前唯一的想法是擦除實時預覽，並使用開/關切換並對其進行編碼，但我真的認爲這是一個很酷的功能，並希望保留它而不是切換。有沒有辦法「實時編碼」它或逃避某些標籤或什麼？

來源

2017-03-31 Z. Fenton

編輯：其實，我覺得這個解決方案是一個小更清潔，並使下面的代碼不必要。在速度頁面中，所有需要的是利用Spring框架。所以，我這個替換textarea的，像這樣：

#springBindEscaped("myJavaObj.textAreaText" true) 
<textarea id="actualTextArea" name="${status.expression}" class="myClass" rows="10" cols="120">$!status.value</textarea>

這與一些後端的Java驗證配對，並最終成爲一個更清潔的解決方案。

但是，如果你想有一個無彈簧/速度的解決方案，那麼這下面工作得很好

我拼湊起來的一個快速解決方案作爲我的主要目的是爲了消除別人輕鬆執行腳本的能力。這是不理想的，我「米不是說這是最好的答案，所以，如果有人發現一個更好的解決方案，請不要共享我創建了一個。‘的sanitize’功能，像這樣：

function sanitize(text){ 
    var sanitized = text.replace("<script>", ""); 
    sanitized = sanitized.replace("</script>", ""); 
    return sanitized; 
}

然後前兩事件處理程序現在看起來像：

$(".main").on("keyup", "#actualTextArea", function() { 
    var textAreaMarkup = $('#actualTextArea').val(); 
    var sanitizedMarkup = sanitize(textAreaMarkup); 
    $('#actualTextArea').val(sanitizedMarkup); 
    $('#previewTextArea').html(sanitizedMarkup); 
}); 

// This one can remain unchanged and infact needs to be 
// If it's the same as above it will wipe the text area 
// on a highlight-backspace 
$(".main").on("keydown", "#actualTextArea", function() { 
    $('#previewTextArea').html($('#actualTextArea').val()); 
});

隨着Java方面的衛生，以防止任何傷害被存儲在數據庫中，這符合我的目的，但我很開放的一個更好的解決方案，如果它存在。

來源

2017-03-31 23:05:36

爲了淨化你的文本區域預覽只需更換所有<和>與他們的HTML字符代碼等同於：

function showPreview() 
 
{ 
 
    var value = $('#writer').val().trim(); 
 
    value = value.replace("<", "&lt;"); 
 
    value = value.replace(">", "&gt;"); 
 
    $('#preview').html(value); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="writer" onInput="showPreview();"> 
 
</textarea> 
 
<br/> 
 
<hr/> 
 
<div id="preview"> 
 
</div>

來源

2017-03-31 19:55:08

這並不能防止我在上面分享的漏洞...... :(我試圖阻止腳本標記被執行，這可能嗎？ –

如何製作一個實時的HTML預覽textarea，以防止HTML /腳本注入

回答

相關問題