HTML/스크립트 주입에 대해 안전한 HTML 미리보기 텍스트 영역을 만드는 방법

Question

나는 최후의 수단으로 여기를 돌리고 있습니다. 나는 구글을 샅샅이 뒤졌고 해결책에 오는 데 어려움을 겪고있다. 영역에 html을 입력 할 수있는 textarea 요소가있는 양식이 있으며 미리보기 모드가 활성화되어 있으면 입력 할 때 HTML 태그를 실시간으로 렌더링합니다. StackOverflow가 새로운 게시물 아래에 미리보기를 보여주는 방식과 크게 다르지 않습니다.

그러나 최근에 내 기능에 취약성이 있음을 발견했습니다. 내가 할 수있어 모두가 같은 유형 :

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

을 만 라이브 텍스트 영역 내에서이 실행을하지 않습니다, 당신은 양식을 저장하고 재 장전이 코드는 여전히 텍스트 영역 내에서 실행하는 다른 페이지에 데이터를했다 경우 상기 다른 페이지이지만 상기 사용자에게 알려지지 않은; 그 (것)들에게 보는 모두는 textarea (명백하게 경보가없는 경우에)이다.

이 게시물을 발견했습니다. Live preview of textarea input with javascript html, JSFiddle 예제에서 스크립트 태그를 작성할 수 없다는 것을 알아 냈으므로 여기에 받아 들인 대답으로 JS를 리팩터링하려고 시도했다. JSFiddle 예제에서 스크립트 태그를 작성할 수는 없지만 JSFiddle은이 동작을 차단하지만 JS 파일. 안전하게 그래서이 리팩토링 할 수있는 방법이 있나요

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

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

:

이 몇 줄

내가 HTML 마크 업을 렌더링 살고 무엇을 사용? 현재 나의 유일한 아이디어는 라이브 미리보기를 지우고 on/off 토글을 사용하여 인코딩하는 것입니다. 그러나 이것은 정말로 멋진 기능이라고 생각하며 토글 대신 라이브로 유지하려고합니다. "라이브 인코딩"하거나 특정 태그 또는 어떤 것을 벗어날 수있는 방법이 있습니까?

Answer 1

편집 : 사실,이 솔루션은 작은 생각 클리너, 그리고 아래의 코드가 필요하지 않습니다. Velocity 페이지에서 필요한 것은 Spring 프레임 워크를 이용하는 것이다. 일부 백엔드 자바 검증와 짝을

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

이를 그리고 그것은 깔끔한 해결 될 수있을 테니까요 : 그래서 난과 같이이 함께 텍스트 영역을 대체합니다.

그러나이 아닌 봄/속도 솔루션을 원하는 경우, 다음이 아래에있는 내 주요 목적은 다른 사람들이 쉽게 스크립트를 실행 할 수있는 기능을 제거하는 것입니다으로

---

내가 함께 빠른 수정 자갈길 잘 작동합니다 . 그것은 적합하지, 난 "는 가장 좋은 대답을 주장하고 있지 않다, 그래서 누군가가 더 나은 솔루션을 발견하면, 공유 제발 내가 만들었습니다."살균 "기능과 같이 : 다음

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

앞의 두 DB에 저장되는 유해한 것을 방지하기 위해 자바 측 위생과 함께

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