Refused to display… frame-ancestors https://www.fa

2020-02-20 08:39发布

问题:

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

    1. https://www.my-domain.com/
    2. https://www.my-domain.com/
    3. https://my-domain.com/
    4. http://www.my-domain.com/
    5. http://my-domain.com/

Here is the console error image

回答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.



回答2:

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



回答3:

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.



回答4:

Make sure your FB page is published.



回答5:

Some of the common things

  • whitelist the domain name
  • Facebook page is publicly visible
  • correct page id
  • referrer policy is not set to "no-referrer"

    some other reasons,

  • page loads through https
  • multiple facebook sdk are added

source, more info



回答6:

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



回答7:

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

  • https://developer.mozilla.org/en-US/docs/Web/Security/CSP
  • https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

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



回答8:

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.



回答9:

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.



回答10:

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