I try to share a page using this code
FB.ui(
{
method: 'share',
href: 'https://developers.facebook.com/docs/'
}, function(response){})
after i run this Initialization code
FB.init({
appId : 'my-app-id',
status : true,
cookie : true,
xfbml : true,
version : 'v2.1'
});
And it works only the first time i press the button on my page. the next time I'm trying to
click the button that call the FB.ui function i get this error in the console
Uncaught SecurityError: Blocked a frame with origin "https://s-static.ak.facebook.com" from accessing a frame with origin "https://www.mywebsite.com". Protocols, domains, and ports must match.
If i run the page in incognito mode everything works fine.
I tried a number of solutions presented here on the site and I could not solve the problem
Does anyone have suggestions ?
I found out that FB.getLoginStatus function can't work good with the FB.ui function.
so i solved the problem by creating function that open share windows instead of using the FB.ui function
function facebook_share(link){
var left = (screen.width/2)-(520/2);
var top = (screen.height/2)-(430/2);
window.open("https://www.facebook.com/sharer/sharer.php?u=="+link, "_blank", "toolbar=yes, scrollbars=yes, resizable=yes, top="+top+", left="+left+", width=520, height=430");
}
Related
I have developed a Chrome Extension and it's mostly compatible to firefox web-extensions API. Just one problem:
In Chrome Extension i have popup.js and background.js. User click's a button, popup.js does chrome.sendMessage to background.js where data is received and afterwards (popup.html may be closed meanwhile) i just call in background.js:
newWin = window.open("about:blank", "Document Query", "width=800,height=500");
newWin.document.open();
newWin.document.write('<html><body><pre>' + documentJson + '</pre></body></html>');
// newWin.document.close();
so that works fine in Chrome extension but not in firefox. I read here (https://javascript.info/popup-windows) that for safety reasons firefox will only open with a "button click event". And if i move above code to popup.js, inside button-click-evenListener, it will open this way (but i dont have the data prepared yet, thats really not what i want)
So i tried everything i found but i dont get the chrome.tabs.executeScript running. Here is my code with comments:
popup.js
// working in firefox and chrome (popup.js)
const newWin = window.open("about:blank", "hello", "width=200,height=200");
newWin.document.write("Hello, world!");
// not working firefox: id's match, he enters function (newWindow) but document.write doing nothing (but no error in log)
// not working chrome: doesnt even enter "function (newWindow)""
chrome.windows.create({
type: 'popup',
url: "output.html"
}, function (newWindow) {
console.log(newWindow);
console.log(newWindow.id);
chrome.tabs.executeScript(newWindow.tabs[0].id, {
code: 'document.write("hello world");'
});
});
background.js
(created local output.html and gave several permissions in Manifest.json - tabs, activeTab, output.html, , about:blank)
// opening but executeScript not working in firefox: Unchecked lastError value: Error: The operation is insecure.
// opening but executeScript not working in chrome: Unchecked runtime.lastError: Cannot access contents of url "chrome-extension://plhphckppghaijagdmghdnjpilpdidkh/output.html". Extension manifest must request permission to access this host
chrome.tabs.create({
// type: 'popup',
url: "output.html"
}, function (newWindow) {
console.log(newWindow);
console.log(newWindow.id);
chrome.tabs.executeScript(newWindow.id, {
code: 'document.write("hello world");'
});
});
How can I get the data into the new window/popup from background.js - i can open an empty page from there, so it's only about getting executeScript() running
Thanks to #wOxxOm for pointing me to a data URI to transport the json document into the browser from background.js.
While searching for a javascript method to build a data URI i found this thread, with the suggestion to create a Blob :
https://stackoverflow.com/a/57243399/13292573
So my solution is this:
background.js
var documentJson = JSON.stringify(documents, null, 2)
let a = URL.createObjectURL(new Blob([documentJson]))
chrome.windows.create({
type: 'popup',
url: a
});
I am trying to send a ajax request to a server inside a google chrome extension. I am using angular with it too and the code is inside the controller. The request works fine generally, but when I have the the DevTools open it throws an error. This is the relevant part of the code:
$scope.sendLink = function (){
chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
var url = tabs[0].url;
var date = new Date();
var xPost = new XMLHttpRequest();
xPost.open("POST", **URL HERE*",true);
xPost.setRequestHeader("Content-type", "application/json");
xPost.send(JSON.stringify({"name":$scope.name,"url":url,"date":date}));
});
}
When I hit inspect element on the extension, and then do the request, the tabs array come back as empty. It works fine if the devTools window is closed. I can't figure out why that is the case. Any explanation would be appreciated!
You could have changed the javascript engine behavior via chrome-dev-tools. This would get activated only when the dev-tools are open.
For instance, once I found that a mate of mine had turned-off javascript using the chrome-dev-tools. His app wasn't executing when the chrome-dev-tools were open...
Here's my situation: I have a Javascript plugin that when clicked launches a popup on the third-party sites that host it. That popop then displays an IFRAME, in which I am using Facebook as a login method.
When the popup is launched, it recently started giving an error:
Unsafe JavaScript attempt to access frame with URL
http://{THIRD-PARTY-SITE-GOES-HERE} from frame with URL
https://s-static.ak.facebook.com/connect/xd_arbiter.php?version=18#channel=…%3Dtabmodule%26utm_term%3D200000%26fb_xd_fragment%23xd_sig%3Df2ade8e518%26.
The frame requesting access has a protocol of 'https', the frame being
accessed has a protocol of 'http'. Protocols must match.
The IFRAME itself is on https and used to work properly. I'm not sure why Chrome is trying to access the parent page. I have no control over the parent pages, so I can't make them https.
Here is my FB init code from within the IFRAME:
window.fbAsyncInit = function()
{
FB.init({
appId: '{myappid}',
status: true,
cookie: true,
xfbml: true,
oauth: true,
channelURL : 'https://degree3.com/channel.php'
});
FB.getLoginStatus( function(response)
{
if (resp = response.authResponse)
{
$( '#fb_button' ).attr( "onclick", "signinViaFacebook( response.authResponse.userID, response.authResponse.accessToken );" ).show();
}
});
};
(function()
{
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
Any ideas how I can fix the error?
You can't use facebook login inside an iframe it will never work. Dont even bother trying I have spent several frustrating hours trying to do the same. Even if you solve the https problem you have right now, you will then face an X-Frame Options error because of an option set in the response header by facebook which accepts only requests from same origin(that is facebook).
What I'am basically trying to say is that facebook cannot be launched in an Iframe for security reasons. Your best bet in your current predicament is to open another popup with facebook login in it. Iframe simply wouldn't work. I know it wouldn't look elegant but it is the only way to go or you redirect your popup itself to facebook and have a callback mechanism to redirect back to your plugin.
Hope it helps.
I'm calling in canvas:
FB.login(function(){}, {
scope:'publish_stream'
});
On Firefox and Chrome shows popup with permission dialog. But on IE there is error (see attach.) :
An error occurred with my_app_name. Please try again later.
My FB.init:
FB.init({
appId: <FB_APP_ID>,
status: true,
cookie: true,
xfbml: true,
oauth: true,
hideFlashCallback: function(){}
});
Earlier (before oauth) I was using code below, it was ok, but it not work wit oauth:
FB.ui({
method: 'permissions.request',
perms: 'publish_stream',
}, function(){});
edit:
Information from access token:
edit2:
If you will find a solution, write answer - if it will work, I'll give you 100 points from my reputation.
To make it work in IE, you should add channelUrl param to your FB.init with fully qualified url. For example:
FB.init({
appId: <FB_APP_ID>,
status: true,
cookie: true,
xfbml: true,
channelUrl: 'http://www.example.com/facebook-channel.html'
});
The url must point to a page that contains just only one script tag:
<script src="http://connect.facebook.net/en_US/all.js"></script>
It's important to make channelUrl an absoulte, if you just write
channelUrl: '/facebook-channel.html'
It wont work. I've got a lot of headache with it, so I hope it'll be helpfull for you or anybody who troubled with it like me before.
Try to switch _inCanvas to true and see what happens
FB._inCanvas = true;
I also had this problem in the past. You are probably opening it on a domain that is not the same as the one specified as your site domain on the application settings page.
If you have selected to use
sandbox
in developers.facebook.com/apps.
You should change it to not use.
Now you’re running on https you will need to reference all assests over https. IE will now show a load of warnings telling the user not all content is sent over the secure connection. This is probably why your popup fails. Set the SDK to load stuff over HTTPS:
FB._https = true;
FB.init({
/* your app id and stuff */
});
maybe it's because IE not setting 3rd party cookies?
try adding
header('P3P: CP=HONK');
into php file, header function has to come before anything in file is output.
I done walkaround for that. I'm opening new window with url like:
https://www.facebook.com/dialog/oauth?client_id=APPID&scope=publish_stream&redirect_uri=MYPAGE
When MYPAGE (which is in my app url) is loaded it simply closes itself.
If you will find a solution, write answer - if it will work, I'll give you 100 points from my reputation.
I created an app which publishes to the user's wall. The problem is, the first time the user accesses the page, the FB.ui doesn't show up. After one reload, it works perfectly.
by first time, I mean when the user gives permissions to the app, OR when he has already given permissions. In both scenarios, the problem occurs. Any ideas, people?
FB.init({
appId : "XXXX",
status : true,
xfbml : true,
cookie : true
});
FB.ui(
{
method: 'stream.publish',
message: 'test message'
}
);
This is a frequent problem in JS, with things like trying to calculate how far an item has moved, and it only starts counting after the first iteration.
You need to wrap your js in window.onload = function() {
}
Although this is buggy cross-browser, and may not fix issue. Have you heard of jQuery, its:
$(document).ready(function() {
}
If a very robust solution to ths problem
Comment #70 by Will Kessler at: http://bugs.developers.facebook.net/show_bug.cgi?id=12849 fixed my problem. It's a hack, but it works perfectly :) I had another bug related to this ( FB.ui does not work inside FB canvas. HELP!) , and it also was fixed using this. FB API is seriously buggy! :|