Welche Zeichen sind sicher, nicht mit CSS-Wertkontext zu entkommen?

Question

Ich habe eine Zeichenfolge, die vom Benutzer ankommt, und wird dann in einen großen CSS-Block mit einem CSS-Parser eingefügt.

CSS-Escaping kann mit \C (wobei C ein Zeichen ist), \HexOfC  (mit Leerzeichen) oder \6DigitHexOfC erfolgen.

Im Allgemeinen können alle Zeichen sicher maskiert werden, und CSS würde immer noch wie erwartet ausgeführt. Die folgenden Werke:

div { 
 
    background: \23 f66; 
 
}

<div>Test</div>

Allerdings mag ich noch die CSS-Eigenschaften als „sauber“ wie möglich sein, weil ich will, zum Beispiel, URLs und Regeln der Lage sein, sauber zu sehen mit dem Inspektor.

---

Es gibt Zeichen, die offensichtlich schlecht sind. {};\* sollten alle maskiert werden, da sie verwendet werden können, um von der aktuellen Regel zu brechen. Ich verwalte eine Whitelist (alles wird erlaubt, außer was erlaubt ist) von Charakteren (im Gegensatz zu einer Blacklist, wo alles erlaubt ist, außer was nicht erlaubt ist). Die Whitelist-Zeichen, die ich derzeit habe, ist

'#', ',', '.', '(', ')', '-', '%', '+', '=', '/', ' ', ':', '\'', '"', '\n', '\r' 

Gibt es gefährliche Zeichen hier? Alles, was verwendet werden kann, um aus einer Regel auszubrechen und den Rest des CSS-Blocks zu beeinflussen. Gibt es Charaktere, die nicht hier sind und unnötigerweise entkommen könnten? (Alphanumerische Zeichen sind standardmäßig nicht maskiert.)

Answer 1

Anstatt die Eingabe zu bereinigen, können Sie einfach Elemente übertragen lassen.

Im Grunde ein Client generiert structur Datei:

[ 
    MyDiv: { # Key 
     background: "#FFFFFF" # Element 
    } 
] 

In diesem Fall müssen Sie nur eine Datei erstellen.

Dummy-Code:

StringBuilder sb = new StringBuilder(); 
foreach(String key: structure.getKeys()) { 
    final List<Element> e = structure.getElements(key); 
    sb.append(".") // This may be changed of course 
     .append(key) // ID or class based on type above 
     .append("{") 
     // Append Elements 
     .append("}"); 
} 

erzeugenden Elemente sollte einfach sein.

Jedes Element ist nur

S: = element-key: Element-Wert;

Dann könnten Sie auch spezielle Befehle auf die weiße Liste setzen.

Wenn Sie desinfizierende behalten möchten, werfen Sie einen Blick hier: http://www.w3.org/TR/CSS21/grammar.html#scanner