rel="noopener"の各ブラウザの動作確認【2020年8月版】

rel=noopenerの各ブラウザの動作確認 2020年8月版

これまでにtarget="_blank"を使用し、新規ウィンドウで立ち上げて、その立ち上げたページに設置する閉じるボタンを設置したことはないでしょうか。

その動作は各ブラウザで異なりながら(セキュリティ関連の機能違いなど)も、これまでは、下記のようなソースコードで閉じるボタンを実装しているケースが多いのではないでしょうか。

<a href="javascript:window.open('about:blank','_self').close();">閉じる</a>

そのような状況の中で、Safari 12.1やFirefox 79からrel="noopener"が指定されていない場合、暗黙的に適用されることとなったということで改めて、2020年8月現在におけるrel="noopener"の各ブラウザの動作確認を実施しました。

その動作確認の流れとその結果をこれから解説していきます。

目次

動作確認の流れ

動作確認のケース

  • 同じドメイン内のページをtarget="_blank"で開く(rel="noopener"設定なし)
  • 同じドメイン内のページをtarget="_blank"で開く(rel="noopener"設定あり)
  • 別ドメイン内のページをtarget="_blank"で開く(rel="noopener"設定なし)
  • 別ドメイン内のページをtarget="_blank"で開く(rel="noopener"設定あり)

それぞれのケース内では

  • 開いたページで閉じるリンクを押した時の各ブラウザの動作
  • 開いたページから遷移したページで閉じるリンクを押した時の各ブラウザの動作

2パターンを確認しています。

動作確認に使用したソースコードとファイル構成

2つのドメインを使用してhttps://で動作の確認をしました。

https://example.jpとhttps://example.comです。

これらのドメインは例として使用しています。

example.jp

ファイル構成

├── open.html  # close_same_domain.html  ,close_other_domain.html を開くリンクが設置されているページ
├── close_same_domain.html  #閉じるボタンとnext_close_same_domain.html へのリンクが設置されているページ
└── next_close_same_domain.html  #閉じるボタンが設置されているページ

新規ウィンドウを開くページのソースコード(open.html)

htmlに最低限必要な要素の記載は省略しております。

<a href="/close_same_domain.html" target="_blank">同じドメインで開く</a>
<a rel="noopener" href="/close_same_domain.html" target="_blank">同じドメインで開く(rel="noopener")</a>
<a href="https://example.com/close_other_domain.html" target="_blank">別ドメインで開く</a>
<a rel="noopener" href="https://example.com/close_other_domain.html" target="_blank">別ドメインで開く(rel="noopener")</a>

閉じるボタンのソースコード

htmlに最低限必要な要素の記載は省略しています。

<a  href="javascript:window.open('about:blank','_self').close();">閉じる</a>
<a rel="noopener"  href="javascript:window.open('about:blank','_self').close();">閉じる(rel="noopener")</a>

example.com

ファイル構成

├── close_other_domain.html  #閉じるボタンとnext_close_other_domain.htmlへのリンクが設置されているページ
└── next_close_other_domain.html #閉じるボタンが設置されているページ

閉じるボタンのソースコード

example.jpのものと同じ。

動作確認端末

動作確認に使用した端末(OSとブラウザ)は下記のとおりです。

macOSとiOSのSafariでは実験的な機能として、Blank anchor target implies rel=noopenerを有効化、無効化できるためその影響を確認するため、それぞれ確認しています。

OSブラウザバージョン
macOS Catalina
(10.15.6)
chrome84.0.4147.105
macOS Catalina
(10.15.6)
Safari13.1.2
macOS Catalina
(10.15.6)
Safari13.1.2
(Blank anchor target implies rel=noopener)を無効化
macOS Catalina
(10.15.6)
FireFox79.0
macOS Catalina
(10.15.6)
Opera70.0.3728.71
iOS 13.6chrome84.0.4147.71
iOS 13.6Safari13.1.2
iOS 13.6Safari13.1.2
(Blank anchor target implies rel=noopener)を無効化

検証端末(OSとブラウザ)

【ケース1】同じドメイン内のページをtarget="_blank"で開く(rel="noopener"設定なし)

【1】開いたページで閉じるリンクを押した時の各ブラウザの動作

OSブラウザバージョン動作
macOS Catalina
(10.15.6)
chrome84.0.4147.105
macOS Catalina
(10.15.6)
Safari13.1.2
macOS Catalina
(10.15.6)
Safari13.1.2
(Blank anchor target implies rel=noopener)を無効化
macOS Catalina
(10.15.6)
FireFox79.0
macOS Catalina
(10.15.6)
Opera70.0.3728.71
iOS 13.6chrome84.0.4147.71
iOS 13.6Safari13.1.2
iOS 13.6Safari13.1.2
(Blank anchor target implies rel=noopener)を無効化

検証端末(OSとブラウザ)

【2】開いたページから遷移したページで閉じるリンクを押した時の各ブラウザの動作

OSブラウザバージョン動作
macOS Catalina
(10.15.6)
chrome84.0.4147.105
macOS Catalina
(10.15.6)
Safari13.1.2
macOS Catalina
(10.15.6)
Safari13.1.2
(Blank anchor target implies rel=noopener)を無効化
macOS Catalina
(10.15.6)
FireFox79.0×
blankページが残る
macOS Catalina
(10.15.6)
Opera70.0.3728.71
iOS 13.6chrome84.0.4147.71
iOS 13.6Safari13.1.2
iOS 13.6Safari13.1.2
(Blank anchor target implies rel=noopener)を無効化

検証端末(OSとブラウザ)

【ケース2】同じドメイン内のページをtarget="_blank"で開く(rel="noopener"設定あり)

【1】開いたページで閉じるリンクを押した時の各ブラウザの動作

OSブラウザバージョン動作
macOS Catalina
(10.15.6)
chrome84.0.4147.105
macOS Catalina
(10.15.6)
Safari13.1.2
macOS Catalina
(10.15.6)
Safari13.1.2
(Blank anchor target implies rel=noopener)を無効化
macOS Catalina
(10.15.6)
FireFox79.0
macOS Catalina
(10.15.6)
Opera70.0.3728.71
iOS 13.6chrome84.0.4147.71
iOS 13.6Safari13.1.2
iOS 13.6Safari13.1.2
(Blank anchor target implies rel=noopener)を無効化

検証端末(OSとブラウザ)

【2】開いたページから遷移したページで閉じるリンクを押した時の各ブラウザの動作

OSブラウザバージョン動作
macOS Catalina
(10.15.6)
chrome84.0.4147.105×
blankページが残る
macOS Catalina
(10.15.6)
Safari13.1.2
macOS Catalina
(10.15.6)
Safari13.1.2
(Blank anchor target implies rel=noopener)を無効化
macOS Catalina
(10.15.6)
FireFox79.0×
blankページが残る
macOS Catalina
(10.15.6)
Opera70.0.3728.71×
blankページが残る
iOS 13.6chrome84.0.4147.71
iOS 13.6Safari13.1.2
iOS 13.6Safari13.1.2
(Blank anchor target implies rel=noopener)を無効化

検証端末(OSとブラウザ)

【ケース3】別ドメインのページをtarget="_blank"で開く(rel="noopener"設定なし)

【1】開いたページで閉じるリンクを押した時の各ブラウザの動作

OSブラウザバージョン動作
macOS Catalina
(10.15.6)
chrome84.0.4147.105
macOS Catalina
(10.15.6)
Safari13.1.2×
blankページが残る
macOS Catalina
(10.15.6)
Safari13.1.2
(Blank anchor target implies rel=noopener)を無効化
macOS Catalina
(10.15.6)
FireFox79.0
macOS Catalina
(10.15.6)
Opera70.0.3728.71
iOS 13.6chrome84.0.4147.71
iOS 13.6Safari13.1.2×
blankページが残る
iOS 13.6Safari13.1.2
(Blank anchor target implies rel=noopener)を無効化

検証端末(OSとブラウザ)

【2】開いたページから遷移したページで閉じるリンクを押した時の各ブラウザの動作

OSブラウザバージョン動作
macOS Catalina
(10.15.6)
chrome84.0.4147.105
macOS Catalina
(10.15.6)
Safari13.1.2×
blankページが残る
macOS Catalina
(10.15.6)
Safari13.1.2
(Blank anchor target implies rel=noopener)を無効化
macOS Catalina
(10.15.6)
FireFox79.0×
blankページが残る
macOS Catalina
(10.15.6)
Opera70.0.3728.71
iOS 13.6chrome84.0.4147.71×
blankページが残る
iOS 13.6Safari13.1.2×
blankページが残る
iOS 13.6Safari13.1.2
(Blank anchor target implies rel=noopener)を無効化

検証端末(OSとブラウザ)

【ケース4】別ドメインのページをtarget="_blank"で開く(rel="noopener"設定あり)

【1】開いたページで閉じるリンクを押した時の各ブラウザの動作

OSブラウザバージョン動作
macOS Catalina
(10.15.6)
chrome84.0.4147.105
macOS Catalina
(10.15.6)
Safari13.1.2×
blankページが残る
macOS Catalina
(10.15.6)
Safari13.1.2
(Blank anchor target implies rel=noopener)を無効化
×
blankページが残る
macOS Catalina
(10.15.6)
FireFox79.0
macOS Catalina
(10.15.6)
Opera70.0.3728.71×
blankページが残る
iOS 13.6chrome84.0.4147.71
iOS 13.6Safari13.1.2×
blankページが残る
iOS 13.6Safari13.1.2
(Blank anchor target implies rel=noopener)を無効化
×
blankページが残る

検証端末(OSとブラウザ)

【2】開いたページから遷移したページで閉じるリンクを押した時の各ブラウザの動作

OSブラウザバージョン動作
macOS Catalina
(10.15.6)
chrome84.0.4147.105×
blankページが残る
macOS Catalina
(10.15.6)
Safari13.1.2×
blankページが残る
macOS Catalina
(10.15.6)
Safari13.1.2
(Blank anchor target implies rel=noopener)を無効化
×
blankページが残る
macOS Catalina
(10.15.6)
FireFox79.0×
blankページが残る
macOS Catalina
(10.15.6)
Opera70.0.3728.71×
blankページが残る
iOS 13.6chrome84.0.4147.71×
blankページが残る
iOS 13.6Safari13.1.2×
blankページが残る
iOS 13.6Safari13.1.2
(Blank anchor target implies rel=noopener)を無効化
×
blankページが残る

検証端末(OSとブラウザ)

rel="noopener"の各ブラウザの動作確認の結果

動作確認のケースおさらい

前述していますが、長くなってしまったため、改めて動作確認のケース記載します。

  • 【ケース1】同じドメイン内のページをtarget="_blank"で開く(rel="noopener"設定なし)
  • 【ケース2】同じドメイン内のページをtarget="_blank"で開く(rel="noopener"設定あり)
  • 【ケース3】別ドメイン内のページをtarget="_blank"で開く(rel="noopener"設定なし)
  • 【ケース4】別ドメイン内のページをtarget="_blank"で開く(rel="noopener"設定あり)

それぞれのケース内では

  • 【1】開いたページで閉じるリンクを押した時の各ブラウザの動作
  • 【2】開いたページから遷移したページで閉じるリンクを押した時の各ブラウザの動作

の2パターンを確認。

各ケースの結果をまとめた表

OSブラウザ
バージョン
動作(ケース1)1動作(ケース1)2動作(ケース2)1動作(ケース2)動作(ケース3)1動作(ケース3)2動作(ケース 4)1動作(ケース4)2
macOS Catalina
(10.15.6)
chrome
84.0.4147.105
×
blankページが残る
×
blankページが残る
macOS Catalina
(10.15.6)
Safari
13.1.2
×
blankページが残る
×
blankページが残る
×
blankページが残る
×
blankページが残る
macOS Catalina
(10.15.6)
Safari
13.1.2
(Blank anchor target implies rel=noopener)を無効化
×
blankページが残る
×
blankページが残る
macOS Catalina
(10.15.6)
FireFox
79.0
×
blankページが残る
×
blankページが残る
×
blankページが残る
×
blankページが残る
macOS Catalina
(10.15.6)
Opera
70.0.3728.71
×
blankページが残る
×
blankページが残る
iOS 13.6chrome
84.0.4147.71
×
blankページが残る
×
blankページが残る
×
blankページが残る
iOS 13.6Safari
13.1.2
×
blankページが残る
×
blankページが残る
×
blankページが残る
×
blankページが残る
iOS 13.6Safari
13.1.2
(Blank anchor target implies rel=noopener)を無効化
×
blankページが残る
×
blankページが残る

検証端末(OSとブラウザ)

考察

動作はこれまで同様、ブラウザによって大きく異なり、まとめると、

同じドメイン内のページを新規ウィンドウで立ち上げ、その立ち上げたページの閉じるリンクは正常に動作するが、そのページから別ページに遷移した先のページの閉じるリンクはブラウザによっては動作しない。

特に、別ドメインのページを新規ウィンドウで立ちあげた場合は、同じドメイン内のページを新規ウィンドウで立ち上げた場合と比較し、閉じるリンクが動作しないケースが多い。

よかったらシェアしてね!
目次
閉じる