svgでリンク先を詐称する

svgは使いこなせてこそ，そのパワーを実感することが出来るのですが，使い方を間違えれば危険な面も併せ持っています．今回紹介する方法はかつてjavascriptで問題となったセキュリティホールをsvgの機能を使って再現するものです．

実証コード

それでは次のリンクを見てみましょう．一見何の変哲もないリンクに見えます．それではこのリンクにカーソルを当ててみてください．おそらく「http://www.google.co.jp」へのリンクであることがステータスバーに表示されるでしょう．

それでは実際にこのリンクをクリックしてみてください．意図した通りgoogleが表示されたでしょうか？

意図した通りの結果だった人はそのブラウザではセキュリティ対策がなされています．

が，google  chromeを使っている方はどうだったでしょう？はからずも「http://www.yahoo.co.jp」が表示されたのではないでしょうか？少なくとも私の環境（ubuntu 12.10 chrome 24.0.1312.70）ではこのような結果となりました．

これはいわゆる「リンク先詐称」のセキュリティホールで，かつてjavascriptにおいて問題となったものをsvgで再現したものです．
参考）リンク先のURLを偽装できるセキュリティ・ホールがIEに，OEユーザーは特に注意 

しかも厄介なことに，この動作はjavascriptを停止していても再現します．html5に深く組み込まれたsvgの仕組みを応用しているがために現状回避するすべはありません． 

からくり

それではどのような仕組みとなっているのでしょうか？答えは簡単で，svgのsmil機構を使っているのです．

<?xml version="1.0" standalone="no"?>
<svg width="200px" height="50px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <a xlink:href="http://www.google.co.jp" target="_blank">
  <text y="45" font-size="20" fill="blue" text-decoration="underLine">googleへのリンク</text>
  <rect width="100%" height="100%" id="target" fill="rgba(0,0,0,0)"/>
  <animate attributeName="xlink:href" to="http://www.yahoo.co.jp" begin="target.mousedown" dur="0.5s"/>
 </a>
</svg>

• smilアニメーションを使ってa要素のxlink:href属性を書き換える．
• 動作のタイミングはマウスダウンのタイミング．
• 0.5秒だけ書き換えるので，気付きにくい．

このsvg文書ををhtmlのobject要素から参照しているのです．
なお，筆者が試した限り，インラインsvgでは発現せず，スタンドアロンのsvgである必要があります．また，ローカル環境であればfirefox，operaでも再現します．従ってこの問題は明らかにchromeの問題と言ってよいでしょう．

追記）chromeではインラインsvgでも再現するようです．

●インラインのsvg要素にxlinkの名前空間を宣言することでxmlns:xlinkへのアニメーションが有効となり，同様の問題が発生するようです．
xmlns:xlink="http://www.w3.org/1999/xlink"

何が問題か？

今回のケースは非常に単純であり，再現する環境が限られているものの，今後も似たようなsvg絡みの問題が発生する事が予想されます．

その理由としてはsvgが本格的に利用され始めてから間もないこともあり，実際の運用に即した仕様の検証が非常に甘い事と，ユースケースが圧倒的に足りていない事が挙げられます．例えば筆者としてはa要素のxlink:href属性のsmilによる書き換え自体，無用な機能（つまり仕様の不整合）だと感じます．

要するに未だ実運用の洗礼を受けておらず，仕様が荒削りであるからこそ，svgは様々な問題を孕んでいるとも言えるのです．

では我々はどのようにsvgを扱うべきでしょうか？危険そうだから使わないほうが良い？それではいざという時に全く対処出来ないことになってしまいます．

むしろ積極的にsvgを使うことで問題点を洗い出す方が，svgを発展させることとなり，結果として様々なセキュリティホールを塞ぐ結果となるのではないでしょうか．svgの穴を塞ぐにはsvgを識るしか方法は無いのです．

（それとも筆者の心配しすぎなんでしょうかねー）
※一応chromeの問題は報告してみたけれど…