謎のコード<style id=”igor_ext_nofollow”>〜</style>の正体は?

この記事は最終更新から3年以上が経過しています。情報が古くなっている可能性があります。

コーディング中にデベロッパーツールで突如<style id=”igor_ext_nofollow”>〜<style>という謎のコードが挿入されていることに気づきました。
これ、原因はかなりシンプルだったんですが、以前に調べたもののすっかり原因を思い出せなかったので、備忘録として原因と対処法を残したいと思います。

挿入されるコード

コードの中身はこちら。

<style id="igor_ext_nofollow"> a[rel~='nofollow'],a[rel~='sponsored'],a[rel~='ugc']{outline:.14em dotted red !important;outline-offset:.2em;} a[rel~='nofollow'] img, a[rel~='sponsored'] img, a[rel~='ugc'] img{outline:2px dotted red !important;outline-offset:.2em;}</style>

最初はjsの仕業かな?と、思いあたる要因をひとつひとつ削除して確認してたんですが、
最終的に…

空ページでも挿入されてしまっていることが分かりました。

原因はブラウザの拡張機能によるもの!

よくみるとこの謎コード、スタイルの中身を見ると心当たりが。
ということで確認したところ、正体が判明しました。


NoFollow

この「NoFollow」というChrome拡張機能は、閲覧中のWebページにある

  • nofollowおよびnoindexメタタグを検出
  • nofollowリンク適用箇所の表示

等をしてくれるもの。

後者の機能は、nofollow属性がリンクに指定されている場合、webページ上で赤いドット線で対象箇所を囲ってくれます

有効化していると下の図(右下のCHROME、OPERA、SAFARIリンクテキスト部分)のような見た目に。


NoFollow

挿入されてるコードはこの赤いドット線用のスタイルだったんですね。
このNofollow拡張機能、nofollow属性のリンクやnofollow・noindexメタタグが設定してないページだと何も表示されないので、存在をすっかり忘れていました(´∀`;)

なので、別のブラウザから見ればこのコードは出力されません。
拡張機能をいれているブラウザでアンインストールせずにコードの出力を停止させたい場合は、下の図のように拡張機能の設定から[Disable for this website]をクリックしてチェックをいれれば挿入されなくなります。


上はGoogle検索トップの例

これで解決!

雑感

ということで、今回は#igor_ext_nofollowの謎styleタグの正体についてでした。
拡張機能やプラグインによる仕業はあるあるだと思うんですが、最近遭遇してこなかったので焦ってしまった。。
まずは焦らず、トップダウンで検証を進めるよう気をつけたいと思います。

同じ事象でお困りの方にも参考になれば幸いです!