Escape-Anführungszeichen in JavaScript

211

Ich gebe Werte aus einer Datenbank aus (sie ist nicht wirklich öffentlich zugänglich, aber für Benutzer eines Unternehmens offen - das heißt, ich mache mir keine Sorgen um XSS ).

Ich versuche, ein Tag wie folgt auszugeben:

<a href="" onclick="DoEdit('DESCRIPTION');">Click Me</a>

BESCHREIBUNG ist eigentlich ein Wert aus der Datenbank, der ungefähr so ​​aussieht:

Prelim Assess "Mini" Report

Ich habe versucht, "durch \" zu ersetzen, aber egal was ich versuche, Firefox unterbricht meinen JavaScript-Aufruf nach dem Leerzeichen nach dem Wort " Assess" immer wieder und verursacht alle möglichen Probleme.

Ich muss die offensichtliche Antwort verfehlen, aber für mein Leben kann ich es nicht herausfinden.

Möchte jemand auf meine Idiotie hinweisen?

Hier ist die gesamte HTML-Seite (es wird irgendwann eine ASP.NET- Seite sein, aber um dies zu lösen, habe ich alles andere als den Problemcode herausgenommen).

<html>
    <body>
        <a href="#" onclick="DoEdit('Preliminary Assessment \"Mini\"'); return false;">edit</a>
    </body>
</html>
javascript quotes escaping Matt Dawdy
quelle
3
Es ist eine gute Idee, Ihren onclickEreignisanhang unauffällig zu machen und alle Ihre Datenbankinformationen auf eine Dateninsel zu verschieben. Die Dinge werden sauberer und Sie erhalten tatsächlich eine Art Syntaxfehler, wenn Ihre Zeichenfolgen falsch maskiert werden.
Justin Johnson
1
Mögliches Duplikat von Wie kann ich eine Zeichenfolge in JavaScript-Code in einem onClick-Handler maskieren? .
Peter Mortensen
Sie können auch Escape- ("String") und Unescape- ("String") JQuery-Methoden verwenden
Abhiram

Antworten:

212

Sie müssen die Zeichenfolge, in die Sie schreiben, DoEditmaskieren, um die Zeichen in doppelten Anführungszeichen zu entfernen. Sie führen dazu, dass das onclickHTML-Attribut vorzeitig geschlossen wird.

Die Verwendung des JavaScript-Escapezeichens \ist im HTML-Kontext nicht ausreichend. Sie müssen das doppelte Anführungszeichen durch die richtige XML-Entitätsdarstellung ersetzen &quot;.

Aaron
quelle
Richtig, aber wäre das nicht das? <a href="#" onclick="DoEdit('Preliminary Assessment \"Mini\"'); return false;"> edit </a> Ich habe das versucht und es ist immer noch durcheinander. Dies muss eine einfache WTF sein, aber für mein Leben kann ich es nicht sehen.
Matt Dawdy
Gibt es eine integrierte JavaScript-Funktion, die den doppelten Anführungszeichen entgeht? Abgesehen von 'quo "'. Replace ('"', '& quot;') kann ich nichts finden.
Kevin
4
Es handelt sich nicht um ein Javascript-Problem, sondern um ein HTML / XML-Codierungsproblem: Sie können keine Zeichen in doppelten Anführungszeichen in einem Attributwert haben, ohne dass diese ausgeblendet werden. Andernfalls denken Browser / Parser, dass Sie die Attributwertdeklaration beenden.
Aaron
22
Beispiel Ersatzcode:'mystring'.replace(/"/g, '&quot;');
Joshua Burns
3
Im vorherigen Kommentar gibt es ein zusätzliches Zitat. Der Code, der funktioniert, ist 'mystring'.replace (/' / g, '& quot;');
Agustin Lopez
95

&quot; würde in diesem speziellen Fall, wie vor mir vorgeschlagen, aufgrund des HTML-Kontexts funktionieren.

Wenn Sie jedoch möchten, dass Ihr JavaScript-Code für jeden Kontext unabhängig maskiert wird, können Sie sich für die native JavaScript-Codierung entscheiden:
'wird \x27
"wird\x22

Ihr Onclick würde also werden:
DoEdit('Preliminary Assessment \x22Mini\x22');

Dies würde beispielsweise auch funktionieren, wenn eine JavaScript-Zeichenfolge als Parameter an eine andere JavaScript-Methode übergeben wird (dies alert()ist eine einfache Testmethode).

Ich verweise Sie auf die doppelte Frage zum Stapelüberlauf : Wie kann ich eine Zeichenfolge in JavaScript-Code in einem onClick-Handler umgehen? .

Tsemer
quelle
2
Danke dir! Ihre Antwort ist die korrektere, da es sich unabhängig vom Kontext um natives JavaScript handelt.
scarver2
2
Dies ist die richtige Antwort, obwohl die Verwendung in einem HTML-Kontext &quot;natürlich funktioniert.
Oliver
Beachten Sie, dass &quot;dies in Eingabewerten erforderlich ist, dh <input value="\x22quoted string\x22">nicht funktioniert.
thdoan
@ 10basetom funktioniert JavaScript-Escape-Funktion natürlich nur in einem JavaScript-Kontext, wie z. B. Event-Handler ( onclick="..."). Der Wert eines valueAttributs wird nicht in einem JavaScript-Kontext verarbeitet, sondern nur in einem HTML-Kontext.
Tsemer
Ersatzcode:'mystring'.replace(/"/g, '\\x22').replace(/'/g, '\\x27')
Hühner
33 
<html>
    <body>
        <a href="#" onclick="DoEdit('Preliminary Assessment &quot;Mini&quot;'); return false;">edit</a>
    </body>
</html>

Sollte den Trick machen.

kristian
quelle
24

Leute, es gibt bereits die unescapeFunktion in JavaScript, die das Unescaping für Folgendes ausführt \":

<script type="text/javascript">
    var str="this is \"good\"";
    document.write(unescape(str))
</script>
rohtakdev
quelle
2
Eine Kombination aus "Flucht" / "Flucht" hat das getan, was ich brauchte. Vielen Dank.
Luis R.
8
Flucht / Flucht sind veraltet. obwohl encodeURI mehr als nur Anführungszeichen macht. gotochriswest.com/blog/2011/05/23/escape-unescape-deprecated
chug2k
12

Das Problem ist, dass HTML das Escape-Zeichen nicht erkennt. Sie können dies umgehen, indem Sie die einfachen Anführungszeichen für das HTML-Attribut und die doppelten Anführungszeichen für den Onclick verwenden.

<a href="#" onclick='DoEdit("Preliminary Assessment \"Mini\""); return false;'>edit</a>
dl.
quelle
5
Huch. Ich habe mich gefragt, warum ich in der Vergangenheit natürlich 'für das Attribut verwendet habe. Ich habe mich einfach nie so tief damit beschäftigt. Vielen Dank.
Matt Dawdy
6

So mache ich es im Grunde str.replace(/[\""]/g, '\\"').

var display = document.getElementById('output');
var str = 'class="whatever-foo__input" id="node-key"';
display.innerHTML = str.replace(/[\""]/g, '\\"');

//will return class=\"whatever-foo__input\" id=\"node-key\"
<span id="output"></span>
Erweitern Sie das Snippet

Ronnie Royston
quelle
2

Wenn Sie den HTML-Code in Java zusammenstellen, können Sie diese nette Dienstprogrammklasse von Apache commons-lang verwenden, um alle Escapezeichen korrekt auszuführen:

org.apache.commons.lang.StringEscapeUtils
Escapes und Unescapes Strings für Java, Java Script, HTML, XML und SQL.

ich nehme
quelle
Ich verwende org.apache.commons.lang3.StringEscapeUtils.escapeEcmaScript (Text), um methodExpression in Java zu erstellen. Vielen Dank.
Harun
1

Ich habe ein Beispiel mit jQuery erstellt

var descr = 'test"inside"outside';
$(function(){
   $("#div1").append('<a href="#" onclick="DoEdit(descr);">Click Me</a>');       
});

function DoEdit(desc)
{
    alert ( desc );
}

Und das funktioniert in Internet Explorer und Firefox.

rahul
quelle
5
Natürlich, weil Sie es nicht direkt in das Attribut einfügen. Um Ihre Methode zu verwenden, müsste ich ein Array von JS-Zeichenfolgen erstellen und dann eine beliebige Anzahl von $ ("# divxxx") ... Zuweisungen vornehmen. Weniger als optimal, aber danke für den Vorschlag.
Matt Dawdy
1

Sie können diese beiden Funktionen (siehe unten) kopieren und sie verwenden, um alle Anführungszeichen und Sonderzeichen zu umgehen / zu entfernen. Sie müssen dafür weder jQuery noch eine andere Bibliothek verwenden.

function escape(s) {
    return ('' + s)
        .replace(/\\/g, '\\\\')
        .replace(/\t/g, '\\t')
        .replace(/\n/g, '\\n')
        .replace(/\u00A0/g, '\\u00A0')
        .replace(/&/g, '\\x26')
        .replace(/'/g, '\\x27')
        .replace(/"/g, '\\x22')
        .replace(/</g, '\\x3C')
        .replace(/>/g, '\\x3E');
}

function unescape(s) {
    s = ('' + s)
       .replace(/\\x3E/g, '>')
       .replace(/\\x3C/g, '<')
       .replace(/\\x22/g, '"')
       .replace(/\\x27/g, "'")
       .replace(/\\x26/g, '&')
       .replace(/\\u00A0/g, '\u00A0')
       .replace(/\\n/g, '\n')
       .replace(/\\t/g, '\t');

    return s.replace(/\\\\/g, '\\');
}
Omanosoft
quelle
1

Im folgenden Code finden Sie die einfachen Anführungszeichen als Teil der eingegebenen Zeichenfolge mit einem regulären Ausdruck. Es wird überprüft, ob die vom Benutzer eingegebene Zeichenfolge durch Kommas getrennt ist, und gleichzeitig werden sogar einzelne Anführungszeichen, die als Teil der Zeichenfolge eingegeben wurden, ausgeblendet.

Um einfache Anführungszeichen zu umgehen, geben Sie einfach einen Schrägstrich gefolgt von einem einfachen Anführungszeichen wie: \ ' als Teil der Zeichenfolge ein. Ich habe für dieses Beispiel den jQuery-Validator verwendet, und Sie können ihn nach Belieben verwenden.

Gültige String-Beispiele:

'Hallo'

'Hallo Welt'

'Hallo Welt'

'Hallo Welt',' '

"Es ist meine Welt", "Kann das nicht ohne mich genießen.", "Willkommen, Gast"

HTML:

<tr>
    <td>
        <label class="control-label">
            String Field:
        </label>
        <div class="inner-addon right-addon">
            <input type="text" id="stringField"
                   name="stringField"
                   class="form-control"
                   autocomplete="off"
                   data-rule-required="true"
                   data-msg-required="Cannot be blank."
                   data-rule-commaSeparatedText="true"
                   data-msg-commaSeparatedText="Invalid comma separated value(s).">
        </div>
    </td>

JavaScript:

     /**
 *
 * @param {type} param1
 * @param {type} param2
 * @param {type} param3
 */
jQuery.validator.addMethod('commaSeparatedText', function(value, element) {

    if (value.length === 0) {
        return true;
    }
    var expression = new RegExp("^((')([^\'\\\\]*(?:\\\\.[^\'\\\\])*)[\\w\\s,\\.\\-_\\[\\]\\)\\(]+([^\'\\\\]*(?:\\\\.[^\'\\\\])*)('))(((,)|(,\\s))(')([^\'\\\\]*(?:\\\\.[^\'\\\\])*)[\\w\\s,\\.\\-_\\[\\]\\)\\(]+([^\'\\\\]*(?:\\\\.[^\'\\\\])*)('))*$");
    return expression.test(value);
}, 'Invalid comma separated string values.');
Dinesh Lomte
quelle
0

Entkomme auch dem Leerzeichen. Es klingt für mich so, als würde Firefox drei Argumente anstelle von einem annehmen. &nbsp;ist das nicht brechende Leerzeichen. Auch wenn es nicht das ganze Problem ist, kann es dennoch eine gute Idee sein.

der Hampster
quelle
0

Sie müssen Anführungszeichen mit doppelten Backslashes umgehen.

Dies schlägt fehl (erzeugt durch PHPs json_encode ):

<script>
  var jsonString = '[{"key":"my \"value\" "}]';
  var parsedJson = JSON.parse(jsonString);
</script>

Das funktioniert:

<script>
  var jsonString = '[{"key":"my \\"value\\" "}]';
  var parsedJson = JSON.parse(jsonString);
</script>
Büffel
quelle
0

Sie können die jQuery-Methoden Escape () und Unescape () verwenden. Wie unten,

Verwenden Sie escape(str);diese Option , um die Zeichenfolge zu umgehen und mit wiederherzustellen unescape(str_esc);.

Abhiram
quelle