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除く
最後に
この状況だと基本、設定しなくて大丈夫そうですが、ブラウザを更新しないユーザーはゼロではないので、念の為、設定するのもありかもしれません。
コメント