Festlegen von Sonderzeichen im INPUT-Element, das Javascript nicht ausführt

Question

Ich habe das Problem, dass ich Sonderzeichen (in einer codierten Art und Weise) bei der Eingabe verwendet werden, aber XSS verhindern soll. Ich habe dieses Problem anscheinend nicht, wenn ich das html-Attribut direkt setze (z. B. indem ich .html ("mein Wert") mit jquery), aber das Problem passiert, wenn ich Elemente verwende, ohne Tags wie INPUT zu schließen.

Das ist mein Szenario:

Dynamische Client-Web-Service-Anforderung mit Ajax, so kann ich nicht eine Art von Inline-Code verwenden, um die Seite zu bauen. Dies geschieht, nachdem die Basisseite geladen wird:

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); } 
    }); 

Server-Seite (ASP.NET) mit Zeichencodierung zu verhindern 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; 
} 

Auf der Clientseite wird diese richtig in dem Eingangselement füllen , aber das Javascript wird ausgeführt. Wenn ich die jquery .val() -Methode verwende, um den Wert festzulegen, wird der HTML-Code für das Element vollständig durcheinander gebracht. Wenn ich mit einem .html() denselben Wert für ein div setze, ist alles in Ordnung, aber das kann ich nicht für ein Eingabeelement tun.

Was wäre der richtige Weg, um diese Art von Wert zu setzen, ohne dass es auf der Clientseite ausgeführt wird?

Vielen Dank im Voraus

Edit: Eine weitere Sache, wird die Warnmeldung wie man erwarten könnte nicht ausgeführt, so dass kein Meldungsfeld angezeigt wird. Aber ein Blick auf die Netzwerk-Registerkarte in dem Entwickler-Modus von Chrome können Sie einen Eintrag sehen:

Edit 2: String abgerufen von Web-Service-

Answer 1

Wenn eine Benutzereingabe-Rendering sollten Sie den Wert werden Einstellung eher den HTML-Code, so etwas wie als inlining:

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); 

Sie sagten, dass „es die HTML vollständig für das Element vermasselt“ Sie spezifischer sein könnte?

Wenn ich versuche, dies direkt funktioniert es wie erwartet ...

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>

Der Fehler in dem Netzwerk-Registerkarte ist, weil Sie <IMG SRC verwendet, die inline nicht ausgeführt wird JavaScript-aber wird versuchen, um es zu erhalten (genau so, als ob Sie <IMG SRC="javascript.png"> getan hätten).