WordPressでベクター画像を安全に使用する方法

公開: 2019-06-12

メディアに使用できる画像ファイルの種類は数十種類あります。箱から出して、WordPressは、 .jpeg 、 .png 、 .gifなど、より一般的な画像ファイルタイプの大部分をサポートします。ただし、ベクター画像のサポートは含まれていません。

過去に、Scalable Vector Graphics（SVG）を作成する方法とその利点について説明しました。この記事では、SVGの概念、SVGを間違った方法で使用することが安全でない理由、およびWebサイトを危険にさらすことなくSVGを実際に実装する方法についてもう一度説明します。

仕事に取り掛かろう！

私たちのYoutubeチャンネルを購読する

SVGの紹介

SVGは、名前から推測できるように、ピクセルではなくベクトルに基づく画像です。テキストエディタを使用して通常の画像ファイルを開こうとすると、比較的ぎこちないことがわかります。ただし、代わりにSVGを開こうとすると、次のようなコードが表示される可能性があります（SVGの最初の部分から取得）。

<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'></pre>
<path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/>
</svg>

これらは、一言で言えば、Adobeロゴの表現を構成する一連のベクトルであり、色のダッシュがスローされます。

アドビのロゴ。

SVGは、どのサイズでも品質を維持し（つまり、スケーラブル）、使用する寸法に関係なく完璧に見えるという点で独特です。これにより、いくつかの特定のユースケースに理想的なファイルタイプになります。

さまざまなプラットフォームで再利用したいロゴ。
コンテキストに応じて拡大縮小するアイコン。
カスケードスタイルシート（CSS）を使用してアニメーション化する画像。

技術的には、SVGを作成する方法は3つあります。コードを自分で書くこともできますが、これはマシンでない限り実用的ではありません。他のルートは、SVGを最初から描画するか、既存の画像を取得し、IllustratorやSketchなどのソフトウェアを使用してSVGとしてエクスポートすることです。

良い点にもかかわらず、SVGを使用することには2つの欠点があります。まず、複雑なグラフィックスには実用的ではありません。たとえば、通常の写真を作成するには数百万のベクトルが必要であり、巨大なSVGファイルになります。 SVGを使用することの2番目の欠点は、安全性に関連することです。これについては、次のセクションで説明します。

SVGの使用がWebサイトのセキュリティに影響を与える理由

通常、SVGを画像ファイルと呼びますが、「ドキュメント」と呼ぶ方が正確です。結局のところ、通常のドキュメントと同様のテキストエディタを使用して、SVGファイルを簡単に開いたり、読み取ったり、変更したりできます。

問題は、ベクター情報と一緒にJavaScriptを追加する機能にあります。理論的には、これは、誰かが悪意のあるコードを含むファイルをアップロードした場合、WebサイトにSVGサポートを実装すると攻撃を受ける可能性があることを意味します。

WordPressのSVGサポートが6年以上議論されていることは非常に大きな懸念です：

6年前のTracチケット。

チケット全体を確認する必要はありませんが、要点は、WordPressにアップロードするSVGコードが安全であることを確認する方法が見つかるまでです。この機能を実装すると、メリットよりも多くの問題が発生する可能性があります。

現在、SVGの安全性を確保するために使用できる「サニタイザー」と呼ばれるツールがすでにいくつかあります。ただし、現在、WordPressにそれらの機能を実装するための良い方法はないようです。

全体として、WordPressにSVGサポートを追加することは実際には比較的簡単です。本当の難しさは、潜在的な攻撃に対してWebサイトを脆弱にしない方法でそうすることにあります。

WordPressでベクター画像を安全に使用する2つの方法

このセクションでは、WordPressでSVGを安全に使用するための手動アプローチとプラグインベースのアプローチの両方について説明します。その後、ニーズに最適なオプションを選択できるようになります。それを手に入れよう！

1. SVGサポートを手動で追加し、コードをサニタイズします

コードスニペットを使用して、数分でWordPressにSVGサポートを追加できます。ただし、これにより、前に説明した潜在的な安全性の問題が発生する可能性があります。 SVG実装へのより安全なアプローチには、次の手順が含まれます。

関数.phpファイルを変更してSVGサポートを有効にします。
必要なユーザーロールが.svgファイルをWordPressにアップロードできないように制限します。
アップロードする前に、すべてのSVGファイルをサニタイズします。

全体として、ステップ1と2を実行するのは難しくありません。最初のタスクは、ファイル転送プロトコル（FTP）を介してWebサイトにアクセスし、WordPressのルートフォルダーに移動することです。内部で、 functions.phpファイルを探して開き、次のコードを追加します（CodePenおよびCSSTricksのChrisCoyier提供）。

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }

  $filetype = wp_check_filetype( $filename, $mimes );

  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];

}, 10, 4 );

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

function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

これは2つの機能を果たします。SVGファイルをWordPressにアップロードし、メディアライブラリ内で視覚化することができます。コードを追加したら、 functions.phpファイルへの変更を保存して閉じます。

信頼できないユーザーが破損したSVGをアップロードしないようにする必要があるため、状況は少し複雑になります。たとえば、編集者と作成者が正しいファイルをアップロードすることを信頼しているが、寄稿者は信頼していない場合があります。これについては2つの方法があります。

メディアライブラリへのアクセスが制限されているか、まったくないカスタムユーザーロールを作成します。
WPアップロード制限などのプラグインを使用して、各ユーザーロールがアップロードできるファイルのタイプを制限します。

どちらのアプローチにも欠点があります。これが、手動のSVG実装が難しい理由の1つです。ただし、悪意のあるSVGを誰もアップロードできないようにする方法を決めたら、誤ってアップロードしないようにする必要もあります。

理想的には、WebサイトにアップロードするすべてのSVGを、サニタイザーツールを使用して実行する前に実行します。これにより、ファイルが取得され、不利なものが含まれていないことを確認し、含まれている場合は削除されます。最終的に、これにより、最終的にWordPressにアップロードできるクリーンなSVGファイルが残ります。

2. SafeSVGプラグインを使用します

上記のアプローチで、安全なSVG実装がいかに複雑になるかをお見せしたいと思います。これは、SafeSVGプラグインの機能を正しく理解できるようにするためです。

SafeSVGプラグイン。

一言で言えば、このプラグインは、以下を含む、以前にリストしたすべての問題を処理します。

そもそもSVGをアップロードできるようにします。
メディアライブラリ内でSVGを表示できることを確認してください。
セキュリティの問題を防ぐために、アップロードするすべてのSVGのコードをサニタイズします。

これはほとんどプラグアンドプレイの種類のプラグインであり、WordPressで安全なSVGを実装するための最も簡単なアプローチです。 SVGを使用する場合は、試してみることをお勧めします。

CSSとプラグインを使用してSVGをアニメーション化する方法

WordPressにSVGを実装する際のすべての問題（使用する}メソッドによって異なります）を経験した場合、おそらく最大の利益を得たいと思うでしょう。これは、状況に応じてCSSを使用してSVGをアニメーション化することを意味します。このプロセスについては、過去に説明した2つの方法があります。

他の要素と同じように、CSSを使用してSVGを手動でアニメーション化します。
SVGatorなどのツールを使用して、SVGの生成とアニメーション化を支援します。

少し実験したい場合は、あちこちにあるアニメーションによって、サイトのユーザーエクスペリエンスが一段と向上する可能性があります。さらに重要なことに、これを実現するためにSVGとCSSを使用することは、特にモバイルデバイスの場合、ビデオやGIFを追加することよりもはるかに優れています。

結論

SVGは、多くの状況で素晴らしい選択です。例を挙げると、スケーラビリティがあるため、Webサイトのロゴに最適なオプションです。一般に、SVGを使用すると、より応答性の高いWebサイトを設計するのに役立ちます。これは、ユーザーに関する限り、常に良いことです。

ただし、WordPressにSVGサポートを追加することを計画している場合は、サイトを安全に保つアプローチを使用していることを確認する必要があります。推奨する方法は2つあります。

SVGサポートを手動で追加し、コードをサニタイズします。
SafeSVGプラグインを使用します。

WordPressでSVGを安全に使用する方法について質問がありますか？ 以下のコメントセクションでそれらについて話しましょう！

記事のサムネイル画像：microtic / shutdownstock.com