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&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 はユーザーエージェントを切り替えてチェックをするということがわかりました。
以上です。
コメント