Firefox. Allow access to IFrame elements via javascript

Question

I'm writing a tool for finding css selectors on outer web page. It's plain html page that contains iframe with target site and few control elements. All logic is also in javascript using jquery, so no server-side for now.

The problem I faced is that a can't add handlers/classes to iframe document elements using Firefox 26.0 . Sample code:

 iframe.contents().find("*").hover(function() {
     console.log("This is " + $(this).get(0).tagName + "element");
 }

I get next error message in console: Error: Permission denied to access property 'document'. I understand that it's a security feature indeed, but I just need to workaround it somehow.

What I've tried:

• Using Google Chrome - it allows to run browser with special flag (--disable-web-security) that turns off such security features. It helped and my tool is working just as I expected, but I need to use exactly Firefox.
• Using addon https://addons.mozilla.org/en-US/firefox/addon/forcecors/ . It didn't helped at all. I also tried to add x-frames-origin header by that tool, but no result.
• Turning off security.fileuri.strict_origin_policy flag in firefox configuration. Also didn't help.

Maybe I missed something and there is some other workaround/better solution? I'll appreciate any help.

Update: page and iframe are NOT on the same site. My tool is just local .html file, iframe source - any site(wikipedia, yahoo etc.)

Answer 1

Finally I found the solution. I used an addon GreaseMonkey. It allowed me to insert my js code into iframe, so I am able to interact with code one my page using message API. Examples:

• Preventing from running code in parent window: if (window.top == window.self) return;
• Recieving something from main window: window.addEventListener('message', yourHandlerHere, false);
• Posting something to main window: window.parent.postMessage(yourDataHere);