HTML /スクリプトインジェクションに対して安全なライブHTMLプレビューテキストエリアを作成する方法

Question

私は最後の手段としてここに向っています。私はgoogleを洗ったし、解決に苦労している。私はエリアにhtmlと入力できるtextarea要素を持つフォームを持っていて、プレビューモードをアクティブにしていると入力するとHTMLマークアップが表示されます。 StackOverflowが新しい投稿の下にプレビューを表示する方法とあまり違いはありません。

ただし、私の機能に脆弱性があることが最近判明しました。私が行うようになったすべてのようなものタイプです：あなたは、フォームやリロードを保存した場合、

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

だけでなく、ライブテキストエリア内から、この実行を行うに異なるページのデータは、このコードはまだ上のテキストエリア内で実行されると前記異なるページを前記ユーザに知らせるステップと、それらにはすべてテキストが表示されます（明らかに警告がない場合）。

この投稿が見つかりました。 Live preview of textarea input with javascript html JSFiddleの例でスクリプトタグを書くことができなかったことに気付いたので、私のJSを受け入れられた答えにリファクタリングしようとしました。JSFiddleはその動作をブロックしていますが、JSファイル。

これらの数行は、私はHTMLマークアップをレンダリング生きるために使用するものである：

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

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

は、それが安全ですので、これをリファクタリングすることができます方法はありますか？現時点で私の唯一のアイデアはライブプレビューを拭き取り、オン/オフを切り替えてエンコードすることですが、これはクールな機能だと思っています。トグルの代わりにライブを維持したいと考えています。それを "ライブエンコード"する方法や、特定のタグや何かをエスケープする方法はありますか？

Answer 1

編集：実は、私はこのソリューションは少しだと思いますクリーナーは、以下のコードを不要にします。速度ページで必要なのは、Springフレームワークを利用することだけです。だから私はこれでテキストエリアを置き換えるので、同じよう：

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

これは、いくつかのバックエンドのJavaの検証とペアになって、それは非常にきれい解決されて終わります。

しかし、あなたは非春/速度・ソリューションが必要な場合は、これは以下の私の主な目的は、他の人が簡単にスクリプトを実行するための能力を排除することであるよう

---

は、私が一緒に簡単な修正を石畳だけで正常に動作。それは理想的ではない、と私は、「それが最良の答えであることを主張しないM、そう誰かがよりよい解決策を見つけた場合、共有をしてください、私が作成した。 『サニタイズ』機能それほどのように：次に

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

前の2イベントハンドラは、現在のように見える：DBに格納されている有害な何かを防ぐために、Java側の衛生とともに

$(".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()); 
}); 

、これが私の目的を果たしますが、それが存在する場合、私はよりよい解決策に非常にオープンです。

Answer 2

単にその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>