Wie Whitelist-basierten CSS-Filter in PHP

Question

Vorformling Ich arbeite an einer Website und ich möchte einen Benutzer in der Lage, benutzerdefinierte CSS eingeben, die öffentlich angezeigt werden.

Da jedoch eine ganze Reihe von XSS-Angriffen über CSS ausgeführt werden können, möchte ich in der Lage sein, einen Weg zu finden, die CSS-Ausgabe zu "säubern", ähnlich wie HTML Purifier durch Parsen des CSS läuft das geparste CSS gegen eine Whitelist und die Ausgabe eines neuen Stylesheets basierend auf dem geparsten CSS und der Whitelist.

Gibt es schon eine solche Bibliothek da draußen? Wenn nicht, gibt es eine CSS-Parsing-Bibliothek, die zum Erstellen einer benutzerdefinierten Implementierung verwendet werden kann?

Answer 1

Ich denke, Sie gehen Ihren eigenen CSS-Parser und Filter zu schreiben, also hier, was ich als würde, obwohl ich noch nie so etwas getan haben:

• eine (weiß) Liste der Stellen akzeptable CSS-Eigenschaften, die Ihre Benutzer verwenden können. Wie: color, font-family.
• Ich glaube, es könnte besser sein, Kurzhandformen wie background zumindest am Anfang nicht zuzulassen, so dass Sie die Werte leicht analysieren können. Erfordert, dass sie explizit background-color, background-image schreiben.
• Wenn Sie URLs möchten, lassen Sie nur relative URLs zu und verwerfen Sie alles, was nicht einmal annähernd wie eine URL aussieht. Protokollieren Sie diese Probleme trotzdem, damit Sie Ihren Parser und Validator verbessern können.
• Seien Sie sehr strikt in Ihrer Analyse, verwerfen Sie alles, was Ihr Parser nicht versteht, auch wenn es gültiges CSS wäre. Mit anderen Worten, erstellen Sie Ihre eigene CSS-Teilmenge.

Beim Parsen wäre der schwierigste Teil das Parsen von complex CSS selectors. Aber Sie können hier auch Ihre eigene Teilmenge aufstellen.

Hier einige (Pseudo-) Code, vielleicht wird es Ihnen irgendwie helfen:

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