I'm trying to create an Iframe overlay for a PDF document. The document is in the same domain in folder 'static', I can render he in an iframe, but I am not able to get the HTML structure inside, when I try to access, the cross-origin problem fires.
Uncaught (in promise) DOMException: Permission denied to access
property "document" on cross-origin object
The selected area is a div I am trying to get
Line 28 is where the error fires
I found this bug/issue in Bugzilla (Bugzilla error 911444). At this moment I'm trying to make this solution only for Firefox, because the other browsers render the PDF in Iframe differently.
In all sites I read about problems with cross-origin, everything is about to access a document who is outside my domain, but in this case he is same domain.
This is some bug or some misunderstanding of mine?
As you don’t have a code example here I’m guessing your loading the pdf directly into the iframe. When you do this the content of the iframe is not a html page so can not be accessed via JavaScript.
The solution is going to be to create a small html page that uses pdf.js to render the pdf. You will then be able to access the iframe.
Related
I am able to get a 3rd party iframe component working on the site.
But, I get a security Exception (not same domain) when I am trying to access its source code. Is there a way or workaround to get the source code of the iframe component?
document.getElementById("iframe_id").contentWindow.document.documentElement.outerHTML
Question first:
Is it possible to get iframe contents when it's displaying a browser error document (page not found, connection lost, certificate problem...)?
Problem explained:
I've built a simple form with an iframe inside. This iframe has a simple file upload form that works great in every test I have done. BUT the form is meant to be used inside a company's network and some users are reporting random problems when sending the iframe upload form from inside the network. I suspect that they are receaving lost connections because of internal network malfunctions and the iframe gets blank after sending (because the size is too small to display the error document and scrollbars are disabled).
As I'm not able to reproduce the errors I need to debug the process with Javascript, logging what is loaded inside the iframe after an error occurs to a user.
Actually I use jQuery to retrieve iframe's content:
$("#iframeid").contents().find("body").html();
Works great when retrieving a regular html document but not when trying to retrieve a browser error document. In this case I get the error:
Permission denied to access property "document"
Why is this happening? Because of same origin policy? Is there any way to override this?
Why is this happening? Because of same origin policy?
Yes.
Is there any way to override this?
No.
The browser does not allow you to read the contents of an internal document, like a 404 page. You will want to configure your webserver or fastcgi to return a soft 404 page which would allow you to view the contents of the iframe.
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.
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 designing some "add-on" to certain websites, which should be embedded in them as an iframe. Inside this iframe there is a clickable button aimed at changing the iframe's position within the parent website.
Since things are done in coordination with the parent website, I am able to add some code there as well. However it seems I am not able to do neither of the following (one of them should suffice):
From the iframe, access data within the parent.document, in order to move the iframe to the desired position.
From the parent website, access data within the iframe, in order to check when the button is clicked.
Both typically produce an error: "Blocked a frame with origin XXX from accessing a frame with origin YYY. Protocols, domains, and ports must match".
Any advice (preferably with code sample) is appreciated.
After doing lots of searching around, I came across this:
http://www.codeproject.com/Tips/585663/Communication-with-Cross-Domain-IFrame-A-Cross-Bro
I actually tested the method (using my own short piece of code) and it seemed to work on Chrome, Firefox and IE. Now I'm gonna try the "real" implementation...
From what I understand based on the information you've provided in your question, cross domain scripting is not possible. What you would need to do is provide a script that the parent-level website can paste into their template/html and run from their domain, similar to how Google does with their analytics system.
As an alternative, try turning your iframe content instead, into a div loaded with the response from a service call made from the parent domain to the iframe domain. You would most likely need to create an API that a requesting site can use. Simply call that URI with whatever parameters you would use when referencing the page you wanted to load in the iframe, and have the script that you run on the parent website handle all the DOM alterations you want to achieve.