web-dev-qa-db-fra.com

Comment échapper au css personnalisé?

Je crée un thème WordPress dans lequel j'ai autorisé les utilisateurs à ajouter des CSS personnalisés à partir des options du thème. Ce code CSS est alors directement répercuté dans la section de tête de la page, avec le code suivant:

add_action('wp_head', 'theme_dynamic_css');
function theme_dynamic_css(){
  global $my_theme_options;
  $custom_css = '';
  if (isset($my_theme_options['custom-css'])) {
    $custom_css .= $my_theme_options['custom-css']."\r\n";
  }
  echo '<style id="my-theme-custom-css">'.$custom_css.'</style>';
}

Devrais-je utiliser esc_html(); ici? Au début, j'ai supposé que si le code se situe entre les balises de style, cela ne devrait pas poser de problème, mais maintenant, je suis confus.

S'il vous plaît aider.

securitytheme-optionsescapingsanitization
6
user1981248

Ce que vous (et probablement 99% des auteurs de thèmes) tentez de faire est tout simplement faux. Les utilisateurs ne doivent pas connaître le CSS pour personnaliser un thème. S'ils ont besoin d'entrer dans un niveau aussi bas, la bonne chose à faire est de créer un thème enfant et d'insérer leurs modifications dans son fichier CSS.

Saisie d’un CSS dans votre description est délicate, car CSS n’est pas un langage HTML général et ne peut pas être échappé de la même manière, mais il est également impossible de purifier et d’en supprimer le code potentiellement non sécurisé. Vous vous retrouvez dans une situation dans laquelle vous devez sortir le CSS de l'utilisateur "tel quel" afin de vous assurer de ne pas le casser, mais à l'endroit où une telle fonctionnalité est la plus utile - multisite, c'est aussi non sécurisé pour être utilisé.

1
Mark Kaplun

Au lieu d’imprimer directement le code CSS dans l’en-tête (ce qui n’est pas une pratique recommandée), vous pouvez ajouter votre code CSS via wp_add_inline_style . Accrochez-vous dans le wp_enqueue_scripts et ajoutez votre CSS après la feuille de style de votre thème.

Voici comment votre code va ressembler:

add_action('wp_enqueue_scripts', 'theme_dynamic_css');
function theme_dynamic_css(){
  global $my_theme_options;
  if (isset($my_theme_options['custom-css'])) {
    $custom_css .= $my_theme_options['custom-css']."\r\n";
  }
  wp_add_inline_style('style', $custom_css);
}

Vous devriez utiliser ceci après que vous ayez déjà mis la feuille de style principale de votre thème en file d'attente, en utilisant:

wp_enqueue_style( 'style', get_stylesheet_uri());

Faites également attention à l'identifiant que vous avez choisi pour votre feuille de style.

0
Jack Johansson