Page MenuHomePhabricator

Prevent iOS Safari and other browsers' plugins from converting numbers into `tel:xyz` links
Closed, ResolvedPublic

Description

See [https://fr.wikipedia.org/w/index.php?title=Alexis_Galp%C3%A9rine&diff=prev&oldid=119818187 this edit] (and also other edits on this article) :

  • Forbidden <a> tag (since fixed)
  • With an ISBN converted into a telephone number
  • With parsoid attributes (since fixed)

iOS has a feature which detects patterns of numbers in an HTML document and automatically turns these into tel:// links when rendering a page on an iOS device. This in combination with VisualEditor sometimes leads to tel:// links being inserted by VisualEditor as it converts the HTML document back to wikitext.

As tel:// links are supported and allowed in wikitext and because the html links have no distinguishing features they are currently not filtered out because they might be legitimate content..

A fix was attempted earlier by disallowing this automatic detection in T256758: Prevent Safari from creating phone links for numbers in format ###-#### but it seems that this hint does not transfer to the visual editor documents we are handling.

Testing instructions

  • Create page with a phone number, e.g. 555-1234
  • Open VE mobile on an iPhone
  • Observed: The phone number is an un-editable link (inline alien node)
  • Expected: The phone number is editable plain text
  • Create an external link to "tel:555-1234" inside VE using the link tool
  • Expected: This creates an external link in wikitext when saved: [tel:555-1234 555-1234]. This is the current behaviour but we should test the patch doesn't break this.

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
NicoV raised the priority of this task from to Needs Triage.Oct 25 2015, 10:11 AM
NicoV updated the task description. (Show Details)
NicoV added projects: VisualEditor, Parsoid.
NicoV subscribed.

@ssastry : is the "telephone number" problem really the same problem as T116460 ?

Now that I look at it more closely, you are right. Maybe not. Conversion of a string of numbers to a telephone number seems like something that some plugin on the user's browser did (like how iPhone and other iOS gadgets sometimes do). I missed the <nowiki> around the whole string which is why Parsoid spit out the a-tag as a string.

So, maybe Parsoid needs to strip the a-tag even if it is embedded inside a nowiki string (right now don't do it because of the nowiki and also because the sanitizer strips those anyway).

@ssastry Here's an other example of the telephone problem (on the same article), alone without the other problems
https://fr.wikipedia.org/w/index.php?title=Alexis_Galp%C3%A9rine&diff=prev&oldid=119866774
It seems to have happened on an otherwise non modified line

Previous edits on the same article also created the telephone problem on other parts of the article
https://fr.wikipedia.org/w/index.php?title=Alexis_Galp%C3%A9rine&diff=prev&oldid=119865955
https://fr.wikipedia.org/w/index.php?title=Alexis_Galp%C3%A9rine&diff=prev&oldid=119861211

Conversion of a string of numbers to a telephone number seems like something that some plugin on the user's browser did (like how iPhone and other iOS gadgets sometimes do).

Skype loves to do this.

There is nothing for Parsoid to do here if the HTML we get is already mangled because of browser plugins , unless there is some specialized cleanup that can be implemented. I'll let @Esanders and @Jdforrester-WMF take a look at this.

Jdforrester-WMF renamed this task from Tag <a href="tel:..." data-parsoid-diff="..." to Somehow prevent iOS Safari and other browsers' plugins from converting numbers into `tel:xyz` links.Nov 17 2015, 8:22 PM
Jdforrester-WMF triaged this task as Low priority.
Jdforrester-WMF moved this task from To Triage to Freezer on the VisualEditor board.

With the visual editor more available and used on mobiles, this is becoming more common (we had four occurrences of this on cswiki in the last week, there are over 250 results on enwiki, some of them very recent).

There are some hints on stackoverflow: https://stackoverflow.com/questions/226131/how-to-disable-phone-number-linking-in-mobile-safari.

My hypothesis here (untested) is that we do some DOM building outside of the main document which we then import. Because the dom is temporarily outside the document, it cannot know about the autoformatting hint that we set in T288352: Safari treats links as telephone numbers in editor so the links get added. That or content editable is just ignoring that flag completely. Should be testable which of the two.

For what it's worth, I can't reproduce this on my phone. If anyone can reproduce, please share how you did it, as that will make fixing the issue easier for us.

If no one can reproduce, but it keeps happening in actual edits, it's difficult to fix. Surprisingly, Wikipedia allows 'tel:' links in articles, and we can't distinguish the browser adding the links automatically from the user doing in intentionally. You can find examples by searching for insource:/\[tel:/, almost all of which are obvious bugs/mistakes – but not all, there are a few articles about phone numbers.

I wonder if it would be palatable (or maybe even welcomed?) to disallow such phone number links in wikitext (using $wgUrlProtocols), at which point VisualEditor could simply remove any such links that appeared in the editor? (like we do with various other junk inserted by buggy browser extensions, see the list in T54327)

@matmarex I reproduced on iPhone using the following steps.

  1. On iOS Safari, go to w:ja:新幹線N700系電車#事故・事件からの復旧. Whether it is desktop or mobile view does not matter.
  2. Edit the section "事故・事件からの復旧" with VE and make any changes (e.g. remove the words "2015年6月30日").
  3. Check the diff in wikitext and one should be able to see the tel links added.

Edit modes:

  • If the edit is done solely in source editor, then the tel links will not be produced.
  • If one switches from source editor to visual editor, then the tel links will be produced.
  • If one then switches back to source editor, then the tel links stay.

Personally I do not see any legitimate usage of tel links in Wikimedia projects (not even in phone number related articles), so I am fine with disallowing phone number links.

New report from French Wikipedia (diff).

Do we really need to have a way to convert random strings into phone numbers? I can't find an example of a Wikimedia wiki where it would be useful (maybe Wikivoyage). Can't we find to have this link conversion being an option?

Do we really need to have a way to convert random strings into phone numbers? I can't find an example of a Wikimedia wiki where it would be useful (maybe Wikivoyage). Can't we find to have this link conversion being an option?

As you can find out by reading the ticket, this is not a "we" feature, but a Browser feature (sometimes an extension).

@patilise Thank you, I can reproduce that. The links are also visible on the editing surface while editing, and VisualEditor marks them as "alienated content" rather than a normal link, which makes me hopeful that we'll be able to distinguish them from real links in article and throw them away.

OK, can reproduce with the steps provided by @patilise

I also found the place where it goes wrong and it is right after it consumes the parsoid HTML. When it creates a VE document, in ve.createDocumentFromHtmlUsingDomParser() we use DOMParser.parseFromString. This reads the parsoid html and returns a document, which of course (and as i suspected) does NOT have the meta tag to suppress format-detection, which was added in T256758: Prevent Safari from creating phone links for numbers in format ###-#### and thus inserts the extra links.

I honestly find this rather questionable webkit behavior. I'm gonna file a ticket there as well.
https://bugs.webkit.org/show_bug.cgi?id=232856

As you can find out by reading the ticket, this is not a "we" feature, but a Browser feature (sometimes an extension).

I thought we were capable of filtering the wikitext we save.

Maybe a summary of the issue, explaining why it is a browser issue and why we can't fix it, could published in the task description. I encourage people who have the right skills to do so.

TheDJ updated the task description. (Show Details)

I also found the place where it goes wrong and it is right after it consumes the parsoid HTML. When it creates a VE document, in ve.createDocumentFromHtmlUsingDomParser() we use DOMParser.parseFromString. This reads the parsoid html and returns a document, which of course (and as i suspected) does NOT have the meta tag to suppress format-detection, which was added in T256758: Prevent Safari from creating phone links for numbers in format ###-#### and thus inserts the extra links.

Thanks for the investigation.

Could we work around this by injecting the meta tag into the HTML string before conversion (possibly only when iOS is detected in the UA)?

Change 737944 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/VisualEditor@master] Strip plain tel: links introduced by iOS

https://gerrit.wikimedia.org/r/737944

Esanders moved this task from Incoming to Code Review on the Editing-team (Kanban Board) board.

Could we work around this by injecting the meta tag into the HTML string before conversion (possibly only when iOS is detected in the UA)?

Rather than doing some sketchy HTML string manipulation, I decided to remove plain tel: links from the DOM just after conversion. Any tel links deliberately added by the user will have a Parsoid RDFa attribute and can be kept.

Test wiki created on Patch Demo by ESanders (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/72b9419304/w/

This works on my iPhone and iPad, but not if the iPad is set to requesting desktop website.

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Safari/605.1.15

vs.

Mozilla/5.0 (iPad; CPU OS 15_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Mobile/15E148 Safari/604.1

I always forget this is an option, but it explains why we have seen some non-mobile cases of VE adding tel: links I think.

That UA will trick our "isIOS" method into giving the wrong result and lots of things will break, although given this leads to content corruption rather than just a bad UX that might be worse.

I tested this on a fairly long article ([[Barack Obama]]) and it took about 1ms, so I'm happy to remove the isIOS check.

There are unfortunately cases where Parsoid creates plain links that would cause problems for this patch:

[[File:Example.jpg|link=tel:555-1234]]

or

<gallery>
File:Example.jpg|link=tel:555-1234
</gallery>

I can guard against these by checking if the parent of the <a> has typeof=mw:Image, however there may be others I haven't thought of.

we could just do:

if string has <head>, then replace with <head><meta name = "format-detection" content = "telephone=no">
else if string has <body> then replace with <body><head><meta name = "format-detection" content = "telephone=no"></head>

Or we can ask parsoid to add <meta name = "format-detection" content = "telephone=no"> to all of their documents I guess...

The <head> will have other attributes and I'd rather not get into regex matching of HTML strings if possible.

Change 738409 had a related patch set uploaded (by Esanders; author: Esanders):

[VisualEditor/VisualEditor@master] Inject meta tag to disable iOS tel: conversion in HTML head

https://gerrit.wikimedia.org/r/738409

Change 737944 abandoned by Esanders:

[mediawiki/extensions/VisualEditor@master] Strip plain tel: links introduced by iOS

Reason:

See I012c7a253e25a9da43e6188bc2a450be874c5408

https://gerrit.wikimedia.org/r/737944

Test wiki on Patch Demo by ESanders (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/72b9419304/w/

Test wiki created on Patch Demo by ESanders (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/332168749d/w/

The <head> will have other attributes and I'd rather not get into regex matching of HTML strings if possible.

This turned out to be the least bad option:
https://patchdemo.wmflabs.org/wikis/332168749d/wiki/Tel

Change 738409 merged by jenkins-bot:

[VisualEditor/VisualEditor@master] Inject meta tag to disable iOS tel: conversion in HTML head

https://gerrit.wikimedia.org/r/738409

Change 738484 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (ef47d7814)

https://gerrit.wikimedia.org/r/738484

Change 738484 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (ef47d7814)

https://gerrit.wikimedia.org/r/738484

Esanders renamed this task from Somehow prevent iOS Safari and other browsers' plugins from converting numbers into `tel:xyz` links to Prevent iOS Safari and other browsers' plugins from converting numbers into `tel:xyz` links.Nov 13 2021, 2:32 PM

The added phone number is an editable plain text and the existing behaviour for tel: external link is not broken. I have attached screenshots for reference.

IMG_6D1A24CE9B3E-1.jpeg (2×1 px, 465 KB)

IMG_86721BD2D632-1.jpeg (2×1 px, 241 KB)

Test wiki on Patch demo by ESanders (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/332168749d/w/