search

Yoctol / react-messenger-customer-chat

React component for messenger customer chat plugin
MIT License
272 stars 69 forks source link

Frame refuses to display #27

Closed Omar-Ali closed 6 years ago

Omar-Ali commented 6 years ago

I'm trying to embed the component but the frame refuses to load and I'm facing this console error:

screen shot 2018-07-22 at 1 08 35 pm
chentsulin commented 6 years ago

From: https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin#debug-tips

If you see a console error like "Refused to display in a frame because an ancestor violates the following Content Security Policy directive: ", check that the domain of the page the plugin is being rendered on has been whitelisted. Also make sure you didn't set the Referrer-Policy header to no-referrer.

Omar-Ali commented 6 years ago

I'm still testing it on my localhost, I've already set the referrer policy to 'no-referrer' but I don't know how to whitelist my domain, nor my localhost.

chentsulin commented 6 years ago

@Omar-Ali You can use ngrok or localtunnel to get a domain when developing you webpage on localhost.

If you don't know how to whitelist your domain, you should check out - Prerequisite Section on README.

Omar-Ali commented 6 years ago

After whitelisting the domain on facebook and setting the Referrer-Policy header to no-referrer, I'm still getting the same error.

tw0517tw commented 6 years ago

Maybe you can try to report on Facebook bug report or ask in Messenger Platform dev group

Omar-Ali commented 6 years ago

The problem just fixed a month later, I think it was something from Facebook end.

sonic1981 commented 3 years ago

The issue here is that Facebook SDK has a white list, you can't white list localhost. You can work around it by using your hosts file to render localhost on your domain name, add a record into your hosts file something like:

127.0.0.1 www.mydomain.com

Then go to www.mydomain.com where this domain is white listed in facebook and it should work.