target=”_blank”の罠
ポートフォリオのwebサイトやDTP作例のリンクを開く時、やはり別ウィンドウが開く様にした方がよいので、 a タグのtarget属性 target="_blank"
を追記した。しかし、target="_blank"
属性はそのままではセキュリティー上、かなり危険らしい。
window.opener.location = newURL によって親ページの URL を変更したりできます。
(中略)
つまりリンク先でJavascriptを使えばリンク元を操作できるようになるというものです。
上記ブログで初めて知ったが、Wordpressでは、投稿時に「リンクを新しいタブで開く」にチェックをいれると自動的に「rel=”noopener”」が付与される。実際にやってみると確かに、ついている。
window.opener の問題については、かもメモというブログの記事がめっちゃわかりやすい。
rel=”noopener” を使うことで、新しく開いたページからwindow.openerオブジェクトを使って元ページの操作をできなくできるようです。no・openerですね。
HTML 本当は怖い target=”_blank” 。rel=”noopener” ってなに? / かもメモ 2018-12-06
window.opener 悪用による危険性について、詳しく実験した人もいる。
window.opener を使って元ウィンドウの情報が取得できるかどうかの実験 / ラボラジアン 2019年2月12日
実験の結果、window.opener にアクセスできたのは、
1) 同一ドメイン
2) target=”_blank” がセットされている
3) rel=”noopener noreferrer” がセットされていない
の3つの条件が揃った場合のみということで、ラボラジアンさんの実験では、「この仕様であれば、window.opener を悪用するというのはかなり難しいのではないかと思います。」と結論づけている。
むやみやたらと恐れる必要はなさそうだが、target="_blank"
と rel="noopener"
はセットで書くように気をつけよう。