Various errors when running inside of an iframe with sandbox="allow-scripts"

[Olek Nowodziński]

Due to security restrictions, some browsers (latest Chrome, Firefox 17) throw errors when the editor is being run inside of an iframe with sandbox="allow-scripts". A research is needed.

Chrome:

Sandbox access violation: Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL http://ckeditor4.t/ckeditor/samples/replacebycode.html. Both frames are sandboxed into unique origins. wysiwygarea.js:91

Firefox:

Error: Permission denied to access property 'document' wysiwygarea.js:91

• Use attached sandbox.html to reproduce.
• First report was in #9701.
• There can be more errors like this.

[Olek Nowodziński]

The following websites may contain relevant information regarding this issue:

​https://bugzilla.mozilla.org/show_bug.cgi?id=553102 ​https://blog.mozilla.org/addons/2012/08/20/exposing-objects-to-content-safely/

[Jakub Ś]

This of course (since its browser feature) can be reproduced from CKEditor 3.0 and only in Firefox and Chrome (browsers supporting this feature).

[Jakub Ś]

I'm not sure if this ticket is valid.

1. Please have a look at possible values ​http://www.w3schools.com/html5/att_iframe_sandbox.asp
2. Next look at the error - "Sandbox access violation: Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL ... "Both frames are sandboxed into unique origins".
3. Taking to above into account all you have to do for iframed editor is (Notice allow-same-origin):

   <iframe src="replacebycode.html" width="1100" height="800" sandbox="allow-scripts allow-same-origin">
   

Works in both FF and Chrome.

[Olek Nowodziński]

Confirmed, this is not a bug. This is how things work:

The sandbox attribute, when specified, enables a set of extra restrictions on any content hosted by the iframe. Its value must be an unordered set of unique space-separated tokens that are ASCII case-insensitive. The allowed values are allow-forms, allow-popups, allow-same-origin, allow-scripts, and allow-top-navigation. When the attribute is set, the content is treated as being from a unique origin, forms and scripts are disabled, links are prevented from targeting other browsing contexts, and plugins are secured.

The allow-same-origin keyword allows the content to be treated as being from the same origin instead of forcing it into a unique origin, the allow-top-navigation keyword allows the content to navigate its top-level browsing context, and the allow-forms, allow-popups and allow-scripts keywords re-enable forms, popups, and scripts respectively. (​dev.w3.org)

Inserting sandbox attribute means that everything is down (script execution, DOM navigation). By extending this attribute, however, we can re-enable individual features, one by one.

Once sandbox="allow-scripts" is used, it allows scripts inside the iframe to be executed so CKEDITOR namespace and editor instances are created. This is not enough since CKEditor often requires communication between iframe (framed editor editable) and parent window. Without allow-same-origin attribute this communication is disabled and several errors are being produced.

This issue implies that sandbox attribute affects all nested iframes as well. Use sandboxes.zip​ to play with three separate web pages (Sandbox1 > Sandbox2 > Sandbox3) and see that appending sandbox attribute to the topmost iframe also disables communication between Sandbox2 <-> Sandbox3 (Sandbox3 is like a framed editable). Moreover, adding sandbox="allow-scripts allow-same-origin" to the iframe inside Sandbox2 doesn't change anything (there's no way to override the top-level restriction).

To sum up: sandbox="allow-scripts allow-same-origin" needs to be added to the top-level iframe to have CKEditor working in such case.

Anyway, you can also play with sandbox attribute by using this nice demo: ​http://kouder.net/images/demos/sandbox/index.html