CKEditor 4.21 is breaking iframes

Question

We are using the latest version of the CKEditor module (4.21.0-jahia8-5) which is using the more recent version 4.21 of CKEditor. This version is automatically adding the attribute sandox="" to every iframe used in the editor.

This is breaking most of the iframes we are using. How can we fix this issue?

Answer

From CKEditor documentation, starting from CKEditor v4.21, iframe elements are sandboxed to secure web pages without proper Content Security Policy configuration.

For defining sites or pages with Content Security Policy, we recommend looking at the Content Security Policy module on how to enable them. The actual policy to include will depend on the iframe content and there is no one size fits all, so we also recommend reading through its documentation and common use case examples for implementation. 

As a workaround, users can override the ckeditor setting iframe_attributes either through default global configuration or through an existing template set with a CKEditor configuration already defined. Note that it can only be applied globally if you do not already have a specific configuration for CKEditor defined elsewhere. Defining a default global CKEditor configuration also requires installation of the latest CKEditor module 4.21.0-jahia8-6. As an alternative, customers can also go back to the previous module version of our CKEditor module.

To define CKEditor configuration, go to Jahia support tools > Miscellaneous tools > CKEditor configuration (or through an existing CKEditor config) and add the following code:

config.iframe_attributes = {
    sandbox: 'allow-scripts allow-same-origin'
}

Then click on “Create and deploy configuration”. You may need to restart your server afterwards.

As added security, you can also use a function-based configuration to allow trusted iframe elements only. For example:

config.iframe_attributes = function(iframe) {
    var myTrustedSrc = 'https://www.youtube.com'
    if (myTrustedSrc.indexOf(iframe.attributes.src) !== -1) {
        return {sandbox: "allow-scripts allow-same-origin"}
    }

    return {sandbox: ""};
}