target=”_blank”の危険性とVSCでスニペット化する

リンク先を新しいウィンドウで開くtarget=”_blank”には、セキュリティ面の脆弱性に問題があるとの事です。サックリなのですが、noopenerは、リンク先に重たいJavaScriptが実行されたりした場合、サイトのパフォーマンス低下につながるのを防ぐそうです。リンク先のURLを書き換える不正行為からも守るそうです。

いちいち書くのは面倒なので、Vistual Studio Codeでスニペット登録する手順をシェアします。

最終系

最終的にはnoreferrerを付けた下記の書き方が推奨されています。これで、非対応のブラウザの対策が施されます。

target="_blank" rel="noopener noreferrer"

スニペットを登録する

[ファイル] → [ユーザー設定] → [ユーザースニペットの構成]　検索窓に「html」と入力すると、html.jsonが開きます。// }の下に下記のコードを追加します。

"target_blank": {
		"prefix": "target",
		"body": ["target=\"_blank\" rel=\"noopener noreferrer\""]
	},

targetと入力するとtarget=”_blank” rel=”noopener noreferrer”と出てくる様になります。