- WordPressではセキュリティ上の理由からSVGファイルのアップロードが制限されています。
- functions.phpにカスタム関数を追加すれば、ブログエディタでのSVGアップロードを許可できます。
- ただし、アップロードを許可する場合、リスクも認識しておくことが大事です。
1. 「このファイルタイプ（SVG）をアップロードする権限がありません」
WordPressにSVGファイルをアップロードしようとしたらエラーになりました。
このファイルタイプをアップロードする権限がありません。
functions.phpを編集すれば、ブログエディタでのアップロードを許可できます。
function add_svg_file_types_to_uploads($file_types) {
if ( ! isset($file_types['svg']) ) {
$file_types['svg'] = 'image/svg+xml';
}
return $file_types;
}
add_filter('upload_mimes', 'add_svg_file_types_to_uploads');
“upload_mimes”にフィルターを追加して、SVGを許可する処理を追加しました。
2. どうしてSVGのアップロードは制限されていたの？
これは、セキュリティのための制限です。
SVGには悪意のあるコードを埋め込まれている可能性もあるからです。
SVG画像は通常の画像ファイルとは異なり、XMLベースで構成されています。
そのため、SVGファイル内にHTMLやJavaScriptのコードを埋め込むことが可能なのです。
2-1. HTMLスマグリングのリスク
この特性を悪用した攻撃の例として、「HTMLスマグリング」があります1。
例えば、ある攻撃者がSVG画像ファイルの中にJavaScriptコードを隠し込みました。
そのコードは、受信者のコンピューター上で悪意のあるプログラムをダウンロードし実行する働きをします。
そして、このSVG画像が添付したメールを送りつけます。
SVG画像は一見すると普通の画像ファイルに見えます。
もし、受信者がその画像を開くと、隠されていたJavaScriptコードが実行されてしまいます。
2-2. XSS（クロスサイトスクリプティング）のリスク
SVG画像はこのXSS攻撃に悪用される可能性があります。
「XSS（クロスサイトスクリプティング）」は、Webアプリケーションの脆弱性を利用した攻撃の一種です。
例えば、悪意のあるユーザーが、JavaScriptコードを含むSVG画像をWordPressサイトにアップロードします。
<svg xmlns="http://www.w3.org/2000/svg">
<script type="text/javascript">
alert("XSS攻撃が成功しました");
</script>
</svg>このSVG画像がWebページに表示されると、ブラウザは埋め込まれたJavaScriptを実行してしまいます。
つまり、サイトを訪れた他のユーザーのブラウザ上で、攻撃者が用意したスクリプトが動作してしまうのです。
上記のスクリプト例では、”XSS攻撃が成功しました” という画面が表示されるだけです。
しかし、スクリプトによってはユーザーの個人情報を盗まれたり、マルウェアがダウンロードさせられたりする可能性があります。
XSS攻撃を防ぐには、SVGファイルのアップロードを制限するのが基本です。
また、アップロードされたSVGファイルの内容を適切に有害なコードを取り除く処理（サニタイズ）したりすることも重要です。
さらに、Content Security Policy (CSP)を適切に設定することでも、不正なスクリプトの実行を防ぐこともできます。
このような攻撃もありうるので、不審なSVGファイルの取り扱いには注意が必要なのです。
![[Cocoon] サイトロゴのリンク先をページ種類で変えた（WordPress）](https://chiilabo.com/wp-content/uploads/2024/04/image-24-27-320x198.jpg)
（補足）
- SVG 画像を悪用する HTML スマグリング – Cisco Japan Blog (2022-12-21)
