INPUT 요소에 특수 문자를 설정하여 자바 스크립트를 실행하지 않습니다

Question

특수 문자 (인코딩 된 방식으로)를 입력에 사용할 수 있지만 XSS를 금지하고 싶습니다. html 속성을 직접 설정할 때 (예 : jquery를 사용하여 .html ("my value")) 문제가있는 것 같지만 INPUT과 같은 태그를 닫지 않고 요소를 사용할 때 문제가 발생합니다.

이 내 시나리오 :

동적 인 클라이언트 웹 서비스 요청 사용 아약스, 그래서 페이지를 구축하는 인라인 코드의 어떤 종류를 사용할 수 없습니다. 이 기본 페이지가로드 된 후 발생 : 문자 인코딩

var data = { 
     "key": "value" 
    } 
    $.ajax({ 
     type: "POST", 
     url: "WebService.asmx/GetData", 
     contentType: "application/json; charset=utf-8", 
     data: JSON.stringify(data), 
     dataType: "json", 
     success: function callFunction(result) { 
      if (result.d != null) { 
       // Building an HTML block 
       var preBuiltHtml = "<table style=\"width:100%;\">" + 
        "<tr>" + 
         "<td>Entry 1:</td>" + 
         "<td><input type=\"text\" id=\"txtEntry1\" maxlength=\"100\" value=\"" + result.d.return_value + "\" style=\"width:100%;\" ></td>" + 
        "</tr>" + 
       "</table>"; 
       $('#someDialog').html(preBuiltHtml); 
      } 
      else { 
       showMessageDialog("Permission denied", 1); 
      } 
     }, 
     error: function() { showMessageDialog('Error!', 2); } 
    }); 

서버 측 (ASP.NET)을 방지 XSS :

클라이언트 측

[WebMethod(true)] 
public SomeClass GetProjectDetails(string proj_nr) 
{ 
    SomeClass result = new SomeClass(); 
    result.return_value = Encoder.HtmlEncode("<IMG SRC=\"javascript: alert('XSS');\">"); 
    return result; 
} 

이 제대로 입력 요소에 채울 ,하지만 javascript가 실행됩니다. jquery .val() 메서드를 사용하여 값을 설정하면 요소의 html이 완전히 엉망이됩니다. .html()을 사용하여 div에 동일한 값을 설정하면 모든 항목이 정상적으로 작동하지만 input 요소에 대해서는 그렇게 할 수 없습니다.

클라이언트 측에서 실행되지 않고 이러한 종류의 가치를 설정하는 올바른 방법은 무엇입니까?

미리 감사

편집 : 한 가지 더, 경고 상자가 예상대로 실행, 그래서 메시지 박스가 표시되지 않습니다되지 않습니다. 사용자 입력을 렌더링 할 때

Answer 1

당신이 오히려 값을 설정해야 웹 서비스에서 검색 문자열 :

편집 2 :하지만 크롬의 개발자 모드에서 네트워크 탭에서 찾고, 당신은 항목을 볼 수 있습니다 같은 HTML, 뭔가를 인라인보다 :

var preBuiltHtml = "<table style=\"width:100%;\">" + 
    "<tr>" + 
    "<td>Entry 1:</td>" + 
    "<td><input type=\"text\" id=\"txtEntry1\" maxlength=\"100\" style=\"width:100%;\" ></td>" + 
    "</tr>" + 
"</table>"; 

var input = $('#someDialog').html(preBuiltHtml).find('#txtEntry1'); 
input.val(result.d.return_value); 

당신은 이이 좀 더 구체적으로 수 "완전히 요소의 HTML을 망쳐 놨어요"라고?

내가 직접이 예상 작품으로이 ...하려고하면

var unescaped = '<IMG SRC="javascript: alert(\'XSS\');">'; 
 
var escaped = '&lt;IMG&#32;SRC=&quot;javascript: alert(&#39;XSS&#39;);&quot;&gt;' 
 

 
// Escaped content is still escaped 
 
var input1 = document.querySelector('#test1'); 
 
input1.value = escaped; 
 
    
 
// Unescaped content is preserved 
 
var input2 = document.querySelector('#test2'); 
 
input2.value = unescaped; 
 

 
// HTML should use the escaped version 
 
var div3 = document.querySelector('#test3'); 
 
div3.innerHTML = '<input type="text" value="' + escaped + '">'

<input id=test1> 
 

 
<input id=test2> 
 

 
<div id=test3></div>

당신이 자바 스크립트 인라인을 실행하지 않지만 시도하는 <IMG SRC을 사용하기 때문에 네트워크 탭의 오류는 (정확히 마치 <IMG SRC="javascript.png">을 완성한 것처럼) 검색 할 수 있습니다.