フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

ウィンドウを開くwindow.open、hrefタグでセキュリティも気を付ける(noopener, noreferrer)

スポンサーリンク

スポンサーリンク

javascriptのwindow.open、HTMLのhrefタグで、このnoopener, noreferrerを知ったので備忘録のために記事にします。

※最後に記載してますが、IE、Opera以外は、比較的新しいバージョンのブラウザを使ってれば自動的にnoopenerは設定されてるようです。

 

 

noopener, noreferrerがないと元ウィンドウが操作される

window.open、hrefタグで新しいタブやウィンドウを開いた時に、新しいタブ、ウィンドウにスクリプトを仕込まれると、元ウィンドウが操作できてしまいます。

 

例えば元ウィンドウを、フィッシングサイトに書き換えたり。。。

 

下記のYoutubeが英語ですが、非常にわかりやすいです。

動画の中で「Click Herer to WIN!!!」ボタンを押下すると元ウィンドウが別ページに書き換えられてます。


www.youtube.com

 

noopener, noreferrerを設定した「Click Here」ボタンを押下した場合は、元ウィンドウが書き換えられていません。

 

noopener, noreferrerの設定方法

javascript

javascriptの場合は、noreferrerを設定するだけで、noopenerも一緒に設定されます。

gist8697a0c75c3fc30b839bc3375086320e

 

HTML

gist0833c41d1b2e7d608d9a27ef08d4a316

 

実は、設定しなくても大丈夫?!

セキュリティ的にヤバイってことなので、各ブラウザが対応してます。

targete="_blank"であれば、勝手にrel="noopener"になるそうです。

※但しIE, Opera除く

rel="noopener"

 

最後に

この状況だと基本、設定しなくて大丈夫そうですが、ブラウザを更新しないユーザーはゼロではないので、念の為、設定するのもありかもしれません。