0

I have a 'Send to Messenger' button on my app. It use to work just fine earlier. But now it does not work on Safari on Mac & iOS. It works on Chrome perfectly, but when clicked from Safari, Facebook is not sending event on my Webhook.

Screenshot below: On Safari I also get a specific page after user clicks on authentication " Tap to go back to URL".

Image where users click on send to messenger button
User is asked to Authenticate
Tap to go back to URL screenshot - Likely Culprit
Button Status shown approved, but in reality its not

  • Possible reason : `Exception with thrown value: SecurityError (DOM Exception 18): Blocked a frame with origin "https://www.facebook.com" from accessing a frame with origin "http://alpha.lvh.me:3000". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.` – Aakash Barot Feb 17 '18 at 16:40
  • But it still works on Chrome. In exact same setting – Aakash Barot Feb 17 '18 at 16:40
  • Additional Information: If I have already authorized the page, it works just fine, since there is no pop up. – Aakash Barot Feb 17 '18 at 16:44
  • Did you ever get this resolved? Facing a similar issue =/ If I use the site using https the only caught exception is: `The frame requesting access set "document.domain" to "facebook.com", but the frame being accessed did not. Both must set "document.domain" to the same value to allow access.` That error occurs on opening the confirmation modal, and no exceptions are thrown afterwards – Hodrobond Apr 06 '18 at 15:15

1 Answers1

0

The error message given to you is stating the issue:

The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

When you use the Send To Messenger plugin there are some requirements for your own domain. See the documentation here. One if these is that you must whitelist your domain. It states:

Use a fully qualified domain name, such as https://www.messenger.com/. IP addresses and localhost are not supported for whitelisting.

You are serving your application using HTTP from http://alpha.lvh.me:3000 but you must serve it using HTTPS. It's also not clear from their requirements if you can use a port number or not but I think you'd be better looking at ngrok or localtunnel for local development.

[Edit] I think it's probably an issue with the content security policy (CSP) on Safari. Some reading about it here.