怪奇! iOSのChromeで意図しないテキストに勝手にフライト情報のリンクが付いた!!|Blog|株式会社トライム

Keyword

Contact

についての不明点や案件のご相談などございましたらお気軽にお問い合わせください。

Share

X Facebook pocket LINE はてなブックマーク

怪奇! iOSのChromeで意図しないテキストに勝手にフライト情報のリンクが付いた!!

2016.11.04

恐怖、謎のリンク

先日私、あるページをコーディングしておりましたら、
なんだか寒気がしまして、ヤダなー、コワイなー、と思っておったんですが、
ふと…、iPhoneのChromeでブラウザチェックしますと、、、

そこに居るはずのない何かが居たんです。

ダラスからホノルルへ

HTMLは単純なテキストだけです。

AA0123

これをiPhoneのChromeで確認したところ、

img_3157-576x1024
なぜかリンクになっています。
クリックすると…

img_3158
さらに、フライトをプレビューします。

img_3159
なぜかダラスからホノルル行きの飛行機に乗ることに。

謎のリンクの正体は?

ソースを表示させてみると、下記のようになっていました。

<a href="x-apple-data-detectors://0" dir="ltr" x-apple-data-detectors="true" x-apple-data-detectors-type="misc" x-apple-data-detectors-result="0" style="color: rgb(0, 0, 0); -webkit-text-decoration-color: rgba(0, 0, 0, 0.258824);">AA0123</a>

アルファベット2文字と数字4桁の組み合わせで、
それも航空会社の頭文字と一致してしまうとこうなるようです。

「AA」はアメリカン航空の頭文字でした。

対策

仕方がないので、CSSのpointer-eventsで無効化しました。

a[href^="x-apple-data-detectors://"] {
  pointer-events: none;
}

ただし、これですと電話番号のリンクも多分、無効化されます。
子孫セレクタを使ってピンポイントで指定するしかないですね。

Share

X Facebook pocket LINE はてなブックマーク
Webサイト制作についてお悩みでしたら私たちにご相談ください。

私たちはECサイトなどのBtoCのサイトの制作に特化したWeb制作会社です。マーケティング視点をもったクリエイティブにより、運用まで見据えた効果の高いWebサイトを構築いたします。Webサイトについてお悩みのWeb担当者の方は、トライムまでお気軽にご相談ください。

Keyword

Contact

についての不明点や案件のご相談などございましたらお気軽にお問い合わせください。

Contact

お問い合わせ

トライムは常にお客様へ寄りっ沿った提案をさせていただきます。
自社のEC売上の拡大や人材不足などのお客様のデジタル上の課題を、
様々なアプローチにより解決するお手伝いをいたします!
お気軽にお問い合わせください。

TEL

03-6403-3259

受付:10:00 - 19:00