Refused to display..... frame-ancestors https://www.facebook.com

Question

I have included Facebook customer chat plugin on my website. It works fine for the first day. From the second day, it's not working. I have seen an error message in Google Chrome console:

Refused to display 'https://www.facebook.com/v2.11/plugins/customerchat.php?app_id=214160985792954&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FlY4eZXm_YWu.js%3Fversion%3D42%23cb%3Df157c0f5ff1898c%26domain%3Dwww.fast-pay.cash%26origin%3Dhttps%253A%252F%252Fwww.fast-pay.cash%252Ff11cff6d515fe88%26relation%3Dparent.parent&container_width=0&locale=en_US&minimized=false&ref=front-page&sdk=joey' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://www.facebook.com/"."

I googled the solution. Every answer I have seen that this is domain white listing problem. But I have whitelisted my domain in Facebook page.

Here is the process how I white listed my domain

First I go to my page settings
Under messenger platform settings I put my domain name for whitelisting
I have put my domain name in several patterns. Here I give you my patterns
https://www.example.com/
https://www.example.com/
https://example.com/
http://www.example.com/
http://example.com/

Here is the console error image

Is this happening locally or live? I.e. is your my-domain.com a valid domain with a valid SSL certificate? — alpipego, Dec 15 '17 at 10:53
it's in live. And yes domain is valid and a valid SSL certificate is installed — Md. Sahadat Hossain, Dec 15 '17 at 13:31
I'm facing similar error on facebook chat widget but only on macbook, did u get any solution? — Shujaat Shaikh, Feb 02 '18 at 14:25

Simon East · Answer 1 · 2019-05-22T22:39:06.743

39

There are two things required to avoid this message:

Ensure you have the correct Facebook page ID set in your HTML. This should be the numeric ID, not what you see in the URL. I found my page's numeric ID via https://findmyfbid.com

Example:
```
<div class="fb-customerchat" page_id="6708927376315932">
</div>
```
Whitelist your domain at Your Page > Settings > Messenger Platform. Ensure this matches your domain, uses HTTPS protocol, and include the port too if using a non-standard port. (And then make sure you hit the Save button!)

edited May 22 '19 at 22:39

answered Dec 11 '17 at 00:35

Simon East

55,742
17
139
133

2

This error is specific to white list. It's common with sites like webflow, wix, Squarespace, wordpress with custom domains configured. Remember to white list the alias domain of the web site platform. For example if your site is lovepokemon.com the wix site could be lovepokemon.wix.com. Make sure to white list the wix url because that is the site facebook sees as owner of the iframe. – Cameron McGrane Mar 08 '18 at 03:27
2

Is it possible to display chatbot in local development? It doesn't allow me to whitelist localhost – Connor Leech Mar 14 '19 at 18:59
1

This should be the correct answer. I had the exact same console error, and it turned out the domain wasn't in the whitelisting settings. – Lee May 16 '19 at 12:31
@ConnorLeech ?HOw are you entering your hostname? I have a local site using a hostname, and that seems to work fine (It's not localhost) – Lee May 16 '19 at 12:31

Michael Y. · Answer 2 · 2018-06-08T13:16:37.993

10

There are several things:

Ensure Facebook page is Published
Under Facebook page settings (Messenger Platform), add your domain. MUST be https:// Make sure domain name matches exactly including www (or lack thereof).
Use correct app_id
Use this page_id (from steps 3 and 4)

If chat plugin works for you and no one else, it's probably because you're logged into FB and you're the page admin. Check steps 1 & 2.

edited Jun 08 '18 at 13:16

answered Feb 09 '18 at 16:03

Michael Y.

661
7
12

For #2 - It doesn't need to be a secure website (https). However, it does need to be exactly how you have it. Ex: `http://www.example.com` (include the `www` part, even if `http://example.com` redirects to `http://www.example.com`) – tekNorah Mar 02 '18 at 23:14
@tekNorah sorry, what? – Michael Y. Mar 03 '18 at 03:26
I was just making a comment on your answer, saying that the domain doesn't have to be secure, but it does have to be exact. Does that make sense? – tekNorah Mar 04 '18 at 22:38
@tekNorah Of course it has to be exact, you can't misspell it or anything :). It has to https as well. – Michael Y. Mar 05 '18 at 03:02
Facebook does require HTTPS. `Domains must meet the following requirements to be whitelisted: Served over HTTPS` https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin#steps – Lukas Liesis May 21 '18 at 21:16
`1. Ensure Facebook page is Published` - I feel stupid af right now haha – AndrewL64 Jul 23 '21 at 13:09

score 8 · Answer 3 · edited May 06 '21 at 13:42

8

Some of the common things

whitelist the domain name
Facebook page is publicly visible
correct page id (you should use numeric ID, not textual one in the URL, if that's what you happen to have)
referrer policy is not set to "no-referrer"

some other reasons,
page not loading through https
multiple facebook sdk are added

source, more info

edited May 06 '21 at 13:42

gigamarr

145
1
12

answered Jul 09 '18 at 15:10

bhv

5,188
3
35
44

score 4 · Answer 4 · answered Dec 13 '17 at 20:32

4

Make sure your FB page is published.

answered Dec 13 '17 at 20:32

Jeff H

81
4

1

Right in the spot! :) Thanks – Cristian Gonçalves Oct 23 '18 at 22:01

score 1 · Accepted Answer · answered Dec 17 '17 at 07:03

1

You didn't mention anything about using additional plugins or CMS. Are you using plain PHP or CMS like WordPress? I wonder there might be an issue with your incorrect configuration. Please Re-check your Facebook Page Id. For any additional plugin, make sure to turn it on.

answered Dec 17 '17 at 07:03

Prokash Sarkar

11,723
1
37
50

1

Yes, I used a wp plugin. Unfortunately, the plugin was inactive somehow. And I did not notice it. Thank you. – Md. Sahadat Hossain Dec 18 '17 at 06:57
15

Unfortunately, this is not an answer but more of a comment. I still have this problem in Chrome (note not in Chrome Canary though). If the plugin has not been active, why did it show anything in the first place? This does not really make sense to me. – alpipego Dec 22 '17 at 15:04

score 1 · Answer 6 · answered Dec 27 '17 at 20:20

1

I had the same problem. If you click that in the console you'll see it says: Parameter page_id: Invalid id: <107153046051560>

The problem was simply the <>. I removed that so its:

And it worked. Hope it works for you too. Regards

answered Dec 27 '17 at 20:20

Guillermo

21
1

score 0 · Answer 7 · answered Dec 13 '17 at 17:12

I think that's not coming from facebook but your website. Your browser refuses to display an iframe from a "bad" source, in this case facebook.com.

You may read

Or greenlight any requests from facebook like in this example (which is not the best way to do it, as it undercuts some major protection against XSS):

Link at Stackoverflow: Content-Security-Policy issue

score 0 · Answer 8 · answered Apr 19 '18 at 04:29

0

the issue is not about whitelisting mistake or something else. its about google chrome browser issue. if you open with firefox then there is no problem with the messenger chat. i think it is something wrong with chrome.

answered Apr 19 '18 at 04:29

afendio

1

score 0 · Answer 9 · answered Mar 02 '19 at 17:59

0

As evidenced by all these answers, this could be happening for several reasons.

However, one condition that will lead to this error that I have experienced but have not seen listed here is if you load the page while logged in as a Test User.

answered Mar 02 '19 at 17:59

Jeff Bowen

5,904
1
28
41

score 0 · Answer 10 · answered Nov 04 '19 at 01:53

0

In the "Set Up Customer Chat page" make sure FINISH button is already clicked. If FINISH button is grey, click SAVE button first

answered Nov 04 '19 at 01:53

eko

139
1
6

Refused to display..... frame-ancestors https://www.facebook.com

10 Answers10

Linked