I am working on creating an iframe that will have both html and JS code in it. The code going into the blob will be something like:
'''
<script src="{% static 'js/bootstrap.min.js' %}" > </script>
<script src="https://<domain>/controller/api_browser_retrieve_script/"></script>
<html>
<body>
stuff in the html...
'''
The second script src that is pointed to 'https://../api_browser_retrieve_script/' then pulls in a file of JS code from an application - and I want this script to then be available in the iframe for use in the html, as inline JS is getting dumped by my CSP policies.
This template of code from above is then put into a variable called iframecode and made into a blob called blobContent:
const blobContent = new Blob([iframecode], {type: "text/html"});
var iFrameM = document.createElement("iframe");
iFrameM.src = URL.createObjectURL(blobContent);
window.frames[0].document.body.appendChild(iFrameM);
However, when iFrameM is appended to the main page, the blob will start to load in the iframe, and then the browser will see the script tags and then fail to load the rest due to a Mimetype error. I can set the mimetype to 'application/javascript', but then the html no longer works. Is there a way to get the blob to load into the iframe and have the iframe still load the JS code and run properly?