【WordPress】rel=”noopener” が勝手に付くんだけど消していいの？

WordPress で <a> タグなどを使い 新しいウィンドウで別ページのリンクを作成した場合、HTML ソースコードに rel=”noopener” が自動的に付与されます。

rel=”noopener” ってなんだ？！消したほうがいいのか？と疑問に思う方いらっしゃると思います。

実は、rel=”noopener” は重要なコードであり、消してはいけません。rel=”noopener” がなぜ消してはいけないか？そして、そもそも何なのか？を解説します。

rel=”noopener” が勝手に記載されるパターン

■ カスタムHTMLブロックで <a> タグを使ったとき

WordPress の記事エディタで 「カスタムHTMLブロック」を用いて、リンク（<a>タグ）を使い、新しいウィンドウで別のページを表示したいとき、一般的には、次のように記入します。

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#ccc” bgcolor=”#FFFCDB” borderwidth=”2″ borderradius=”2″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

<a target=”_blank” href=”https://www.yahoo.co.jp”>Yahoo！のページを開く</a>

[/st-mybox]

target=”_blank” が、新しいウィンドウで開け！という指定ですね。

この場合、記事エディタで記事を一度 保存 してから閉じて、改めて記事エディタで表示すると、自動的に以下のように書き換わります。

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#ccc” bgcolor=”#FFFCDB” borderwidth=”2″ borderradius=”2″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

<a target=”_blank” href=”https://www.yahoo.co.jp” rel=”noopener”>Yahoo！のページを開く</a>

[/st-mybox]

rel=”noopener” が自動で追記されます。rel=”noopener” が付いても付かなくても見た目上の動作は変わりありません。

WordPress のリンク機能で 「新しいタブで開く」 を指定したとき

WordPuress の記事エディタでリンクを作成する際に「新しいタブを開く」を指定した場合、表示されるページの HTML ソースは次のように書かれます。

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#ccc” bgcolor=”#FFFCDB” borderwidth=”2″ borderradius=”2″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

<p><a href=”https://www.yahoo.co.jp” target=”_blank” rel=”noreferrer noopener”>Yahoo！のページを開く</a></p>

[/st-mybox]

rel=”noreferrer noopener” が自動で追記されます。rel=”noreferrer noopener” が付いても付かなくても見た目上の動作は変わりありません。

rel=”noopener” が付くと何が変わるのか？

■ rel=”noopener” を付けない場合

rel=”noopener” を付けない場合に、サイト（ブラウザ）のリンクから、別のサイトを新しいブラウザ（ウィンドウ）で表示した場合は、両方のブラウザは親子関係になります。

「新しいタブで表示」した場合も同じく親子関係になります。

親子関係は、コンピュータの内部情報のため、見た目ではわかりません。

ブラウザ（ページ）が親子関係にある場合、子のページの JavaScript （プログラム）で親のページの情報を取得する、親のページを操作することができる場合があります。

JavaScript で [window.opener] オブジェクトで親のブラウザ（ページ）を操作することができ、情報が盗まれたり、親側のページの操作（表示を変えられたり）する可能性があります（※）。

※　必ずアクセスできるわけではありませんが、可能性としてはあり得ます。

■ rel=”noopener” を付けた場合

rel=”noopener” を付けた場合に、サイト（ブラウザ）のリンクから、別のサイトを新しいブラウザ（ウィンドウ）で表示した場合、両方のブラウザは親子関係にはなりません。

おたがい他人です（笑）

JavaScript で 「window.opener」 オブジェクトで親のブラウザ（ページ）を操作することができないため、基本的には、情報を盗まれる、勝手に操作される可能性がありません。

※　世の中のハッキング技術は常に進歩しているため将来にわたり絶対安全というわけではありませんが、セキュリティ対策として有効な一つの手段です。

rel=”noopener” を付けることで期待できる効果

■ 悪意のあるページからの防御

rel=”noopener” を付けず、ブラウザ（ページ）が親子関係で表示された場合、子となるサイトに悪意のあるコードが埋め込まれているとフィッシング詐欺被害を受ける可能性があります。

rel=”noopener” を付けることが有効な防御になります。

■ ページの動作スピードの改善

rel=”noopener” を付けた場合、各々のブラウザ（ページ）が いわゆる別のプログラムとしてお互い関係せずに動くため（※） 単独の動作となり、若干ですが、操作・表示スピードの改善が期待できます。

※　正確には、それぞれ別のスレッドとして動作します。

まとめ

WordPress で記事を書いている場合、外部リンクを作成すると、rel=”noopener” が自動で付与される場合があります。

rel=”noopener” はセキュリティ上、重要な記述になりますので、削除せずにそのまま利用してください。