WordPress 4.9.9でSVGがアップロードできない!原因と応急処置

Advertisement

このWordPressブログでSVG画像をアップロードしようと思ったら「セキュリティの理由によりこのファイル形式は許可されていません」とエラーが出てくるようになってしまいました。このブログでは「SVG Support 」というプラグインを入れて対応していたんですが、どうやらWordPress 4.9.9でプラグインが機能しなくなってしまったようです。

参考までに以前書いたSVGについての記事へのリンクです:

当面の対処法

当面は以下の2つの方法のどちらかで対処ができそうです。

1. プラグインを入れ替える

取り急ぎ、このブログでは「Safe SVG 」というプラグインに入れ替えて対処しました。こちらのプラグインは4.9.9でテストされていて、5.0.1にアップデートしたこのブログでも問題なく機能しました。

2. SVGファイルにXML宣言を追加する

SVGファイルをテキストエディタで開いてXML宣言が入っているか確認します。以下が入っていなかったら、SVGファイルの最初の行に追加します。

<?xml version="1.0" encoding="utf-8"?>

このブログで使っていたSupport SVGプラグインのSupportページ でプラグイン開発者の方がコメントをしてくれていました。開発者の方は対策を講じたいと言っているのですが、一人で開発しているプラグインで、しかも、彼が今週手術するとかで、すぐに対応するのは難しいとのことです。大変な時に調査してコメントまで残してくれて、ありがたいですね。しっかり療養して治してほしいです。

functions.phpにMIMEタイプを追加してもダメだした

ちなみに、functions.phpに以下のfilterを入れてもダメでした。ここは関係ないみたいですね(というか、プラグインでこの辺が対処されてるはず)。

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

原因

WordPress 5.0.1でアップロードされるファイルのMIMEの確認が強化されて、アップロードされるファイルの拡張子と内容がマッチしているか確認をするようになったとのことです。この辺が怪しそうですけど、SVGがアップロードできなくなったのは4.9.9なので、直接関係しているかはわかりません。(ひょんさんより「4.9.9も5.0.1と同じセキュリティアップデート」とのコメントをいただきました。4.9.9からSVGがアップロードできなくなったのは、MIMEの確認の強化が原因のようですね。)

アップロードファイルのMIMEの検証について

以下のページの「MIME validation for uploaded files」というセクションに該当する情報が書かれていました。

SVGファイルの検証について

また、コメント欄のconnoroharaさんのコメント に、SVGファイルの検証(Validation)について書かれていて、この辺が一番怪しそうです。

I do see a downside with SVG though. Most of the time, when an SVG is used, the <?xml?> tag is stripped. Adobe Illustrator does this by default when exporting to SVG. This leads to these SVG files to not pass validation.
Since SVG is becoming more and more popular nowadays (and for good reason!), I would say that an SVG should be validated in a different way, allowing SVG files with their <?xml?> stripped to pass validation, if possible.

以下、意訳です。

SVGについてはダウンサイドが考えられます。ほとんどの場合、SVGが使われる際には<?xml?>が削除されてしまいます。Adobe IllustoratorではSVGに書き出す際、デフォルトでそれが行われます。これが、それらのSVGファイルが検証を通らない原因になります。
SVGはますます人気が高まっているので(しかも良い理由で!)、可能であれば<?xml?>が削除されたSVGが検証を通るように、SVGは他の方法で検証されるべきだと思います。

僕がアップロードして失敗したSVGファイルは、確かに<?xml?>タグが入っていませんでした。Affinity Designerで「SVG(Web用)」として書き出したものです。ちなみに「SVG(書き出し用)」で書き出した場合、<?xml?>タグ(XML宣言)は残っていました。これだったらファイル検証をパスするのかな?

Safe SVGのSanitizationについて

これが原因だとすると、functions.phpfilterを追加してもダメだったのが納得です。だけど、Safe SVGプラグインではどうやって対処してるんだろう?

Safe SVGではSVGファイルのチェックにsvg-sanitizer というライブラリを使っていて、セキュリティの問題がないかチェックしているそうです。もしかして、このSanitization(消毒)の際に<?xml?>タグを挿入してるのかな?

プラグインのサポートページの情報

以下、参考までにSVG Supportプラグインのサポートページ に、2つのスレッドが立っていました。この辺を追っていったら、後日、もう少し詳しい原因と解決方法が見つかるかもしれません。

新たな情報が見つかったら、この記事に追加していきます。取り急ぎ、ご報告でした!

更新情報

  • 追加の情報が出てきたので、情報を追加して文章を整理しました(2018/12/17)

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net Twitter @rriver 、またはFacebook までご連絡ください。

“WordPress 4.9.9でSVGがアップロードできない!原因と応急処置” への2件のフィードバック

  1. ひょん より:

    4.9.9も5.0.1と同じセキュリティアップデートなので、ファイルチェックが強化されてるはずです。

    • ryo より:

      情報ありがとうございます!記事に情報を追加しておきました。