WordPressで「リンクを新しいタブで開く」で作成するとnoopenerが付加されこのようなリンクとなる。
<a href=”https://example.com” rel=”noopener” target=”_blank”>テキスト</a>
“noopener”とは何？必要？
noopener無いとどうなる？
気になり調べたら必要と言うより必須だった。
例えば悪意のあるサイトに”noopener”無しのtarget=”_blank”リンクを貼りクリックする。
↓このようなリンク
<a href=”https://悪意のあるサイト.com” target=”_blank”>悪意のあるサイト</a>
すると次のような事が起きる
リンク元URL(https://example.com)
↓
リンク先URL(https://悪意のあるサイト.com)をクリックして別窓で開く
↓
↓リンク先でリンク元URL書き換えスクリプト発動！
↓
リンク元URLが(https://フィッシング釣り.com)などに書き換えられる
書き換えられたURLが銀行、Google、Amazonなどのログアウト画面を模したフィッシングサイトだとする
書き換えられたことに気づかず「あれいつログアウトしたのだろう？ログインするか！」とユーザ名、パスワード入力するとその情報が悪い人に渡る。
悪い人が銀行のお金を移動させたり、Googleから個人情報集めたり、Amazonで高額商品購入したりと知らぬ間に被害にあってしまう。
またユーザ名、パスワードを複数のサイトで使いまわしていると、そこも被害を受ける。
フィッシングサイトに誘導したのはリンク元の投稿者。
そんなつもりはないのに犯罪に加担する結果に。
“noopener”無しのtarget=”_blank”はとても危険だと分かった。
対策として”noopener”を追加し次のようなリンクにするとリンク先からリンク元のURLを書き換えることができなくなる。
<a href=”https://悪意のあるサイト.com” rel=”noopener” target=”_blank”>悪意のあるサイト</a>
noopenerだけで大丈夫？
実は”noopener”が対応していないブラウザが存在するので対策として不十分。
それを考慮して”noreferrer”も付けたほうが確実。
このようなリンクとなる。
<a href=”https://example.com” rel=”noopener noreferrer” target=”_blank”>テキスト</a>
noopener,noreferrerの意味は？
noopener
noopenerは新しいウィンドウを別スレッドで開く。
target=”_blank”のみだと開かれたページは親と同じスレッドとなり、window.openerを使用して親ウィンドウのオブジェクトにアクセスしたり、window.opener.location=newURLによって親ページのURLを変更可能となる。
noreferrer
リンク先にリンク元情報を渡さないようにする。
電話で例えると非通知のようなもので、発信元つまりリンク元をわからないようにする。
window.openerがnullとなるので親ページのURL変更が不可となる。
noreferrerの副作用
noreferrerをつけることによる副作用があるようだ。
それはアフィリエイト。
リンク元がわからないので成果が発生しない場合がある。
問題ないとの意見もあるようなのでASP業者に問い合わせたほうが確実だろう。
noreferrerを付けたくなければ、アフィリエイトリンクは target=”_blank” を使用しないほうが賢明。
↓こんな感じでリンク先を同じ窓、つまり画面遷移で開く。
<a href=”https://example.com”>アフィリエイトリンク</a>
さいごに
WordPressで「リンクを新しいタブで開く」の挙動が気になり調べたら、早急な対応が必要と判明したと同時に大変な作業量だと思った。
数日かかってすべての記事を見直し修正したけど大変だった。
今回のように新たな脆弱性が発見されるとブログ運用も楽ではない。(–;
コメント