Develop Reference

Cross-origin problem with PDF documents in same domain

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.

How pinterest managed to load an iframe on any website when their extension is clicked?

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.

Cross-domain JavaScript iFrame-parent access blocked

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.

Show content from other website and track the URL

On my JSF page I am trying to show some other website in an iframe and show its URL. I understand now that for security reasons I can only access the URL of the iframe if it is showing some site of my domain. So, I've found that problem a lot of times in the internet, but I couldn't find any solution. I don't want to read the content of the iframe, but only the URL.
Is there any solution for this requirement? Using an alternative to iframes? Frameset, browser in browser? Popup?

If you want to stick to the iframe option, I would test to see if the innerhtml of the iframe matches that of the website they are meant to reach. The innerhtml in webkit does seem to change as the user browses.
The only alternative I can think of is http proxying the web sites, changing the links to refer to your proxy, then telling them they win when the requested proxy URL matches that of the destination.

Cross-domain if 2 scripts from same domain?

I have a JS file that puts an iframe on every site its on.
both the JS and the iframe location comes from the same domain, mine.
Can I somehow communicate from within the iframe to the outside script,
which isn't running on my domain, but is called from it?
I know about JSONP but i'm looking for a better way if possible

It's very simple. The location of the document needs to be served from the same domain as the location of the script. Otherwise, the script will get "Access Denied" error.

If you are supplying a script for other people to use, then you could have them load easyXDM which would allow your script to communicate with the document loaded in the iframe (if it also has the easyXDM library set up).
You would also have to require them to host a simple html file on their domain in case easyXDM cannot use postMessage and has to resort to using the hash/fragment solution.
Demos of this can be viewed here