Safari mailto: "This website has been blocked from automatically composing an email."

Question

When using Safari (iOS 10.2) and clicking on a mailto link a confirmation prompt is shown with the following message:

"This website has been blocked from automatically composing an email." Ignore / Allow

I'd like to get rid of this on my own site and don't know what to do. It can be reproduce with Safari e.g on any BBC article clicking the mail icon.

Screenshot of dialogue on iPad

My web research brought me to these links:

https://discussions.apple.com/thread/7763735

WillieFromColo Jan 11, 2017 8:25 AM in response to Russ G

Issues with Safari and "This website has been blocked from automatically composing an email."

My research on Google suggests that this Error-type Message started happening in about November with an update to Safari, which likely occurred concurrently with Apple's update to iOS 10.2. As of today (1/11/17) that is the latest version of iOS for iPads and perhaps iPhones, too.

[...]

and

https://developer.apple.com/safari/technology-preview/release-notes/#r15

Release 15 URL Handling

Navigations to tel: and mailto: links now require a user gesture; navigations without a user gesture will show a confirmation prompt

So it seems like a Safari "feature". Does anyone know how to prevent this prompt?

Solution 1

Various third party JavaScript libraries will intercept clicks on a tags in order to prevent navigation briefly while sending data to a server. Typically, they programatically trigger navigation via window.location.replace.

The change in Safari pops the warning when mailto/tel links are triggered in this way.

There was an interaction, but that's usually been stopped with preventDefault, and Safari doesn't care.

If you're using a library that's causing this issue, contact the creator and see if they can update it to skip preventDefault on mailto/tel links.

Solution 2

What i did not mention initially was that we called the mailto from the JavaScript part of out page. We now again tried to solve the issue by changing to a HTML Tag based mailto (with to and subject) and it now somehow works without that dialouge. So i assume this issue solved for myself, but i am open to any hints explaining the reasons. Therefor by now i do not flag this answer as the solution.

Solution 3

Happened for users because we used window.open(...) to open that link in new window.

Replaced to window.location.href = ... just for Safari :facepalm:.

Comments

[rovermicrover]

Our fallback system for reporting errors uses dynamically generated mailto links, and it would seem that not only preventDefault causes this but also changing the href location after the click but before the event triggers causing this behavior.

[Chris Prince]

In my context, this appears to be caused by HTML not by Javascript. The tag in question looks basically like this: <a href="mailto:[email protected]">[email protected]</a>.

[jmc]

@ChrisPrince correct, the tag is correct, the issue is that event listeners can listen for clicks on that tag, and modify the results so that the href isn't followed by a "user interaction" but instead by the JavaScript changing the window.location after the click is fired.

[Chris Prince]

I'm nodding. I found a second example that confirms what you say. In another of my websites, I have the same anchor tag/mailto link and it does not cause this behavior in Safari/mobile. So, I'm digging more into your hypothesis. Thanks!

[Chris Prince]

There is definitely an event listener attached to the anchor tag in my case. Looking into removing it.

[Brighty]

This is being triggered for me by a google tag manager snippet.

[jmc]

@Brighty I would bet that it's one of the scripts GTM is loading, rather than GTM itself.

[Allen Gingrich]

My problem is this, and like @jmc, it's GTM intercepting it. How can I get around this while still using GTM?

[jmc]

Hey @AllenGingrich - you need to isolate which script GTM is loading that's causing it. GTM itself shouldn't be the cause.