Quali caratteri sono sicuri di non sfuggire al contesto di valori CSS?

Question

Ho una stringa che arriva dall'utente e viene quindi inserita in un grande blocco CSS utilizzando un parser CSS.

L'escape CSS può essere eseguito con \C (dove C è un carattere), \HexOfC  (con uno spazio) o \6DigitHexOfC.

In genere, tutti i caratteri possono essere sfuggiti in modo sicuro e i CSS continuerebbero a funzionare come previsto. Le seguenti opere:

div { 
 
    background: \23 f66; 
 
}

<div>Test</div>

Tuttavia, ho ancora voglia le proprietà CSS di essere il più "pulito" possibile, perché voglio, per esempio, di essere in grado di visualizzare gli URL e le regole in modo pulito con l'ispettore.

---

Ci sono caratteri che sono ovviamente negativi. {};\* devono essere tutti sfuggiti perché possono essere utilizzati per interrompere la regola corrente. Sto gestendo una lista bianca (tutto viene sfuggito, eccetto per quello che è permesso) di personaggi (al contrario di una lista nera in cui tutto è permesso, tranne che per quello che non lo è). I caratteri autorizzati che ho attualmente sono

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

Ci sono personaggi pericolosi qui? Tutto ciò che può essere usato per uscire da una regola e influenzare il resto del blocco CSS. Ci sono personaggi che non sono qui che verrebbero evitati senza necessità? (I caratteri alfanumerici non sono sfuggiti di default).

Answer 1

Invece di disinfettare l'input, è sufficiente consentire il trasferimento degli elementi.

In sostanza un client di file structur generato:

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

In questo caso è sufficiente creare un file.

codice fittizio:

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

elementi che generano dovrebbe essere facile.

Ogni elemento è solo

S: = elemento chiave: elemento value;

Quindi potresti autorizzare anche comandi speciali.

Se si desidera mantenere la sanificazione, date un'occhiata qui: http://www.w3.org/TR/CSS21/grammar.html#scanner