SVGにはどのようにしてスクリプトが混入するのか

SVGが他の画像形式と一線を画している点として，javascript等によるスクリプトを挿入することが出来ることが挙げられます．この特徴により特別なツールを必要とせずにダイナミックに内容を書き換えることが出来るのがウリの一つです．しかしスクリプトが全て善意から成り立っているとは限らず，ウィルス等の良からぬ内容が含まれている可能性を否定できません．

ではSVGに対するスクリプトの混入有無を確認するにはどうすればよいのでしょうか?
※少し追記
※10/10追記 補足はアンチパターンとして紹介していますから，そのようなものだと勘違いしないでくださいね．

SVGにおけるスクリプトの記述場所

SVGではjavascript等によるスクリプトの実行をサポートしており，この仕組みによりアニメーションなどの動的なグラフィックを表現することが可能です．
この時，SVGにおけるスクリプトは主に次の4箇所で定義できます．

• onXXXといったイベント属性内部に記述する
  clickイベント等に処理を行うことが可能です．
   
• script要素を用いる
  xlink:href属性による外部jsファイルの参照も可能です．
   
• a要素のxlink:href属性を用いる
  「javascript:」記述によりリンクをクリックした際にスクリプトを実行します．
   
• handler要素に記述する
  SVG1.2 tinyではlistener要素-handler要素によるイベント処理の記述が可能でした．現状この仕組みをサポートするブラウザはほとんど無いため(旧Opera程度)，それほど気にする必要はありません．
   

間接的なスクリプトの挿入

これらは当該SVG文書に直接スクリプトの内容が記述されているものです．しかしSVGの仕様やXML特性を鑑みると，この他にもスクリプト処理が混入する可能性があります．

• use要素からスクリプトを含んだSVG文書/要素を参照する．
  ブラウザによってはスクリプトが動作してしまうものもあります．
   
• xsl変換によるスクリプトの挿入
  スタイルシートの適用は一般にスクリプトとは無縁に思えますが，SVGはXML文書をベースとしているため，xsl変換を用いてスクリプト記述を追加することが出来ます．

このように様々なパターンが存在するため，実際のところ簡単にスクリプト混入の有無を確認する方法は残念ながらありません．
※ソースコードを眺めても良いのですがSVGのコードはその内容上冗長なものとなりやすく，目で見て判断するのも骨が折れます．
※スクリプトを無効化したwebブラウザで開いてみたり，XMLツールで調べてみても良いかも知れません．

サーバーサイドSVG生成の危険性

ところで，昨今SVGを利用した様々なサービスが登場しており，その利便性や革新性から様々なブログやニュースサイトで取り上げられることが多くなってきました．しかし先ほど見た通りSVGには様々な形態でスクリプトが含まれている可能性があります．場合によっては美しい処理結果の裏で良からぬコードが息を潜めていることもあり得るのです．
※これはクライアントサイドで生成したSVGファイルでも同じことです．

実際の処SVGに含まれるスクリプトは危険なのか

これだけを見ると「スクリプトを含んだSVGのすべてが危険」といった図式に見えますが，これは極端なものであり，正しく理解するには「危険なスクリプト」についてもう少し掘り下げる必要があります．

SVGに含まれるスクリプトが被害を及ぼすシナリオは複数考えられ，自ずとリスクの大きさと対処策も変わってきます．

• インターネット上のSVGを直接webブラウザで開いた際に実行されるスクリプト
  この場合，スクリプトの実行はwebブラウザにより大きく制限されており，ブラウザにセキュリティホールが存在しない限り問題とはなりません．要は一般的なwebの利用においては既存のセキュリティ対処策で十分（つまりSVG固有の対策は存在しない）です．
  ※意図的に誤操作を誘うようなケースもあり得ますが，これはSVGに限った話ではありません．「怪しいサイトは開かない」前提です．
   
• インターネット上のSVGを一旦ローカルにダウンロードしwebブラウザで開く
  この場合，インターネットとは異なるセキュリティ環境でSVGファイルを動作させることになるため，危険性がより高まりますが，一般的な対策（無闇にファイルを開かない，ウィルス対策ソフトを導入する等）を行えば対処できるでしょう．
   
• インターネット上のSVGをローカルにダウンロードしドローツールで開く
  webブラウザではなく，特定の環境・アプリケーションを対象とした不正なスクリプトが挿入されているケースです．この場合，当該アプリを所持していない限り問題とはなりませんが，次の点に注意する必要があります．
   
• インターネット上のSVGをローカルにダウンロードし別のサイトにアップロードする
  SVGをダウンロードした自身には問題が発生しなかったとしても，それを（無意識的に）拡散させてしまうことでそれをダウンロードした先で問題が発生するかもしれません．この場合「被害者」ではなく新たに「加害者」となってしまいます．

以上をまとめると本質的に「SVGは実行可能ファイル（もしくはHTMLやマクロ付きの文書ファイル）と同等に扱え」ということがわかります．つまりダウンロードしたSVGは不用意に開かず，問題のないSVGファイルのみをアップロードするというわけです．
（特に目的がない限り，一般に配布しているSVGファイルにスクリプトは必要ないはずです．）
 
実になーんだという結果ですが，SVGを他の（jpgやpng等の）画像形式と同一視している限りこの結論に辿りつけません．特にSVGをツールでしか出力したことがない方は気に留めておいてください．

※逆にSVGを理解している人にとっては余りに当たり前過ぎて，あえてその危険性について深追いしていないこともあります．この初学者との理解のギャップこそが筆者が危惧している部分なのです．

そこまで気をつける必要はあるの?

確かにいままでSVGによる致命的な問題（が拡散した事実）は聞いたことがありません．しかし，今後SVGの利用が当たり前になるにつれ新たな問題が発生しないとも限りません．よって”転ばぬ先の杖”として用心に越したことはないのです．

結論

• 自作でないSVGファイルには良からぬスクリプトが含まれている場合がある．
• そのため，SVGファイルの扱いは一般の実行可能ファイルと同等に扱うべきである．
• SVGを単なる画像形式と思い込んでいる限り，リスクを軽減できない．
   

補足）img要素を使っていればスクリプトが動作しないのでセキュアだ…×

SVGは画像ファイルとしても振る舞うため，HTMLではimg要素に挿入することが可能です．この場合，SVGに含まれているスクリプトは全て無効化されるためwebブラウザにおける動作上は安全性が保たれます．
しかしそのSVGファイルをダウンロードしてしまえば，スクリプトが実行される可能性がありますから全く意味がありません．とにかく所在の明らかでないSVGファイルを何の対処もせず扱うのは控えるべきです．

補足）SVG生成のソースコードが公開されているから安心だ…×

SVG生成サービスを利用した場合，たとえバックで動作しているコードがオープンソースとして公開されていたとしても，実際にそのコードが走っている保証はありません．よって生成されたSVGコードを無条件に信用することは出来無い点に注意しましょう．
この点がクライアントサイドでのSVG生成と異なる点で，この場合はブラウザ上で実際に動作しているコードを確認することができます．とは言えコードが難読化されていた場合にどのような処理を行っているかが判らない事もあります．
結局の処，SVGがセキュアかどうかは実際にSVGコードの内容を確認するのが最も手っ取り早いと言えます．