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
Related
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/
I want to have a "facebook share" link or button on a web page. The idea is to to share a link and a brief description, identical to twiter. No image or title of page is needed
In the past, the following link worked:-
"http://www.facebook.com/sharer.php?u=" + complete_url + message
Now, facebook ignores the message and it discards the complete url link. Instead it only displays the title of the homepage.
I found this answer on stack overflow:-
Make my own custom Facebook share button.
Having tried it (the script below) - I get the error: 'FB' is undefined
I'd be grateful if you could tell me:-
1. what am I doing wrong?
2. do we have to download the sdk.js from facebook server everytime?
The script is like this:
<html><head>
<script>
function onClick() {
FB.ui({
method: 'share',
href: 'the_complete_url_to_specific_page'
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'my_facebook_id',
xfbml : true,
version : 'v2.3'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</head>
<body>
<a href='#' onclick='onClick() ;return false;'> share on FacebookR</a>
</body>
</html>
First of all: No, you do not need to change the API version. Only if you need to use something that is only available in newer versions, check out the changelog once in a while: https://developers.facebook.com/docs/apps/changelog
You get the "FB is undefined" error if the JavaScript is not loaded (yet). Most likely you are not trying your code on a real server (it can also be localhost) but from your file system. You can try adding "https" to the source like this, or (better) test the code on a real server:
js.src = "https://connect.facebook.net/en_US/sdk.js";
The App ID is NOT your User ID, it´s an ID you get after creating an App here: https://developers.facebook.com/apps
Btw, the user can enter the message right when the Share Dialog pops up.
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.
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.
I'm trying to follow the tutorial here. But when I call FB.init(...) with what appears to be valid and correct parameters I get the error message: "Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains." I have searched (1 2) for this error, but everyone else seems to be having trouble simply setting the Site URL for their Facebook Application configuration. I'm 99% certain I have set this correctly - but obviously I'm doing something wrong.
Here is my code that is causing problems. I have replaced some of the info with "XXX" and "YYY" for privacy reasons.
<html>
<body>
<h1>Facebook</h1>
<div id="fb-root"></div>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : 'XXX', // App ID
channelUrl : '//YYY.com/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};//window.fbAsyncInit()
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "http://connect.facebook.net/en_US/all/debug.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
</body>
</html>
Notice that I had to change the js.src parameter near the bottom of the code from the example given in the tutorial. I doubt this is causing my specific problem, but casts some concern on the quality of the code in the tutorial. (I hate it when tutorial code doesn't work - what's the point?)
You can see in the code above I have replaced the root of my domain name to "YYY". Keeping with this simple replacement here are some of the values from my Facebook Application configuration:
App ID: "XXX"
Display Name: "[blah blah blah]"
Namespace: "YYY"
App Domains: "YYY.com"
Sandbox Mode: "Enabled"
Canvas Page: "http://apps.facebook.com/YYY"
Canvas URL: "http://YYY.com/canvas/"
I'm not sure what other detail you may need to help me with this. All of the URL's listed are functional. Thanks for any help!
Notice that I had to change the js.src parameter near the bottom of the code from the example given in the tutorial.
Why? Are you testing by just calling your page in the browser from the file system, and not over HTTP via a local web server?
If the latter is the case, then you have no “domain” that Facebook could verify your request origin against. Set up a local web server, call your document via it, and try again,