Login/Register
Refused to display..... frame-ancestors https://www.facebook.com
Asked Answered
Solved wordpressfacebookfacebook-messengerfacebook-customer-chat
H

10

44

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

  1. First I go to my page settings

  2. Under messenger platform settings I put my domain name for whitelisting

  3. I have put my domain name in several patterns. Here I give you my patterns

  4. https://www.example.com/

  5. https://www.example.com/

  6. https://example.com/

  7. http://www.example.com/

  8. http://example.com/

Here is the console error image

Haire answered 10/12, 2017 at 7:1 Comment(4)
Is this happening locally or live? I.e. is your my-domain.com a valid domain with a valid SSL certificate? – Tellurate
it's in live. And yes domain is valid and a valid SSL certificate is installed – Haire
I'm facing similar error on facebook chat widget but only on macbook, did u get any solution? – Acidimetry
Tip :- ! this happens when your site is on locally. – Century
L
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.

Laurinelaurita answered 17/12, 2017 at 7:3 Comment(2)
Yes, I used a wp plugin. Unfortunately, the plugin was inactive somehow. And I did not notice it. Thank you. – Haire
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. – Tellurate
K
38

There are two things required to avoid this message:

  1. 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>

  2. 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!)

Kweiyang answered 11/12, 2017 at 0:35 Comment(4)
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. – Scarlatti
Is it possible to display chatbot in local development? It doesn't allow me to whitelist localhost – Kenyettakenyon
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. – Rommel
@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) – Rommel
A
10

There are several things:

  1. Ensure Facebook page is Published
  2. Under Facebook page settings (Messenger Platform), add your domain. MUST be https:// Make sure domain name matches exactly including www (or lack thereof).
  3. Use correct app_id
  4. 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.

Ahearn answered 9/2, 2018 at 16:3 Comment(6)
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) – Macgregor
@Macgregor sorry, what? – Ahearn
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? – Macgregor
@Macgregor Of course it has to be exact, you can't misspell it or anything :). It has to https as well. – Ahearn
Facebook does require HTTPS. Domains must meet the following requirements to be whitelisted: Served over HTTPS developers.facebook.com/docs/messenger-platform/discovery/… – Alimony
1. Ensure Facebook page is Published - I feel stupid af right now haha – Consolation
G
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

Glennisglennon answered 9/7, 2018 at 15:10 Comment(0)
H
4

Make sure your FB page is published.

Hannahhannan answered 13/12, 2017 at 20:32 Comment(1)
Right in the spot! :) Thanks – Ayotte
L
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.

Laurinelaurita answered 17/12, 2017 at 7:3 Comment(2)
Yes, I used a wp plugin. Unfortunately, the plugin was inactive somehow. And I did not notice it. Thank you. – Haire
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. – Tellurate
R
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

Roseannroseanna answered 27/12, 2017 at 20:20 Comment(0)
P
0

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

Pirri answered 13/12, 2017 at 17:12 Comment(0)
U
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.

Unlimber answered 19/4, 2018 at 4:29 Comment(0)
C
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.

Collect answered 2/3, 2019 at 17:59 Comment(0)
D
0

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

Dateless answered 4/11, 2019 at 1:53 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.