キャンセル
次の結果を表示 
次の代わりに検索 
もしかして: 

オリジナルトピック:

.

(04-28-2025 07:35 PM で作成されたトピック)
388 閲覧回数
Beeeǃǃǃ
Active Level 10
オプション
その他の共有&提案
気になる情報... ☛ 🔗htmlで外部リンクを張る際の注意点

target属性により、クリックした先のページをどのように開くかを指定することができます。

target="_self"
何も指定しない場合はこの要素となります。ページを同タグで開き、そのまま移動します。

target="_blank"
_blank とすることで、クリックすると別タブで開くようになります。 これは外部へのリンクを張る際によく使われる方法で、自サイトは残しつつ、別のサイトも参考にさせたい場合などに使うことができます。

しかし、target="_blank" には、セキュリティ上の脆弱性があります。 リンク先のページではwindow.openerを使用して親ウィンドウのオブジェクトにアクセスしたり、window.opener.location = newURL によって親ページのURLを変更したりできます。

<a>タグで外部にリンクする場合、外部のリンクが完全に信用のできる自サイトの場合はその必要はないのでしょうが、単なる勝手リンクの場合は、rel="noopener"をつけるべきということ。 つまりリンク先でJavascriptを使えばリンク元を操作できるようになるというものです。

Googleの技術者が 「他のサイトへのリンクを "_blank" にしている場合は、サイトをパフォーマンスとセキュリティの問題に晒す可能性があります。 修正するには、これらのリンクに rel="noopener" 又は rel="noreferrer" を追加してください。」 という内容をツイートしている。

<a>タグに target="_blank" を付与する場合は rel="noopener" を追加する!

2020年7月にFireFox79が公開され、本バージョンから、target="_blank" の指定された a要素 や area要素 に対し、rel属性が未指定の場合には、rel="noopener" が規定値として適用されるようになりました。

それに追随する形で Google は2021年1月にchrome88を公開し、これ以降 rel="noopener" が規定値となりこのコードを記述しなくても良いということになりました。

ちなみに Safari は2019年3月に公開したv12.1より対応済みとのこと。

そのため、現在では特別意識せず "_blank" を使って外部リンクを張っても問題ありません。

rel="noreferrer" は、リンク元の情報をリンク先に送らない属性です。

具体的にどういった脆弱性なのか?

リンク先のソース JavaScript に window.opener.location = http://hogehoge.com と書かかれている、自分のサイト(リンク元)が勝手に hogehoge.com に置きかわってしまい、そこでフィッシングに利用されたり、ウイルスを仕込ませるなんてことができてしまいます。

しかしながらリンク先のページはちゃんとしているところにリンクしているから大丈夫!って思っていませんか? いえいえそんなことはありません。 ホームページは日々どんどん閉鎖されていきます。 閉鎖後にそのドメインが悪意ある人にわたりそのような地雷をしこまれるという可能性は大いにあります。 そういった観点から外部サイトへのリンクは気をつけましょう!

パフォーマンスの問題
target="_blank" を使用して任意のページから別のページにリンクしている場合、リンク元のページとリンク先のページは同じプロセスで動作します。 そのため、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。

いわゆるリンク先で Javascript などで高負荷なプロセスが実行されると、リンク元も同様なプロセスが実行されるため、リンク元のパフォーマンスが落ちるということらしいです。

古いブラウザーを使っている... そんなことはないと思いますが、まだいらっしゃるなら、外部リンクの <a>タグで target="_blank" をつけるなら rel="noopener" を挿入するようにしましょう。

この⬇ように、
<a href="🅤" target="_blank" rel="noopener">
🅤はURLと解釈してください。

«追記»
ちなみに、Membersのコミュニティでリンクを組み込む際、ターゲット属性が 「現在のページで開く」 だと、
<a href="🅤" target="_self">
となり、「新しいページで開く」 では、
<a href="🅤" target="_blank" rel="noopener">
となりました。 安心してリンクを組み込めます。

4個のコメント
係長
Expert Level 3
その他の共有&提案
大卒🤔
Beeeǃǃǃ
Active Level 10
その他の共有&提案
? (笑)
kotaro11
Expert Level 3
その他の共有&提案
難しすぎてよく理解してませんが雰囲気で読んでなんか良いこと言ってると思いました😆
Beeeǃǃǃ
Active Level 10
その他の共有&提案
外部サイトへリンクを張る場合の注意点です。 今は特に気にすることではありませんが、内容を知っているほうが、自分で気をつけられるので、備忘録として投稿してみました。