WordPress で SVG を安全に許可する方法

WordPress は .jpg、.png、.gif、.webp などを受け付け、SVG を拒否します。ネット上のチュートリアルの多くはこれを手抜かり扱いして、回避のスニペットを渡してきます。それは間違いです。WordPress が SVG を止めるのには本物のセキュリティ上の理由があり、有効にする前に知っておくべきです。

なぜ WordPress は SVG を止めるのか

SVG は画素ではなく XML です。SVG ファイルには <script> タグや onload="..." 属性、外部リソースへのリンクを含められます。悪意ある SVG をブラウザで描画すれば、メディアライブラリの中に保存型 XSS の脆弱性が居座ることになります。だからコアは「いいえ」と言います。

一行のスニペット（慎重に）

ファイルをアップロードするのが信頼できるユーザーだけ（あなたとチーム）なら、下のスニペットで足ります。テーマの functions.php か、サイト専用のプラグインに入れてください。

add_filter( 'upload_mimes', function( $mimes ) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
} );

これだけで SVG のアップロードが通ります。MIME タイプに注意してください。古いチュートリアルにある image/svg ではなく、image/svg+xml です。

信頼できないユーザーがアップロードできるなら

投稿者、寄稿者、顧客など、個人的に保証できない人がアップロードできるサイトでは、上のスニペットは安全ではありません。アップロード時のサニタイズが必要です。きれいな選択肢は二つ。

• Safe SVG（Daryll Doyle 作）。無料で、よく保守されていて、アップロード時に危険な SVG の内容を取り除きます。入れれば、許可した権限のユーザーで SVG がそのまま動きます。
• 自作する。 wp_handle_upload_prefilter にフックして、ファイルを enshrined/svg-sanitizer に通す。Safe SVG が構成に合わないときだけにしてください。

そもそも SVG を使う理由

SVG は小さく（複雑なロゴでも 5 KB 未満がざら）、どんな大きさにも劣化なく拡大でき、Retina 画面でも輪郭が鋭いままです。ロゴ、アイコン、平面のイラストには SVG が当然の選択で、PNG や WebP は妥協です。セキュリティ上の代償は本物ですが、その解決策はプラグイン一つ先にあります。やる価値はあります。

ついでに、メディアライブラリに溜まった古いロゴや使われていない画像を片づけたいなら、Media Cleaner が見つけてくれます。