Come preformare il filtro CSS basato su whitelist in PHP

Question

Sto lavorando su un sito e vorrei rendere un utente in grado di inserire CSS personalizzati in modo che vengano visualizzati pubblicamente.

Tuttavia, visto che una buona parte degli attacchi XSS può essere preformata tramite CSS, mi piacerebbe essere in grado di trovare un modo per "pulire" l'output CSS, analogamente a come funziona HTML Purifier, analizzando il CSS, in esecuzione il CSS analizzato contro una whitelist, e quindi l'output di un nuovo foglio di stile basato sul CSS con parser e whitelist.

Esiste già una biblioteca come questa? In caso contrario, esiste una libreria di analisi CSS che può essere utilizzata per creare un'implementazione personalizzata?

Answer 1

immagino che stai andando a scrivere il proprio parser CSS e filtro, quindi ecco quello che avevo in considerazione, anche se non ho mai fatto una cosa del genere:

• Fai un (bianco) elenco delle proprietà CSS accettabili che gli utenti possono utilizzare. Come: color, font-family.
• Credo che potrebbe essere meglio non consentire forme a mano corta come background, almeno all'inizio, in modo da poter facilmente analizzare i valori. Richiedere che scrivano esplicitamente background-color, background-image.
• Se desideri URL, consenti solo URL relativi e scarta tutto ciò che non sembra nemmeno un URL. Registra comunque questi problemi, in modo da poter migliorare il parser e il validatore.
• Sii molto severo nel tuo parsing, scarta tutto ciò che il tuo parser non capisce anche se sarebbe un CSS valido. In altre parole, crea il tuo sottoinsieme CSS.

Durante l'analisi, la parte più difficile sarebbe il parsing di complex CSS selectors. Ma puoi anche imporre il tuo sottoinsieme.

Ecco po 'di codice (pseudo), forse vi aiuterà in qualche modo:

<?php 

function tokenizeCSS() { 
    return array(
     array(
      'selector' => '#foo .bar', 
      'properties' => array(
       'background-color' => 'transparent', 
       'color'   => '#fff', 
      ), 
     ); 
    ); 
} 

function colorValidator($color) 
{} 

/** 
* This is basically the white list. Keys are accepted CSS properties 
* and values are the validator callbacks. 
*/ 
$propertyValidators = array(
    'background-color' => 'colorValidator', 
    'color'   => 'colorValidator', 
); 

$filteredRules = array(); 

foreach (tokenizeCSS() as $rule) { 
    if (! validSelector($rule['selector'])) { 
     continue; 
    } 

    foreach ($rule['properties'] as $property => $value) { 
     /** 
     * Check property is in white list 
     */ 
     if (! isset($propertyValidators[$property]) { 
      continue; 
     } 

     /** 
     * Check property is valid 
     */ 
     if (! $propertyValidators[$property]($value)) { 
      continue; 
     } 

     /** 
     * Valid rule 
     */ 
     $filteredRules[$rule['selector']][$property] = $value; 
    } 
}