In our web app/site, I need to use an iframe or a popup window to validate if the current token is valid and refresh it if no.
So, I create an iframe, and set the property 'src' to the validation link such as "https://<domain_name>/auth?client_id=xxx" which is different to our app domain https://<app_domain>. and the return value will like "https://<domain_name>/code=yyyy"
document.createElement('iframe');
and I added the message handle for the web app/site, like
window.addEventListener("message", this.messageHandler);
in the messageHandler, I will check if the message is from a specified website, and then validate the "code" value, blabla, etc.
But when running in Chrome, I always got the error
"Blocked autofocusing on a element in a cross-origin subframe."
what confused me is:
it always failed when running in the Chrome browser, but it can work fine in Firefox and Edge chromium.
I tried to set iframe.sandbox = "allow-forms allow-scripts allow-same-origin", the problem still existed.
If the validating token failed in iframe or timeout, I will create a popup window to continue validating and refresh the token. But every time, using popup window can always succeed. If it is really a cross-origin issue, why using iframe failed but using popup window succeeded.
I didn't use window.postmessage. because I don't know how to pass the return value of iframe/popup-window to the main page.
I used CORS extension of Chrome or using parameter --disable-web-security when launching Chrome. the problem still existed.
when I created the iframe or popup window. it is very simple, I just set the iframe.src property, there is no element being created.
any help will be much appreciated.
p.s.
I refer to the following doc:
Blocked autofocusing on a form control in a cross-origin subframe
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Support for iframes in web development will only get worse over time as they are a security black hole, browsers are gradually over time locking out features and use of them.
I am assuming you are doing this because you are validating a user on a third party service, validating by watching the response of a third party service website?
Without knowing the service you are using I cannot comment specifically but for anyone looking to do something similar I would highly suggest not doing this:
As mentioned, iframes are constantly having features locked down due to security concerns
An attacker could change the source of the iframe and submit their own iframe to look like it has been correctly validated
It's unlikely that the page you are using as your iframe src is intended for this use, which will come back and bite you when the 3rd party developer changes how their page behaves, which they likely will do without knowing it's going to break your application
I recommend:
Finding a stable API the 3rd party service offers and using that
Finding another service if none exist
Apologies to rain on your parade!
I disagree that iframes are a security risk, rather they can be if not implemented properly.
How to implement them properly should be asked in another question and probably starting with a carefully implemented Content Security Policy as a priority.
I also use iframes within a Chrome extension that has to pass rigorous Google security.
As for the question, I've noticed that error too and I am focusing on an input box when the iframe is loaded and the focus works! I put it down to being a Chrome bug as the warning suggests it has stopped auto focusing when it hasn't.
As for the un-related point about passing the value back to the parent holding the iframe, I can help you with that, but you should ask it in a new question.
Disable some feature of browser setting
Browser Changes
chrome://flags/#cookies-without-same-site-must-be-secure
chrome://flags/#same-site-by-default-cookies
chrome://flags/#enable-removing-all-third-party-cookies
Above URL just paste it and disabled it. Then ok and relaunch the browser.
Then done it.
Related
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.
I've been working on a requirement that involves a website fetching/manipulating data stored on a different domain. There didn't seem a way except for enabling CORS on the other server to allow me to get and modify data from a different domain. However, that caused some issues with Office 365 apps and I had to take a different approach.
The approach is to use postMessage to talk to a hidden iframe (not a good approach, but I was insisted to use it) on the page that is running on the target domain. The source page posts message along with information about the REST call to the hidden iframe which makes a requests on behalf of the parent page and uses postMessage to return back the results.
Everything works fine except for when the website is being used on an iPhone. Turned out placing alert calls in the script running inside the target iframe makes it to work but removing the alert calls sort of disables the target iframe from making those cross-origin network calls.
My theory is that it is due to the security of mobile Safari that in order to make cross-origin calls from an iframe running on a different domain, the user needs to provide their consent by interacting at least once with the embedded iframe. Does that sound correct?
The comment by diodeus-james-macfarlane is the closest that we could go but the iframe being hidden, there was no way we could have placed a control for the user to interact with, even if that was only for it to work.
To my surprise, turning off a setting on the SharePoint site made it work. The setting was around mobile view compatibility and without that, the iframe is able to make HTTP requests, send and receive messages to and from the parent webpage.
I have a situation where I have an iframe hosting a third-party site. I need to pick up only that the iframe has navigated to its final "success" url, so I can respond.
However, as you may know, modern browsers prevent you from accessing the iframe document object, even the location, because of CORS security issues.
Right now, I am running a counter in the onload event of the iframe, and performing my response when the counter hits a certain number.
But this is very hacky and won't be reliable enough for a new situation where I am having to use this mechanism.
So I'm looking for some wizard to tell me a better way. I just need to know when it's reached a certain URL.
BTW jquery is not an option; this is an Angular2 app.
Thanks!
frood
If you control both parent and embedded websites (And don't have to support very old browsers) I would consider using the postMessage API. It enables simple event communication between the parent and the child.
Here is a nice simple example - link
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.
In our silverlight application we set the location hash property of the browser window to bookmark the current control and query parameters being requested. This is done through javascript via Silverlight like so:
var hashCode = "Example.ControlNamespace.ClassName?clientID=62189";
HtmlPage.Window.Eval(string.Format("window.location.hash='{0}'", hashCode));
This works well enough, but we get intermittent errors from production where this is failing with a stack track that ends at that line..
System.InvalidOperationException: Eval failed.
at System.Windows.Browser.HtmlWindow.Eval(String code)
This only happens occasionally, but I would like to know what is causing it. I've been able to replicate it once myself using IE8, so I don't think there are any obscure browsers causing this. It seems that it is sometimes invalid to set the hash, but I don't know why. Also if it matters its hosted on a secure connection, https.
Thanks in advance.
Edit: I was able to replicate it again. When debugging the javascript the error was 'permission denied'. This seems to only happen on the first load of the page, so maybe the page isn't finished loading and the url hash is not allowed to be changed until it is complete?
This may be associated with this particular issue here:
Suppress navigation when setting HtmlPage.Window.CurrentBookmark property in Silverlight.
The behavior I've seen is that when you set the hash in IE after a redirect, the page refreshes (rather than giving you an "permission denied"), but perhaps there are other scenarios when you're not allowed to do so, e.g., if you're running under HTTPS.
If it does turn out that this is the problem, the only real workaround I've seen is to detect if you're in that scenario (i.e., you've reached this page after a redirect, and you're running in IE), and refresh the page (using JavaScript) before you load your Silverlight application.