これまでに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) | chrome | 84.0.4147.105 |
| macOS Catalina (10.15.6) | Safari | 13.1.2 |
| macOS Catalina (10.15.6) | Safari | 13.1.2 (Blank anchor target implies rel=noopener)を無効化 |
| macOS Catalina (10.15.6) | FireFox | 79.0 |
| macOS Catalina (10.15.6) | Opera | 70.0.3728.71 |
| iOS 13.6 | chrome | 84.0.4147.71 |
| iOS 13.6 | Safari | 13.1.2 |
| iOS 13.6 | Safari | 13.1.2 (Blank anchor target implies rel=noopener)を無効化 |
検証端末（OSとブラウザ）
【ケース1】同じドメイン内のページをtarget="_blank"で開く(rel="noopener"設定なし）
【1】開いたページで閉じるリンクを押した時の各ブラウザの動作
| OS | ブラウザ | バージョン | 動作 |
|---|---|---|---|
| macOS Catalina (10.15.6) | chrome | 84.0.4147.105 | ○ |
| macOS Catalina (10.15.6) | Safari | 13.1.2 | ○ |
| macOS Catalina (10.15.6) | Safari | 13.1.2 (Blank anchor target implies rel=noopener)を無効化 | ○ |
| macOS Catalina (10.15.6) | FireFox | 79.0 | ○ |
| macOS Catalina (10.15.6) | Opera | 70.0.3728.71 | ○ |
| iOS 13.6 | chrome | 84.0.4147.71 | ○ |
| iOS 13.6 | Safari | 13.1.2 | ○ |
| iOS 13.6 | Safari | 13.1.2 (Blank anchor target implies rel=noopener)を無効化 | ○ |
検証端末（OSとブラウザ）
【2】開いたページから遷移したページで閉じるリンクを押した時の各ブラウザの動作
| OS | ブラウザ | バージョン | 動作 |
|---|---|---|---|
| macOS Catalina (10.15.6) | chrome | 84.0.4147.105 | ○ |
| macOS Catalina (10.15.6) | Safari | 13.1.2 | ○ |
| macOS Catalina (10.15.6) | Safari | 13.1.2 (Blank anchor target implies rel=noopener)を無効化 | ○ |
| macOS Catalina (10.15.6) | FireFox | 79.0 | × blankページが残る |
| macOS Catalina (10.15.6) | Opera | 70.0.3728.71 | ○ |
| iOS 13.6 | chrome | 84.0.4147.71 | ○ |
| iOS 13.6 | Safari | 13.1.2 | ○ |
| iOS 13.6 | Safari | 13.1.2 (Blank anchor target implies rel=noopener)を無効化 | ○ |
検証端末（OSとブラウザ）
【ケース2】同じドメイン内のページをtarget="_blank"で開く(rel="noopener"設定あり）
【1】開いたページで閉じるリンクを押した時の各ブラウザの動作
| OS | ブラウザ | バージョン | 動作 |
|---|---|---|---|
| macOS Catalina (10.15.6) | chrome | 84.0.4147.105 | ○ |
| macOS Catalina (10.15.6) | Safari | 13.1.2 | ○ |
| macOS Catalina (10.15.6) | Safari | 13.1.2 (Blank anchor target implies rel=noopener)を無効化 | ○ |
| macOS Catalina (10.15.6) | FireFox | 79.0 | ○ |
| macOS Catalina (10.15.6) | Opera | 70.0.3728.71 | ○ |
| iOS 13.6 | chrome | 84.0.4147.71 | ○ |
| iOS 13.6 | Safari | 13.1.2 | ○ |
| iOS 13.6 | Safari | 13.1.2 (Blank anchor target implies rel=noopener)を無効化 | ○ |
検証端末（OSとブラウザ）
【2】開いたページから遷移したページで閉じるリンクを押した時の各ブラウザの動作
| OS | ブラウザ | バージョン | 動作 |
|---|---|---|---|
| macOS Catalina (10.15.6) | chrome | 84.0.4147.105 | × blankページが残る |
| macOS Catalina (10.15.6) | Safari | 13.1.2 | ○ |
| macOS Catalina (10.15.6) | Safari | 13.1.2 (Blank anchor target implies rel=noopener)を無効化 | ○ |
| macOS Catalina (10.15.6) | FireFox | 79.0 | × blankページが残る |
| macOS Catalina (10.15.6) | Opera | 70.0.3728.71 | × blankページが残る |
| iOS 13.6 | chrome | 84.0.4147.71 | ○ |
| iOS 13.6 | Safari | 13.1.2 | ○ |
| iOS 13.6 | Safari | 13.1.2 (Blank anchor target implies rel=noopener)を無効化 | ○ |
検証端末（OSとブラウザ）
【ケース3】別ドメインのページをtarget="_blank"で開く(rel="noopener"設定なし）
【1】開いたページで閉じるリンクを押した時の各ブラウザの動作
| OS | ブラウザ | バージョン | 動作 |
|---|---|---|---|
| macOS Catalina (10.15.6) | chrome | 84.0.4147.105 | ○ |
| macOS Catalina (10.15.6) | Safari | 13.1.2 | × blankページが残る |
| macOS Catalina (10.15.6) | Safari | 13.1.2 (Blank anchor target implies rel=noopener)を無効化 | ○ |
| macOS Catalina (10.15.6) | FireFox | 79.0 | ○ |
| macOS Catalina (10.15.6) | Opera | 70.0.3728.71 | ○ |
| iOS 13.6 | chrome | 84.0.4147.71 | ○ |
| iOS 13.6 | Safari | 13.1.2 | × blankページが残る |
| iOS 13.6 | Safari | 13.1.2 (Blank anchor target implies rel=noopener)を無効化 | ○ |
検証端末（OSとブラウザ）
【2】開いたページから遷移したページで閉じるリンクを押した時の各ブラウザの動作
| OS | ブラウザ | バージョン | 動作 |
|---|---|---|---|
| macOS Catalina (10.15.6) | chrome | 84.0.4147.105 | ○ |
| macOS Catalina (10.15.6) | Safari | 13.1.2 | × blankページが残る |
| macOS Catalina (10.15.6) | Safari | 13.1.2 (Blank anchor target implies rel=noopener)を無効化 | ○ |
| macOS Catalina (10.15.6) | FireFox | 79.0 | × blankページが残る |
| macOS Catalina (10.15.6) | Opera | 70.0.3728.71 | ○ |
| iOS 13.6 | chrome | 84.0.4147.71 | × blankページが残る |
| iOS 13.6 | Safari | 13.1.2 | × blankページが残る |
| iOS 13.6 | Safari | 13.1.2 (Blank anchor target implies rel=noopener)を無効化 | ○ |
検証端末（OSとブラウザ）
【ケース4】別ドメインのページをtarget="_blank"で開く(rel="noopener"設定あり）
【1】開いたページで閉じるリンクを押した時の各ブラウザの動作
| OS | ブラウザ | バージョン | 動作 |
|---|---|---|---|
| macOS Catalina (10.15.6) | chrome | 84.0.4147.105 | ○ |
| macOS Catalina (10.15.6) | Safari | 13.1.2 | × blankページが残る |
| macOS Catalina (10.15.6) | Safari | 13.1.2 (Blank anchor target implies rel=noopener)を無効化 | × blankページが残る |
| macOS Catalina (10.15.6) | FireFox | 79.0 | ○ |
| macOS Catalina (10.15.6) | Opera | 70.0.3728.71 | × blankページが残る |
| iOS 13.6 | chrome | 84.0.4147.71 | ○ |
| iOS 13.6 | Safari | 13.1.2 | × blankページが残る |
| iOS 13.6 | Safari | 13.1.2 (Blank anchor target implies rel=noopener)を無効化 | × blankページが残る |
検証端末（OSとブラウザ）
【2】開いたページから遷移したページで閉じるリンクを押した時の各ブラウザの動作
| OS | ブラウザ | バージョン | 動作 |
|---|---|---|---|
| macOS Catalina (10.15.6) | chrome | 84.0.4147.105 | × blankページが残る |
| macOS Catalina (10.15.6) | Safari | 13.1.2 | × blankページが残る |
| macOS Catalina (10.15.6) | Safari | 13.1.2 (Blank anchor target implies rel=noopener)を無効化 | × blankページが残る |
| macOS Catalina (10.15.6) | FireFox | 79.0 | × blankページが残る |
| macOS Catalina (10.15.6) | Opera | 70.0.3728.71 | × blankページが残る |
| iOS 13.6 | chrome | 84.0.4147.71 | × blankページが残る |
| iOS 13.6 | Safari | 13.1.2 | × blankページが残る |
| iOS 13.6 | Safari | 13.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.6 | chrome 84.0.4147.71 | ○ | ○ | ○ | × blankページが残る | ○ | × blankページが残る | ○ | × blankページが残る |
| iOS 13.6 | Safari 13.1.2 | ○ | ○ | ○ | ○ | × blankページが残る | × blankページが残る | × blankページが残る | × blankページが残る |
| iOS 13.6 | Safari 13.1.2 (Blank anchor target implies rel=noopener)を無効化 | ○ | ○ | ○ | ○ | ○ | ○ | × blankページが残る | × blankページが残る |
検証端末（OSとブラウザ）
考察
動作はこれまで同様、ブラウザによって大きく異なり、まとめると、
同じドメイン内のページを新規ウィンドウで立ち上げ、その立ち上げたページの閉じるリンクは正常に動作するが、そのページから別ページに遷移した先のページの閉じるリンクはブラウザによっては動作しない。
特に、別ドメインのページを新規ウィンドウで立ちあげた場合は、同じドメイン内のページを新規ウィンドウで立ち上げた場合と比較し、閉じるリンクが動作しないケースが多い。