Web サイトの診断ツール Sonar の ルール disown-opener と Chrome Audits の挙動の違い


sonar, a linting tool for the web に、a タグに rel="noopener" が付与されているかチェックする disown-opener というルールがあります。

これと同じ内容のチェックを行うルールが、Chrome の Audits にもありますが、少し挙動が異なったので、記載します。


前提

Chrome と、 Sonar の Version 情報はそれぞれ以下になります。

  • Chrome の Version
    62.0.3202.75

  • Sonar の Version

    % sonar -v
    v0.14.1
    


rel=”noopener” を使用して外部アンカーを開くのが、推奨される理由

以下、rel=”noopener” に関する記事になります。


Sonar の disown-opener と、Chrome Audits の挙動の違い

以下のリンクで、Chrome の Audits の場合、警告が出力され、Sonar の disown-opener では警告になりません。

<a data-category="sns_profile" href="https://github.com/kemsakurai" title="Author’s github"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-github fa-stack-1x fa-inverse"></i></span></a>

逆に以下のリンクでは、Chrome の Audits では警告にならず、 Sonar の disown-opener では警告になります。

<a data-ga-event-action="click" data-ga-event-category="sns" data-ga-event-label="twitter" href="https://twitter.com/intent/tweet?url=http%3A//bit.ly/2hxg8IZ&amp;text=aXe%20Chrome%20plugin%20%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B" target="_blank">Twitter</a>

日本語の説明を読む限りは、target 指定している場合、rel="noopener" を指定する必要があると読み取れますので挙動としては、Sonar の diown-opener の挙動が正しいのではないのかと思われます。

ただ、現状 挙がっている Issue 等で特に語られていないため、機種等によっては発生するのかもしれません。1


どのように直したか?

それぞれのツールで警告が出ていたリンクに、rel="noopener noreferrer" を一律付与しました。
理由は、target="_blank" がないリンクでも付与して特に害はないと考えたためです。2


理由がわかった

現在、ユーザエージェントで Mobile テンプレートと、 通常 テンプレートを切り替えています。
Mobile 側のテンプレートを修正していないため、警告が出力されていたようです。
Mobile テンプレート側に rel="noopener noreferrer" を付与したところ解消されました。
ですので、挙動の違いという意味だと、sonar は ユーザーエージェントを切り替えるチェックを行わないが、lighthouse はユーザーエージェントを切り替えてチェックをするということがわかりました。

以上です。


  1. Chrome で タブで開いてみたのですが、target="_black"をつけない場合、window.opener は undefined になっていました。 

  2. noreferrer を付与すると refferer が付与されなくなるので、他のサイトにこのサイトから来たということ伝わらなくなります。自社サイトから自社サイトへ遷移させる際等、reffererどこから来たのかが重要になる場合は、付与しない選択になるかもしれません。 

コメント