I cannot set attribute "embedded" in a script in aura

Question

I need to utilize this client's script in a component, and I'm facing an issue with the embedded tag. I'm not using ltng:require, because I need to set it in a specific div in order for it to be "embedded" and I'm truly not sure how to implement that using ltng:require.

I'm using after renderer for this, so I can get the div and add the script to it after it has been rendered. It works good, but for some reason it ignores the tag completely and renders without it.

This is the code inside the afterRender I'm using:

var si=document.createElement("script");
si.setAttribute("embedded", true);
si.src="url";
si.id="client-script";
si.setAttribute("client-token", "xxxxxxxxxxxxxxx");

let container = document.getElementById("myCustomContainer");

container.appendChild(si);

But once it renders in the dev tools it looks like this:

<script data-locker-src="url" id="client-script" 
client-token="xxxxxxxxxxxxxxx" type=""></script>

I've tried setting embedded tag like so:

si.embedded = true;
si.embedded = "true";
si.setAttribute("embedded", "");
si.setAttribute("embedded", "true");
si.setAttribute("embedded");

Does anyone know of a way to get this to render?

Answer 1

It's simply not possible. This is a security risk that could compromise the entire app. You'll need to either modify the library to not use the embedded form, use a Visualforce page or lightning:container, or use an alternative library. Embedded scripts are simply not compatible with the Lightning security design.