web-dev-qa-db-ja.com

カスタムCSSをエスケープする方法

私はWordPressテーマを作成しています。このテーマでは、ユーザーがテーマオプションからカスタムCSSを追加することを許可しています。このCSSコードは、次のコードを使用して、ページのヘッドセクションに直接表示されます。

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

ここでesc_html();を使うべきですか？最初は、コードがスタイルタグの間にあるのであれば、問題にならないはずですが、今は混乱しています。

助けてください。

securitytheme-optionsescapingsanitization
6
user1981248

あなた（そしておそらくテーマ作家の99％）がやろうとしていることはただ間違っています。テーマをカスタマイズするためにCSSを知っていることをユーザーに期待するべきではありません。また、そのような低レベルに入る必要がある場合は、子テーマを作成してCSSファイルに変更内容を挿入するのが正しいでしょう。

CSSは一般的なHTMLではないので同じようにエスケープすることはできないので、記述した方法でCSSを入力するのは面倒ですが、それをサニタイズして削除することも不可能です。最終的には、ユーザーのCSSを壊さないようにするために「そのまま」出力する必要がありますが、そのような機能が最も有用な場所では、マルチサイトでもあります。安全でない.

1
Mark Kaplun

CSSをヘッダーに直接印刷するのではなく（これはベストプラクティスではありません）、 wp_add_inline_style でCSSを追加できます。 wp_enqueue_scriptsにフックして、テーマのスタイルシートの後にCSSを追加します。

だから、これはあなたのコードがどのようになるかです：

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

以下を使用して、すでにテーマのメインスタイルシートをエンキューした後にこれを使用する必要があります。

wp_enqueue_style( 'style', get_stylesheet_uri());

スタイルシートに選択したIDにも注意してください。

0
Jack Johansson