安全に外部サイトにリンクする方法

2017/07/14

外部サイトにリンクをする時、新しいウィンドウで開く場合は、rel属性にnoopenerを指定しておきましょう。セキュリティが向上します。

サンプルコード

<a href="https://syncer.jp/" rel="noopener" target="_blank">リンク</a>

デモ

まずは新しく開くページのソースコードを確認して下さい。リンク元のウィンドウで別ページにアクセスしようと試みます。

demo.html

<!DOCTYPE>
<html>
	<head>
		<title>新しく開いたページ</title>
	</head>
	<body>
		<p>元のウィンドウに戻って、別ページに移動しているか確認してみて下さい。</p>

		<script>
// 元のウィンドウを取得
var targetWindow = window.opener ;

// 別ページ(フィッシングサイトなど)に移動
targetWindow.location.href = "https://syncer.jp/" ;
		</script>
	</body>
</html>

noopenerを付けたリンクと、付けないリンクで違いを確認してみて下さい。noopenerを付けることで、悪意ある外部サイトからの操作を防げます。

<a href="https://syncer.jp/" target="_blank">リンク</a>

noopenerなしで開く

<a href="https://syncer.jp/" rel="noopener" target="_blank">リンク</a>

noopenerありで開く

備考

noopenerとは？

JavaScriptでは、自身を開いた元ウィンドウを取得できます。

var targetWindow = window.opener ;

corsの関係で元ウィンドウの内容を操作することは難しいですが、単純に別ページに移動させることならできてしまいます。例えば、GoogleやAmazonと同じ作りをしたフィッシングサイトに移動させることが可能です。

targetWindow.location.href = "https://syncer.jp/" ;

a要素にrel=noopenerを付けることでwindow.openerの中身を空にできる、というのが肝です。元ウィンドウを取得できなければ、元ウィンドウを操作することはできません。

// rel=noopenerだと空
var targetWindow = window.opener ;

// targetWindowは空だからエラー
targetWindow.location.href = "https://syncer.jp/" ;

新しくウィンドウを開かなければ大丈夫？

target=_blankなどで新しくウィンドウが開かれなければ、rel=noopenerは不要です。ただし例えば、target=_selfにしていてもユーザーが右クリックで新しくウィンドウを開く場合が考えられます。やはり、基本的にnoopenerは付けておくべきだと思います。

サンプルコード

デモ

備考

noopenerとは？

新しくウィンドウを開かなければ大丈夫？

関連記事