Getting access to iframe contents with jquery after inspecting it with the browser

Question

A curious thing happened today testing a website I am developing: I was attempting to get access to elements inside an iframe with jquery, and to my surprise I was able to access them and modify them. The surprise is because the iframe is not on the same domain, thus I was not supposed to be able to do that for "same origin policy" (or I'm I wrong?).

Thing is, it could only be done after "inspecting" any iframe's element with the browser (chrome in this case). If later I "inspect" any element of the site not inside the iframe, then I lose that "superpower" and get the expected result, i.e. jquery not allowed to access due to "same origin policy".

The questions: 1.- Is that supposed to happen? 2.- Is there a way to prevent it if it could imply security risks? 3.- If this is suppose to happen and is safe, how can I jquery "simulate" the browser "inspecting" so that I can get access to iframes elements and modify them

Answer 1

When you inspect an iframe (tested on Chrome), it automatically sets the context of the console to be that of the iframe. So you can then run any javascript directly on the contents of the iframe. But it would not be able to access it from the parent-level (where the iframe was instantiated), as such actions could be seen as a security flaw.

Here's an example when you try to access on the parent context (in this case the parent is jsfiddle's iframe as yo ucan see in the top left):

And then when I switch the context to the iframe I was trying to access:

Hope this summarizes the answer and can help anyone else that might have a similar question.