ウィンドウを開く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"

     

    最後に

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

    コメント

    タイトルとURLをコピーしました