別タブ／別ウィンドウで開く
以前、はてなブログを使い始めた頃、次のような記事を書きました。
www.tsukisai.net
その後、特に気にもせずいたのですが、最近、記事内に複数の外部リンクを箇条書き状態で貼りました。 すると、一つ目のリンクは別タブで、残りのリンクは一つ目の新規タブ上に開くという状態。
調べてみると、上記の問題と関係があるかは別として、別タブで開く際によく使われるtarget_blankが持つ危険性や脆弱性を指摘する記事が。
target_blankは危険？
簡単に言うと、target_blankで外部リンクを別タブで開くと、リンク先のページから元のページを操作できてしまうらしい。
詳しく説明しているサイトが幾つもあるので、詳しく知りたい方は検索してください。
例えば
target="_blank"を使用する際の注意点 | cly7796.net
HTMLでリンクを別タブ・別ウィンドウで開く方法と、脆弱性に関する注意｜とらぐらみんぐ
rel="noopener noreferrer"
それでは、どうするのか。
WordPressではtarget="_blank"を使うと自動的にrel="noopener noreferrer"が付くようになったという記事もよく見かけます。
rel="noopener noreferrer"って
よくrel="noopener noreferrer"というセットのような形で見かけますが、この二つは役割が違うらしい。
ここもシンプルに言ってしまうと（スペルを見てのごとしですが）
noopener
新たに開いたページから元のページを開けなくする＝操作できなくする
noreferrer
元のページの情報を参照できなくする
当サイトでは
noopenerだけでもいいのではとか、SEO的にどうなのとか、アフィリエイトに影響は無いのとか、いろいろと言われているようですが、当サイトでは以下のようにしました。
headに要素を追加
設定≫詳細設定≫headに要素を追加
に以下の要素を書き加えました。
（noopener noreferrerの両方を含んでいます）
<script> $(function() {
$('a[href^="http"]:not([href*="' + location.hostname + '"])').attr('target', '_blank').attr('rel', 'noopener noreferrer'); })
</script>
参考にさせて頂いたサイト
www.high-novice.com
