Workaround to prevent Facebook "Like" cross-domain error? - javascript

I've been working on this particular error for a week now, debugging different social buttons and narrowing it down to Facebook in general: every "Like" button I've implemented (HTML5, xfbml, etc.) triggers the same cross-domain scripting error. Basically, Facebook is triggering this error with every iFrame (like below) upon clicking "like":
Unsafe JavaScript attempt to access frame with URL http://mediacdn.disqus.com/1326940420/build/system/def.html#xdm_e=http%3A%2F%2Fwww.vancitybuzz.com&xdm_c=default4311&xdm_p=1& from frame with URL http://www.facebook.com/plugins/like.php?channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df31a0247d%26origin%3Dhttp%253A%252F%252Fwww.vancitybuzz.com%252Ff3c0eb7e0c%26relation%3Dparent.parent%26transport%3Dpostmessage&extended_social_context=false&href=http%3A%2F%2Fwww.vancitybuzz.com%2F2012%2F01%2Fchinese-new-year-events-2012-vancouver-richmond-burnaby%2F&layout=box_count&locale=en_US&node_type=link&sdk=joey&send=false&show_faces=false&width=90. Domains, protocols and ports must match.
Why this isn't a duplicate: the issue occurs even in the absence of the twitter button and google+ button. it also occurs in every implementation of the "like" button. the symptoms point to a new issue.
Methods attempted: I've tried multiple "versions" of the Like button all with the same issue. It's even conflicting with DISQUS.
Suspects: Pages that do not have any DISQUS code are functioning normally. This variable (output by DISQUS wordpress plugin) is suspect:
var facebookXdReceiverPath = 'http://www.vancitybuzz.com/wp-content/plugins/disqus-comment-system/xd_receiver.htm';
In addition, javascript output by Facebook is also suspect.
See it yourself: Go to http://www.vancitybuzz.com/2012/01/research-in-motion-ceos-resign/ it's likely to change, though.
The Question
Given the information here, does anyone know of a workaround to force out the cross-domain error? Many thanks.

After multiple people have looked into this, including myself, currently there is no workaround for cross-domain errors because Facebook uses iFrames for communication.
This would also apply to the Google Plus button as it stands today.
However, the future looks bright. Google devs (and likely Facebook, too) have confirmed they are working on a new solution.
In the meantime, some people have reported that using Facebook and other widget plugins seem to alleviate the problem in Wordpress-structured sites. No guarantees.
http://mashable.com/2010/05/07/wordpress-facebook-like-buttons/
The Future: I wouldn't be surprised if websockets (and flash ws fallbacks) are used, but I'll leave that to the platform devs

Related

Google Chrome blocked redirect with window.top.location in iframe

I want to redirect my website from iframe to main url, here is my code:
window.setTimeout(function() {
window.top.location = jQuery("link[rel=canonical]").attr("href") + "#ref=shahrekhabar";
return false;
}, 100);
It works on Firefox but Google Chrome blocked this type of redirecttion.
I try with window.top.location.href and window.top.location.replace and window.top.location.assign but no luck.
The reason:
Some spam sites shows my site in iframe and I want to escape from them and I think redirection is good solution.
Edit to answer the TRUE question:
A common issue with stack overflow is that users will often ask how to do something they think solves the problem they are encountering, rather than just asking us how to solve the problem. We always appreciate hearing how you've gone about trying to solve your problem, but it's always best if we know that and what the root problem is. So in your case, given your comment on my answer, the question should have been:
Currently my website is being shown in iframes on sites that I have no control over? I'd like to prevent them from doing this, how can I do so? I'm currently trying to redirect my website from iframe to main url, but it won't work on Chrome. ... Rest of question ...
Given this question, my original answer is useless as:
You still can't and shouldn't be able to alter the URL of the parent window.
You don't own the sites showing your page in the iframe, which means you can't register a listener to handle the postMessage or CustomEvent.
Funny enough, what you're trying to do is the exact reason why chrome doesn't let you do it hahaha. But don't worry there is still a solution.
Introducing CORS!
CORS or Cross Origin Resource Sharing is the name for when a site on one domain accesses resources that aren't on the same domain. Doesn't matter who owns either site, if the two domains are different it's CORS. Now this is good for you because there are such things as CORS policies where you can prevent anyone from even accessing a resource on your domain if they make a CORS request. Keep in mind this will mean you can't display your site within an iframe on another one of your sites unless they're on the same domain, but it sounds like it may be worth it for you.
In case you're curious, unlike what you're trying to do, using CORS policy is very much standard procedure for developers that don't wish for their sites to appear in iframes and is in fact used by famous sites such as facebook, google, and even good ole stackoverflow (I would know, I tried to make a way to view multiple questions at the same time via iframes a while back). I've included an example below that shows this all to be true, alongside an example of a site that doesn't care (editpad.org). In order to implement this on your site check out this link.
<iframe src="https://www.editpad.org/"> </iframe>
<iframe src="https://www.google.com/"> </iframe>
<iframe src="https://www.facebook.com/"> </iframe>
<iframe src="https://stackoverflow.com/posts/53917955"> </iframe>
The old answer:
So you're trying to change the location of the parent window from an iframe? This sounds extremely dangerous and the fact that Firefox doesn't block it worries me. Good job Chrome!
Why wouldn't you want this?
I can think of a few reasons you wouldn't want this, but the biggest is that it's just poor programming. A page should work completely independent of whether or not it is inside an iframe, and even if the page should only be viewed in an iframe it still shouldn't be interacting with the parent window in such a direct way.
Possible issues that could arise if this were allowed on all platforms:
Include an iframe in your ads and as soon as your ad is displayed, redirect the user to your site or worse, redirect them to a mirror of the current site that you're hosting to collect passwords / personal information.
If you can mess with the windows location (arguably the most important and static thing about a web page being viewed) why can't you mess with anything? Can you go into the parent window and adjust the DOM or do a query selection for inputs of type password in order to copy the values? Or what about attaching event listeners to the parent window silently such that you can log any and all key presses.
How can you work around it?
Don't worry too much about the issues I brought up above, as they can all be avoided by following proper standards. In fact, the JavaScript devs envisioned this exact problem which is why you can post messages across windows. Look into this link and go from there, feel free to comment if you have any questions but it should be as simple as posting a message, detecting it on the parent window, and then changing the location as you wish.
If you need to send data from the iframe to the parent window, or your iframe isn't hosted on the same domain, you can instead use CustomEvents (which I prefer even when my iframe is on the same domain) which allow you to attach a data object.
As for why either of these two solutions is better than directly manipulating the parent window, it's all due to the parent window needing to register a listener for the message / custom event. If your page is not inside an iframe it'll simply post a message to itself which it won't be listening for. If your page is inside an iframe on the page it should be on, your parent page should already have registered the proper listeners. And there is no chance for malicious use of these features because again, I have to register a listener and I choose what is done with the event once it's caught.

Why can Chrome execute javascript on other pages but I can't?

Apologies if this is a roundabout way of asking this question, but I am a little confused about how the web and javascript work.
What I want to do: execute javascript on all pages of a list of urls I have found. (Specifically use jquery to pull info from them)
Problem I can't execute Javascript on these pages because they aren't mine and don't have the Access-Control-Allow-Origin header. So I can't load them (with AJAX) in order to use JQuery on them.
BUT Google Chrome can both load pages and execute javascript on them (with their developer's console). So if I wanted too, I could go to each page, open the developers console, and pull the information from there. If there's nothing stopping Chrome from accessing these, then why am I stopped? And, is there a way around this?
Thank you, and I hope my description makes sense. I've been researching this for a while but have found nothing that explains how seemingly inconsistent CORS is.
I could go to each page, open the developers console, and pull the information from there. If there's nothing stopping Chrome from accessing these, then why am I stopped?
You're not stopped. You, the human at the keyboard, can do exactly as you say, by visiting each page as a top-level page.
What is stopped -- happily -- is any and all scripts on the Web you happen to run having the same level of visibility that you do. Based on your cookies and your network topology, you have a unique view into the Web. You can see your home router's control interface (on 192.168.1.1 or similar). You can see any local web server you're running on 127.0.0.1. No one else can see these. If the same-origin policy were not in place, then any script that you loaded on the Web could inspect these.
And, is there a way around this?
If you have some scripts that you trust absolutely (hopefully a significant subset of "all scripts that exist on the Web") that you want to be able to bypass the same-origin policy and see your full, cross-domain view of the Web, you could load them as an extension, which can act with elevated permissions beyond the abilities of normal web pages. (See How does Same Origin Policy apply to browser extensions?)
I'm going to assume that you are looking to grab data from these pages that aren't yours and store it somewhere. I have done this before with curl using php. If you are looking to display these sites for users to interact in a different way, but starting from a page that is yours, you may be able to render these pages by grabbing the source html using curl and rendering it as a sort of proxy.
I've used this tutorial for something similar https://www.youtube.com/watch?v=_kQN-3aNCeI . Hopefully this gives you a start. I think you should be a little more detailed in your question though to get more help.

Blocked a frame with origin "http://video.sasads.com" from accessing a frame

while developing a website today I noticed something odd on the console. This is the second time I see this error message. I googled the website sasads.com and came up without any info. Website apparently is xml in nature and seems to be very suspicious.
The console error code is Blocked a frame with origin "http://video.sasads.com" from accessing a frame with origin "http://". Protocols, domains, and ports must match.
The website is php/jquery and utilizes the latest jquery distribution. I searched for sasads.com in the js folders but could not locate such string. the jquery that was blocked stated it was running in 1.7 so it must be loading it offsite somewhere.
browser used is chrome, server running latest php and mysql environment. I wasnt able to recreate the error, guess there is some kind of trigger or timer that is hidden.
Question, should I be worried that one of the potential script has some sort of trojan or malware attached to it?
Based on my experimenting, I believe this is caused by the "Edit This Cookie" extension.
Also: The reviews for the extension have similar complaints about ads.
I just very unexpectedly had my Chrome browser switch from my ebay window to a new full-page advertisement; in researching more about what happened, I found this stack overflow question through my google search regarding the website that it jumped to. I'm leaving the following information for others who may be searching for issues with "sasads.com", "adverstitial.com", "openadserve", or "adlegend.com" -- they all seem to be culprits in the hijacking of my web browser (and should be banned, blocked, blacklisted, and otherwise removed from the 'Interwebs').
In response to the Original Poster's error, I believe that the browser you were using tried to do the same exact jump to an "adverstitial.com" page. This page then has a script that loads content from "sasads.com", and you were seeing an error in how it loads.
I was able to capture the javascript from the site, and yes - it has a timer on it after which it tries to go back to the site you were originally on. Thus, you wouldn't have been able to see it. I have much more information about this and captured the javascript that was run. I haven't figured out where it was triggered yet. I only have one Chrome extension (Session Manager). I hope this helps someone.
I had this exact same error in Chrome. In my case, it started after installing the PageRank Status extension.

HTML 5 / Site config causing FB block

I created a new website using a newly registered domain.
When trying to share it as a link in Facebook, it is classed as "spammy" and I'm unable to share it.
After a few weeks of research and reporting to FB I copied the site entirely and placed on a new TLD.
This has instantly become blocked on facebook which made me think there's something within the structure of the site which is causing it to be marked as spam.
Using object debugger on the original URL has given a number of various responses such as:
"Error parsing input URL, no data was scraped"
Response code 206
Response code 203
I read that using chrome can bug it out so I used firefox and safari to check.
Does anyone have any idea why the response codes vary for a static site?
Are there any specific site setups which are currently causing FB to block?
I have read that certain .htaccess configs, such as www>non-www can upset FB, is this true?
The sites in question are:
Link 1 (this was intended to be the only domain)
Link 2 (this was setup only when original domain was blocked)
These domain are new, never been used for spamming or mail.
I have checked all the blacklists I could possibly search and have not found anything that indicates problems.
It really does seem that there is something in the configuration of the site that is causing it to be blocked. Does anyone have any idea or experience in this??
I was able to scrape the page correctly using the Debug Lint tool:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.sophie-mcelligott.com%2F
Maybe facebook block newly registered domains for a fixed time before letting you share it on Facebook, presumably to stop spammers. Are you able to scrape both sites correctly?

Wordpress Simple facebook connect - Javascript errors

I am using Simple Facebook Connect for Worpress.
However I am getting some javascript errors.
View Image Full Size
www.connect.facebook.com/widgets/fan.php?api_key=xxxx&channel_url=http%3A%2F%2Fjquery.webspirited.com%2F%3Fxd_receiver%3D1&id=189373481094312&name=&width=285&connections=10&stream=0&logobar=1&css=
GET (same url as above) undefined (undefined) Unsafe
JavaScript attempt to access frame with URL http://jquery.webspirited.com/ from frame with URL
http://www.facebook.com/extern/login_status.php?api_key=xxxx&extern=2&channel=http%3A%2F%2Fjquery.webspirited.com%2F%3Fxd_receiver%3D1&locale=en_US.
Domains, protocols and ports must
match.
How can I fix these errors?
Short answer: You can't. This error happens in Safari and sometimes Chrome. The webkit based browsers have a somewhat tighter security model for cross domain same-origin policies. The way Facebook Connect works is that it tries one method to make things work, then if that fails, it falls back to another approach.
The fall back means that the code still works, but the error comes up because they try that method first.
This is how Facebook's code works. You can't fix it. You can't work around it. If you're going to use Facebook's code, then you learn to live with it.
last time, when i got an error like this, i forgot to set up the url in my facebook-application.
http://www.facebook.com/developers/ > Application settings > Web Site > Site URL, Site Domain
The api-key is alway linked with your url. The url of the website, where u implement the iframe must have the same URL like this.
You might like my Simple Facebook Comments For Wordpress wordpress plugin I recently released. It makes the whole process of adding facebook connect comments to your wordpress site super easy and fast.
http://www.davidswordpressplugins.com/simple-facebook-comments-for-wordpress/

Categories

Resources