I'm trying to include Facebook Messenger Customer Chat Plugin in my website, but the plugin is not showing. It was working fine couple days ago but suddenly it stopped working.
I'm getting two types of errors:
1- When I'm not logged in to facebook, I'm getting this error in console:
Failed to execute 'postMessage' on 'DOMWindow': The target origin
provided ('https://www.facebook.com') does not match the recipient
window's origin ('https://web.facebook.com').
I used FB.CustomerChat.show() in the console, and the dialog appears but the error is repeated, and the bubble isn't shown.
2- When I'm logged in to facebook, I'm not getting any errors and the plugin still doesn't appear.
I used FB.CustomerChat.show() in the console, and the dialog appears but and the bubble isn't shown, but this time an Error link is displayed within the bubble's iframe saying:
this plugin requires the use of the Javascript SDK and XFBML
I tried changing the version of the sdk, changing the settings in the facebook app (developers.facebook.com), whitelisting the domain in my facebook page,
tried adding #xfbml=1&version=v2.12&autoLogAppEvents=1 after the url for the sdk..
no luck at all.
window.fbAsyncInit = function () {
FB.init({
appId: app_id,
autoLogAppEvents: true,
xfbml: true,
version: 'v2.12'
});
};
(function (d, s, id) {
var js;
var fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/'+localization+'/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
To workaround add this to response header:
X-Frame-Options: allow-from *
or
X-Frame-Options: allow-from https://www.facebook.com https://web.facebook.com
Changing the version for Facebook JS SDK to v3.3 and making sure that the Facebook SDK and Facebook MCC SDK are both loaded exactly after the body tag solves the issue.
Update:
There is a bug within the Facebook JS SDK that causes this problem, you can track the issue here:
https://developers.facebook.com/support/bugs/470869643489449/
Related
I'm attempting to integrate facebook chat to my website, but get this error:
Refused to display 'https://www.facebook.com/v2.12/plugins/customerchat.php?
app_id=166409452530897&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect
%2Fxd_arbiter%2Fr%2FJW5GlLnAsFw.js%3Fversion%3D42%23cb%3Df1fc7859561b6e%26do
main%3D[domainsnipped]%26origin%3Dhttps%253A%252F%252F[domainsnipped]%252Ff17b909ebfe83c4%26relation%3Dparent.parent&container_width=0&locale=
en_US&page_id=857469729300&sdk=joey' in a frame because an ancestor violates
the following Content Security Policy directive: "frame-ancestors
https://www.facebook.com".
I have added exactly https://www.example.com/ as a whitelisted domain in my page's settings at https://www.facebook.com/example/settings/?tab=messenger_platform
https://findmyfbid.com/ reports my pageID to be 857469729300
My facebook appID (taken from https://developers.facebook.com/apps/ appears to be 166409452530897, and the app is "live".
This is the code I've got on my site:
<div class="fb-customerchat" page_id="857469729300"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '166409452530897',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.12'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
What am I doing wrong? Many thanks!
According to facebook chat troubleshooting 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.
In your case, you send Referrer-Policy: same-origin response header, which means that the Referer request header when an iframe url is requested, is set only for iframe urls of the same domain, not others, in this case www.facebook.com.
So the Referer: https://www.example.com request header is not set for the facebook chat url and it could be that you are getting this error because of this.
Change the response header to origin.
Eg, with php, do
header('Referrer-Policy: origin');
Note, you may have to reload the page a couple of times and wait some minutes for this to be "understood" by the browser.
References
Referrer-Policy header
Same-origin policy
I'm running an error very similar with this one: Facebook Login API HTTPS Issue.
I have a website use facebook authentication, the Facebook login is no problem. But the Facebook like-button get troubled when been clicked (test fail on Chrome, Safari, Firefox, in OSX), the error message is:
Blocked a frame with origin "https://www.facebook.com" from accessing a
frame with origin "http://static.ak.facebook.com". The frame requesting
access has a protocol of "https", the frame being accessed has a protocol
of "http". Protocols must match.
I've searched all over and find no solutions.
It seems like that when the like-button is clicked, it pop out a frame from https://facebook.com callback and trying to request http://static.ak.facebook.com thus cause protocol mismatch?!
Here's what I put right after <body> tag
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'appid', // App ID from the app dashboard
channelUrl : '//mydomain/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/zh_TW/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
and the channel file at http://mydomain/channel
<script src="//connect.facebook.net/zh_TW/all.js"></script>
and here's how I use the like-button
<div class="fb-like" data-href=url data-send="true" data-width="450"
data-show-faces="true"></div>
Really needs help, please!
In your first script tag you can tell Facebook explicitly to use HTTPS...
Add the line:
FB._https = (window.location.protocol == "https:");
Add it before the FB.init function call, just below or in place of the comment:
// init the FB JS SDK
This will ensure that Facebook's servers load any required libraries their end over https.
Hope this helps.
Reviewing the js code on Facebook there are multiple urls containing hard coded strings for
http://static .../rsrc.php
it's possible those are the files triggering the error.
This may be something Facebook needs to update.
On a side note, it may be possible to download that js file from Facebook and store it on your server and remove the hard coded http string. I would test this further but I am on my phone at the moment.
I added a facebook like button in my page. The page is rendered by using AJAX.
Here is my code:
$(document).ready(function(){
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
});
When I access this page via Chrome, Chrome keeps log the error message:
Blocked a frame with origin "https://www.facebook.com" from accessing a frame with origin "site url" 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.
Thanks a lot for your help.
I just found this on the facebook developer site:
"This is a warning in Chrome that has no ill side effects
Please check whether you have any extensions installed."
http://developers.facebook.com/bugs/586120791417551/
It may be that you have a content script from an extension that is generating these errors. My site is slo showing several of these errors in the console log. However, the facebook button is operating correctly. I am going to test in a chrome session with no extensions installed.
Is your facebook like button functioning correctly (other than throwing messy console errors)?
Code on my web page:
<body class="popup">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '476947702378530', // App ID from the app dashboard
channelUrl : '//www.majorforms.com/fb_channel.php?_lang_id=1',// Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
After loading that page with a browser, I get this error in firebug console:
Application Error: There was a problem getting data for the application you requested. The application may not be valid, or there may be a temporary glitch. Please try again later.
I don't really understand. I do not have a real app, I just used the identifier of a facebook (company) account. I do not want to create a new facebook app, I just want to use credentials of a specific facebook account. How do I do that?
I'm not hundred percent sure but you need to create an app to use the facebook sdk because in the FB.init method it obviously asks for the Facebook App Id.
Creating a Facebook App doesn't necessarily mean that you actually have an app on facebook, the app configuration screen on Facebook Developers page has a specific section for "Website With Facebook Login" , so I think thats the way you should go.
I found I was getting this error when testing my application because I was signed into Facebook as a test account user. When I tried to access the live environment it would generate that error as it was already authenticated to the developer user. The error message is kind of generic and doesn't really spell out the issue in black and white.
Loading my facebook page in a tab shows following error:
FB.Auth.setAuthResponse only compatible with OAuth2.
I use oauth parameter like this:
FB.init({
appId: fbAppId,
status: true,
cookie: true,
xfbml: false,
oauth: true
});
Am I doing something wrong ?
remove the parameters from your JDK including:
script src="http://connect.facebook.net/en_US/all.js"
Log in to the Facebook account that is in charge of the App.
Go to https://developers.facebook.com/apps/ and click on the App in question.
In the left menu, under Settings, click Advanced and look at the settings in the Migrations section.
I encountered this issue on a test environment of mine, and switched the "Encrypted Access Token" setting to 'Enabled' and it seems to resolve the issue for me. I did all this code work for the migration but had NO IDEA that I had to go into the App and mess with settings.
HTH
Some Facebook social plugins(the ones that require actually inserting JavaScript) have their own authentication scheme. The newly implemented Add To Timeline button is one example of a social plugin that will cause this error to appear in your JS console. Try removing social plugins and see if the error persists. If they disappear, your only real option is to switch to XFBML.
when using outh 2 add oauth=1 to provided js function for social plugins
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/tr_TR/all.js#**oauth=1**&xfbml=1&appId=164442023647373";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
i had this error when using
ow.fbAsyncInit = function() {
FB.init({
appId : '<s:property value="app_id" />',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true
});
Old variables i used:
response.session.access_token
response.session.uid
New variables helped:
response.authResponse.accessToken
response.authResponse.userId