Preview iframes blocked in Chrome 33 #100

Closed
geekdave opened this Issue Nov 8, 2013 · 6 comments

Comments

Projects
None yet
2 participants
@geekdave

geekdave commented Nov 8, 2013

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:

docco

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

This comment has been minimized.

Show comment
Hide comment
@marrs

marrs Nov 8, 2013

Collaborator

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?

Collaborator

marrs commented Nov 8, 2013

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

This comment has been minimized.

Show comment
Hide comment
@geekdave

geekdave Nov 8, 2013

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).

geekdave commented Nov 8, 2013

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

This comment has been minimized.

Show comment
Hide comment
@marrs

marrs Nov 11, 2013

Collaborator

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?

Collaborator

marrs commented Nov 11, 2013

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

This comment has been minimized.

Show comment
Hide comment
@geekdave

geekdave Nov 11, 2013

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):

chrome30

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

chrome33

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.

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):

chrome30

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

chrome33

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

This comment has been minimized.

Show comment
Hide comment
@marrs

marrs Nov 12, 2013

Collaborator

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.

Collaborator

marrs commented Nov 12, 2013

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

This comment has been minimized.

Show comment
Hide comment
@marrs

marrs Nov 17, 2013

Collaborator

#91 is related

Collaborator

marrs commented Nov 17, 2013

#91 is related

@marrs marrs closed this in 80d575c Nov 27, 2013

marrs added a commit that referenced this issue Nov 27, 2013

Correctly render iframes. Closes #100.
Code for detecting if browser enforced same origin policy for iframes
using different src protocols was not working correctly and an exception
was being thrown. This meant that some browsers were not able to
generate iframes for the examples.

marrs added a commit that referenced this issue Nov 27, 2013

Correctly render iframes. Closes #100.
Code for detecting if browser enforced same origin policy for iframes
using different src protocols was not working correctly and an exception
was being thrown. This meant that some browsers were not able to
generate iframes for the examples.

marrs added a commit that referenced this issue Nov 27, 2013

Correctly render iframes. Closes #100.
Code for detecting if browser enforced same origin policy for iframes
using different src protocols was not working correctly and an exception
was being thrown. This meant that some browsers were not able to
generate iframes for the examples.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment