<h2 id="%3Ca%3E%E3%82%BF%E3%82%B0-target%3D%22_blank%22%E3%81%AE%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E5%AF%BE%E7%AD%96">
<a class="header-anchor-link" href="#%3Ca%3E%E3%82%BF%E3%82%B0-target%3D%22_blank%22%E3%81%AE%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E5%AF%BE%E7%AD%96" aria-hidden="true"></a> &lt;a&gt;タグ target="_blank"のセキュリティ対策</h2>
<p>Reactでポートフォリオを作っている中で外部リンクにアクセスするために &lt;a&gt;タグで<code>target="_blank"</code>を使用しました。<br>
(<code>target="_blank"</code>とは別タブで指定したURLを開く設定です)<br>
その際、コンソールに以下の警告が出ていることに気づきました。</p>
<div class="code-block-container"><pre><code>Using target="_blank" without rel="noreferrer" is a security risk
// rel="noreferrer "を使用せずにtarget="_blank "を使用することは、セキュリティ上のリスクがあります。
</code></pre></div><p>ほ〜ん。そうなんか...。<br>
ということで今回はセキュリティのお話です。</p>
<h2 id="target%3D%22_blank%22%E3%81%AB%E3%81%AF%E8%84%86%E5%BC%B1%E6%80%A7%E3%81%8C%E3%81%82%E3%82%8B...%EF%BC%9F">
<a class="header-anchor-link" href="#target%3D%22_blank%22%E3%81%AB%E3%81%AF%E8%84%86%E5%BC%B1%E6%80%A7%E3%81%8C%E3%81%82%E3%82%8B...%EF%BC%9F" aria-hidden="true"></a> target="_blank"には脆弱性がある...？</h2>
<p>警告にも出ているとおり、結論から言うと<code>target="_blank"</code>には脆弱性があります。</p>
<p>前提として、遷移元のページAから外部リンクのページBを開くとします。<br>
<code>target="_blank"</code>でページBは、遷移元のページAを<code>window.opener</code>オブジェクトとして参照することができます。ページBが悪いサイトだった場合、<code>window.opener.location = &lt;危険なURL&gt;</code>のようにページAに対して悪用(フッシング詐欺やウイルスを流す)が可能になります。</p>
<h2 id="%E8%84%86%E5%BC%B1%E6%80%A7%E3%81%AE%E5%AF%BE%E7%AD%96">
<a class="header-anchor-link" href="#%E8%84%86%E5%BC%B1%E6%80%A7%E3%81%AE%E5%AF%BE%E7%AD%96" aria-hidden="true"></a> 脆弱性の対策</h2>
<p>脆弱性の対策として以下があります。</p>
<ul>
<li>
<code>target="_blank"</code>を使用している&lt;a&gt;のrel属性に<code>noopener noreferrer</code>オプションを付与する</li>
</ul>
<div class="code-block-container"><pre><code>&lt;a href="xxxxxx@jp.com" target="_blank" rel="noopener noreferrer"&gt;リンク名&lt;/a&gt;
</code></pre></div><p>簡単に解説します。</p>
<ul>
<li>
<code>noopener</code>
<ul>
<li>遷移先のページから<code>window.opener</code>を参照できなくする。
<ul>
<li>一部のブラウザ(IEやEdge)では、サポートしていない。。</li>
</ul>
</li>
<li>遷移元のページと遷移先のページの処理を別スレッドで処理してくれる。</li>
</ul>
</li>
<li>
<code>norefferer</code>
<ul>
<li>遷移先のページからリファラー(遷移元のページ情報のこと)を参照できなくする。
<ul>
<li>どこから訪問してきたのか特定ができない、参照元がない状態になる。</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>上記から、遷移先のページから遷移元のページの情報を参照できないようにするために、<code>noopener</code>と<code>norefferer</code>の両方を設定することが望ましいです。</p>
<h2 id="%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E3%81%AE%E5%95%8F%E9%A1%8C%E3%81%AB%E3%82%82%E3%81%A4%E3%81%AA%E3%81%8C%E3%82%8B">
<a class="header-anchor-link" href="#%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E3%81%AE%E5%95%8F%E9%A1%8C%E3%81%AB%E3%82%82%E3%81%A4%E3%81%AA%E3%81%8C%E3%82%8B" aria-hidden="true"></a> パフォーマンスの問題にもつながる</h2>
<p>セキュリティ以外にもパフォーマンスの観点で<code>noopener</code>を設定しておくとメリットがあるようです。<br>
<code>target="_blank"</code>を使用して外部リンクに遷移した場合、遷移元と遷移先のページは同じスレッドで動作するようです。そのため、遷移先のページで負荷の高いスクリプトが実行されると、遷移元のページの処理効率が落ちてしまいます。<br>
<code>noopener</code>を設定しておけば、遷移元のページと遷移先のページの処理を別スレッドで処理してくれるようになり、遷移元のページのパフォーマンス低下を防ぐことができるようです。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p>&lt;a&gt;タグ<code>target="_blank"</code>のセキュリティ対策について解説しました。<br>
<code>target="_blank"</code>を使用している&lt;a&gt;のrel属性に<code>noopener noreferrer</code>オプションを付与しておくのが無難ってことみたいですね。<br>
勉強になりました😄</p>


<a>タグ target="_blank"のセキュリティ対策

target="_blank"には脆弱性がある...？

パフォーマンスの問題にもつながる

Discussion