Comment filtrer l'entrée utilisateur css?

Question

Dans mon application, je permets aux utilisateurs de télécharger leurs feuilles de style CSS afin qu'ils puissent être appliqués aux modèles. Le css est écrit comme une feuille de style interne, parce que pour le moment je ne voudrais pas exposer la feuille de style css à d'autres utilisateurs.

Ceci permet aux utilisateurs d'inclure du code malveillant dans le fichier css. Initialement, mon plan était de convertir tous les '<' et '>', mais cela est nécessaire dans la syntaxe css. Je suis après une solution de liste blanche, car il ne sera pas possible d'éliminer exhaustivement les caractères indésirables.

Avez-vous des suggestions pour mettre en œuvre des mesures de sécurité dans ce scénario?

Answer 1

Vous devriez également filtrer au moins les expressions IE et les propriétés FF -moz-binding ... les deux peuvent être utilisés pour exécuter javascript (potentiellement dangereux) en utilisant css.

This cheat sheet contient les tactiques XSS les plus évidentes, y compris certaines CSS. La solution la plus sûre serait probablement la liste blanche comme vous l'avez suggéré (s'il est acceptable de limiter les utilisateurs à n'utiliser que les propriétés de la liste blanche).

Answer 2

Utiliser CDATA et échapper à la séquence de terminaison (]]>). Je ne suis pas sûr de la compatibilité du navigateur, cependant.

l'exemple (non testé):

<?PHP 

function strReplaceAll($needle, $replacement, $haystack) 
{ 
    // Check for infinite loop. (NOT FOOL PROOF!) 
    if(strpos($replacement, $needle) === FALSE) 
     return; 

    $numReplacements = 42; 

    while($numReplacements) 
    { 
     $haystack = str_replace($needle, $replacement, $haystack, &$numReplacements); 
    } 

    return $haystack; 
} 

?> 

<style type="text/css"> 
/* 
<![CDATA[ 
*/ 

<?PHP echo sstrReplaceAll(']]>', '', $userCss); ?> 

/* 
]]> 
*/ 
</style> 

Answer 3

I mis en oeuvre un filtre qui remplace tous les caractères < à <. La raison en est que CSS n'a pas besoin du caractère <; Le seul caractère dont il a besoin est le > qui est utilisé pour les sélecteurs enfants.

De cette façon, les utilisateurs ne peuvent pas ouvrir des balises pour écrire du code malveillant.

Je suis plus qu'heureux de considérer d'autres/meilleures solutions.

Answer 4

Ne pas autoriser les utilisateurs à télécharger un fichier CSS, créer une interface qui génère les fichiers CSS de façon dynamique en fonction des options sélectionnées par l'utilisateur. Les options que vous autorisez alors vous pouvez faire un fichier CSS fisical ou vous pouvez faire une application dynamique qui écrit CSS basé sur cette configuration, cela évite d'avoir beaucoup de fichiers CSS sur le serveur ... son autre approche et vous n'avez pas besoin de vérifier chaque exploit XSS posible , il est plus facile de définir ce qui est autorisé que d'analyser CSS et de rejeter du code dangereux.