I have a lightning sub component within a larger component that uses TinyMCE js library locally to provide advanced editing capabilities. The component works when I disable LockerService, by setting the API version to 39.0. However, when I set the API version to 41.0 (which the rest of the component is on) and turn on LockerService, the editor comes up with the following error:

[Cannot read property 'open' of undefined] MC()@https://xxx--fullcopy.lightning.force.com/resource/1529593457000/TinyMCE/tinymce/js/tinymce/tinymce.min.js:2:312115 UC()@https://xxx--fullcopy.lightning.force.com/resource/1529593457000/TinyMCE/tinymce/js/tinymce/tinymce.min.js:2:316789 KC()@https://xxx--fullcopy.lightning.force.com/resource/1529593457000/TinyMCE/tinymce/js/tinymce/tinymce.min.js:2:318975 ...

I have the following code in my sub component controller to add the meta tag to the head, which is run on render through an aura:handler

onRender : function(compponent, event, helper) {
        var meta = document.createElement("meta");
        meta.setAttribute("http-equiv", "content-security-policy");
        meta.setAttribute("content", "default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self' data: blob:; style-src 'self' 'unsafe-inline'; font-src 'self';");

The problem is that the http-equiv attribute of the meta tag gets stripped by Salesforce upon insertion. I tested this by changing the name of the attribute to 'name', which does get added to the meta tag. The need for the http-equiv meta tag is a requirement by TinyMCE.

In my case, the parent component gets inserted into a record page for an object. The only reference I was able to find regarding adding of meta tags is in relation to community pages, which is not what I'm doing. But it gives a hint that http-equiv is only supported for certain values, and 'Content-Security-Policy' is not one of them.

The way I see this is that there really is not a problem with CSP, since the error gets thrown by the library's script, but with adding the meta tag, because the script does test to find out if the correct meta tag is present on the page when CSP is enforced. Since the meta tag is not valid, the script breaks (not elegantly I might add as it could throw a warning that the meta tag is not present).

I would really like to enable LockerService for this sub component, especially since TinyMCE does support CSP and 'use strict', so it should theoretically be possible to get it to work with LockerService, if not for the pesky meta tag requirement.

Does anyone know how to add this specific meta tag to the document? Is there an alternate method to add a custom Content-Security-Policy http-equiv meta tag for a js library in a lightning component in Salesforce?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.