Preview iframes blocked in Chrome 33

[geekdave]

Using Chrome Canary (version 33.0.1703.0) on the styledocco sample page:
http://jacobrask.github.io/styledocco/styledocco/examples/styledocco/docs.html

Getting this error, and the preview iframes are not getting appended to the DOM.

Uncaught SecurityError: Blocked a frame with origin "http://jacobrask.github.io" from accessing a frame with origin "null". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "data". Protocols must match.

Screenshot:

I also notice a similar issue happening with my own styleguides, using Firefox 25, but for some reason the styledocco example works in Firefox...

[marrs]

Are you serving the file or are you accessing it through the file:// directive? Can you also tell me what the src attribute of the iframe is?

[geekdave]

I'm serving these files via a web server. The src attr is http://localhost:8082/styleguide/buttons.html#__preview__

I found I can get this to work in Chrome Canary by commenting out a line in docs.previews.js:

//  if (this.contentDocument) support.sameOriginDataUri = true;

But here's the interesting part... it's not the fact that we're setting support.sameOriginDataUri = true; that's breaking things. If I change the if block to use braces like so, and comment out that line...

  if (this.contentDocument) {
//      support.sameOriginDataUri = true;
  }

...things are still broken. But if I comment out the check: if (this.contentDocument) like so...

//  if (this.contentDocument) {
//      support.sameOriginDataUri = true;
//  }

...then it works! (In Chrome 33, but still not in Firefox).

[marrs]

What happens if you console.log(this) just before that if statement? It should be an HtmlIframeElement DOM node and it should contain the contentDocument property.

And What error is the if(this.contentDocument) line throwing to the console?

[geekdave]

Modified code:

  var support = { sameOriginDataUri: false };
  console.log("*** ABout to see this!")
  console.log(this)
  if (this.contentDocument) support.sameOriginDataUri = true;

Chrome 30 (where the preview iframes render correctly):

Chrome 33 (where the preview iframes do not render correctly):

And What error is the if(this.contentDocument) line throwing to the console?

Looks like both versions of Chrome are complaining about a security violation, though the error is slightly different. See above.

[marrs]

I'm seeing the issue now as well on the demo site. It's the iframes that are generated at runtime that are doing it. The html is generated by the app rather than coming from an external resource, so they're described as data:text/html, but that conflicts with the http protocol of the containing frame.

I'm going to have to find some time to investigate this. We either need to find another way to generate these iframes on the front-end or start serving them from the back-end.

Please let me know if you find any solutions to this yourself.

[marrs]

#91 is related