So I am going to be brutally honest about my motive. I am using one of the many video streaming sites out there...it has great quality content, however it has tons of popups and it doesn't work when my ad-blocker is on.
I have been trying to disable the ads when I load the page, but I am unable to set values of the attributes inside of the iframes.
I can select the iframe itself using:
window.frames[x]
However once I try and do anything example
window.frames[1].getElementByClassName('classname').length
I get an error in the console log that says
Uncaught DOMException: Blocked a frame with origin
"http://url.com" from accessing a cross-origin frame.
Any suggestions on how I can circumvent this? I have seen similar posts, but most people are trying to interact with the iframe they are using on their own sites, I want to use a chrome extension to inject the js onload for the site I am accessing.
I imagine the reason I cannot do this has to do with security restrictions, but I figured it was worth a shot asking.
The only way to do this is to setup your own local proxy server and use that to inject your JavaScript into their page.
Related
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.
I'm trying to load an external website on a page and interact with the content, for example add event listeners (for the content of the external site loaded). This won't work on an iframe as I can't interact with the content, I tried to do it using react, and when I want to add event listeners to the iframe I get the following js error Uncaught DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.
I thought it was just not possible but then I saw this video from a tool that seems to do that: https://youtu.be/qinZviJajcw?t=21
Does anyone have an idea on have this could be accomplished?
thanks!
By the looks of it, you do not have Cross-Origin Requests (CORS) setup. For ASP.NET, check the following:
https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.1#setting-up-cors
Specifically, you will need to modify the Startup.cs file to enable CORS.
If you are not using ASP.NET, then I recommend that you Google CORS for whatever web back-end you are using.
I'm trying to develop an extension similar to that of Pinterest's PinIt extension for google chrome. In general, i know that loading any URL in an iframe which is not from the same origin would result in giving an error "Refused to display 'https://www.someWebsite.com/' in a frame because it set 'X-Frame-Options' to 'DENY'."
However, i do see that Pinterest is loading a URL on any website when using their extension. For Example, i was using the extension on instagram.com (i've used it on other sites as well) and then i took a screenshot of what i could not understand. (Please refer to selected area in DOM)
Can anyone tell me how this can be achieved or probably how pinterest is doing this?
X-Frame-Options dictate which frames can embed the page, not which pages can be embedded in it.
So if, say, https://www.someWebsite.com/ disallows to be embedded, X-Frame-Options doesn't prevent embedding https://www.someOtherWebsite.com/ inside it (if the other website allows it).
However, child-src or frame-src Content Security Policy directive can prevent embedding another page.
In theory, both mechanisms can be be overridden by webRequest API. However:
PinIt doesn't use it, so logically it should fail on some sites.
http://content-security-policy.com/ is an example where it simply fails.
There may be additional countermeasures if you decide to circumvent response headers.
It's a cat and mouse game if some resource is unwilling to be embedded or allow embeds.
By changing CSP headers, you are weakening security considerably for your users.
I finally figured out how to deal with this. I still do not know how exactly pinterest is doing it but i'm sure i'm close to it.
I simply load an iframe in the body of the parent by injecting my own JS to the page.
Then i iterate through all the images available on the page like
$('img).each(function(){
// do my stuff to see if i need this image
// push them in an array (say, var imgArray)
})
var imgToString = imgArray.toString();
var myIframe = document.getElementById('iframe_id').contentWindow;
myIframe..postMessage(imgToString , '*');
And then in the iFrame that i load, i recieve the message and use the images...
So the gist of the whole issue is that postMessage() is my saviour.
What I want to do is open an iframe, pointing to another website, and then submit a form on that website.
This is obviously cross-origin, so Chrome (and I assume other browsers) doesn't allow me to do stuff to the contents of the iframe, once it's loaded.
So I've tried doing it in a Chrome extension. I'm getting a similar error:
Uncaught SecurityError: Blocked a frame with origin "chrome-extension://amnacjaocbabmgfjcbmgbhikfedaanmo" from accessing a frame with origin "http://www.example.com". The frame requesting access has a protocol of "chrome-extension", the frame being accessed has a protocol of "http". Protocols must match.
Any suggestions on how to make this work? I can post more details on my current method, if necessary. But, I'm open to other suggestions (e.g. opening a new tab and doing the work in there, etc.). Anyone know of something that will work without getting some kind of security error?
EDIT: So far the best solution I've come up with is using a background script to open a new tab, and use content scripts to manipulate its content. It would be really nice if I could just load the page into an iframe, and then send content scripts just to that iframe, but I haven't figured out how to do that.
In the page header of your embedded page, include the following header:
X-Frame-Options: ALLOW-FROM www.example.com
This bypasses at least Chrome and Firefox. Your mileage may vary on IE.
I'm loading a webpage inside iframe of a background page in chrome extension. I need to fetch the content (i.e. DOM) of iframe. I'm getting protocol error. how to overcome this situation, any workaround.
"Unsafe JavaScript attempt to access frame with URL https://swym.3ds.com/ from frame with URL chrome-extension://ohhaffjbbhlfbbpcdcajbkeippadmipk/back.html. The frame requesting access has a protocol of 'chrome-extension', the frame being accessed has a protocol of 'https'. Protocols must match."
I'm trying to implement a desktop notification for the above site, hiding the process from user eye.
I tried using XMLHTTPRequest and Jquery GET, unfortunately my site loading is unstandard, it doesn't work as intended.
Any suggestion on this topic will be very helpful.
It seems you're facing Cross-origin resource sharing issues. Do a quick check for resources loaded with protocols, convert http://www.example.com resources to //www.example.com Also refer MDN CORS Article
Javascript cannot access content on another domain as it poses security risks. If you have control over the domains, you may use postMessage to overcome this. Take a look at this link