I'm using knockoutjs in my google chrome app. To be able to use knockout, I have to define the real application.html as sandox page and include it as an iframe in a dummy container. Application structure is as follows:

- container.html
|
+-- application.html as iframe 
   |
   +-knockout and application.js

Iframe is defined as follows:

  <iframe src="application.html" frameborder="0"  
            sandbox="allow-same-origin allow-scripts" ></iframe>

Running

document.getElementsByTagName("iframe")[0]

in inspect tool on container.html throws following error.

Sandbox access violation: Blocked a frame at "chrome-extension://hllbklabnppjkmnngfanldbllljfeaia" 
from accessing a frame at "chrome-extension://hllbklabnppjkmnngfanldbllljfeaia".  
The frame being accessed is sandboxed and lacks the "allow-same-origin" flag.

How can i access the iframed document from it's parent?

I'm using knockoutjs in my google chrome app. To be able to use knockout, I have to define the real application.html as sandox page and include it as an iframe in a dummy container. Application structure is as follows:

- container.html
|
+-- application.html as iframe 
   |
   +-knockout and application.js

Iframe is defined as follows:

  <iframe src="application.html" frameborder="0"  
            sandbox="allow-same-origin allow-scripts" ></iframe>

Running

document.getElementsByTagName("iframe")[0]

in inspect tool on container.html throws following error.

Sandbox access violation: Blocked a frame at "chrome-extension://hllbklabnppjkmnngfanldbllljfeaia" 
from accessing a frame at "chrome-extension://hllbklabnppjkmnngfanldbllljfeaia".  
The frame being accessed is sandboxed and lacks the "allow-same-origin" flag.

How can i access the iframed document from it's parent?

• javascript
• google-chrome
• iframe
• sandbox
• google-chrome-app

2 Answers 2

Do something like this:

manifest.json

  "sandbox": {
    "pages": ["my_ui.html"]
  }

my_ui.html

  <script type="text/javascript" src="knockout-1.2.3.4.js"></script>
  <script type="text/javascript" src="my_ui.js"></script>

my_ui.js

this.onSomethingChange = function() {
  window.top.postMessage(
    { mand: 'please-do-something', myArgument: this.myArgument() }, '*');
};

container.html

  <script type="text/javascript" src="container.js"></script>
  <iframe id="knockoutFrame" src="my_ui.html"></iframe>

container.js

  window.addEventListener('message', function(event) {
    var kocw = document.getElementById('knockoutFrame').contentWindow;
    var anotherContentWindow = // etc.
    var dest;

    if (event.source == kocw) {
      // The knockout iframe sent us a message. So we'll forward it to our
      // app code.
      dest = anotherContentWindow;
    }
    if (event.source == anotherContentWindow) {
      // Our app code is responding to the knockout message (or initiating
      // a conversation with that iframe). Forward it to the knockout code.
      dest = kocw;
    }
    if (dest == null) {
      console.log('huh?');
    }

    // This makes container.js like a gatekeeper, bouncing valid messages between
    // the sandboxed page and the other page in your app. You should do
    // better validation here, making sure the mand is real, the source
    // is as expected for the kind of mand, etc.
    dest.postMessage(event.data, '*');
  }

Your statement "I have to define the real application.html as sandbox page and include it as an iframe in a dummy container" is probably not what you wanted. The idea is to sandbox the smallest possible thing, message out to the gatekeeper page that validates the messages, and have the gatekeeper forward the narrow messages to your un-sandboxed application logic. If you just stuff everything into the sandbox, you're defeating the purpose of the sandbox.

Disclaimer: I haven't carefully examined this code from a security perspective. You'll want to assume that hostile messages are ing from the sandbox (or from elsewhere, for that matter), and do what you can to address that threat.

Found out the culprit. This is my proxy.js, which is included by the container.html, used as a bridge to transfer the messages between the application iframe and the background.js. Following part is the one that listens for the messages originated from the iframe.

window.addEventListener("message",
    function(evt){
        console.log(evt); <= this is the problem
        var iframe = document.getElementById("application").contentWindow; <= not this one
        if (evt.source == iframe) {
            return chrome.runtime.sendMessage(null, evt.data);
        }
    }
);

I didn't think that console.log would be the causing the problem. Instead i was suspecting from the document.getElem.. line. Because trying to run that code in inspect window of the application was throwing the same error.

But it seems that console.log (console seems to belong to container.html's scope) accesses some internals of event object that are not meant to be accessible out of the iframe's scope(which explains why i get the same error in inspect console). Removing the console.log line solved this problem for me.