WordPress で <a> タグなどを使い 新しいウィンドウで別ページのリンクを作成した場合、HTML ソースコードに rel=”noopener” が自動的に付与されます。
rel=”noopener” ってなんだ?!消したほうがいいのか?と疑問に思う方いらっしゃると思います。
実は、rel=”noopener” は重要なコードであり、消してはいけません。rel=”noopener” がなぜ消してはいけないか?そして、そもそも何なのか?を解説します。
目次
rel=”noopener” が勝手に記載されるパターン
■ カスタムHTMLブロックで <a> タグを使ったとき
WordPress の記事エディタで 「カスタムHTMLブロック」を用いて、リンク(<a>タグ)を使い、新しいウィンドウで別のページを表示したいとき、一般的には、次のように記入します。
<a target="_blank" href="https://www.yahoo.co.jp">Yahoo!のページを開く</a>
target="_blank" が、新しいウィンドウで開け!という指定ですね。
この場合、記事エディタで記事を一度 保存 してから閉じて、改めて記事エディタで表示すると、自動的に以下のように書き換わります。
<a target="_blank" href="https://www.yahoo.co.jp" rel="noopener">Yahoo!のページを開く</a>
rel=”noopener” が自動で追記されます。rel=”noopener” が付いても付かなくても見た目上の動作は変わりありません。
WordPress のリンク機能で 「新しいタブで開く」 を指定したとき
WordPuress の記事エディタでリンクを作成する際に「新しいタブを開く」を指定した場合、表示されるページの HTML ソースは次のように書かれます。
<p><a href="https://www.yahoo.co.jp" target="_blank" rel="noreferrer noopener">Yahoo!のページを開く</a></p>
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” はセキュリティ上、重要な記述になりますので、削除せずにそのまま利用してください。
40代・50代「会社員におすすめ」の在宅でできる副業5選
-
40代・50代「会社員におすすめ」の在宅でできる副業5選(初心者でもできる)
40代、50代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では40代、50代におすすめの副業5選を紹介します。
続きを見る
20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選
-
20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選(初心者でもできる)
20代、30代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。20代、30代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い(または少ない)主婦におすすめの副業ができれば安心ですね。記事では、20代、30代専業主婦におすすめの副業3選を紹介します。
続きを見る
地方がチャンスのおすすめ副業を紹介!
-
【2024年チャンス】地方でノマドで働ける。おすすめ在宅副業を紹介!快適な移住先も紹介します
都会は住みにくい!地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす!おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。
続きを見る
WordPress のおすすめテーマ
あなたのブログを強力にアピールし、読者を惹きつける、
魅力的なウェブサイトを手軽に作りたいですか?
そんな方に オススメのテーマが「AFFINGER」 です。
「AFFINGER」テーマを使えば、SEOに強く、集客力がアップし、
上級者でも満足できる、魅力的なウェブサイトが作れます。
ブログアフィリエイトを本気で戦うなら、「AFFINGER」の威力を体感してください。
\ WordPress のおすすめテーマ「アフィンガー」を詳しく見る /
Presented By Boon Boon Blog .Com
広告の設置・収入について
当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。
当サイトは Google アドセンスを利用し、広告により収入を得ています。
当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。