iframe加载含HTML和JS的Blob资源出现Mimetype错误如何解决

核心问题根源 #

你遇到的报错首先是HTML结构不合法导致的：你的代码模板里把<script>标签放在了<html>根标签的外部，浏览器解析Blob类型的text/html内容时无法识别这种异常结构，才会抛出MIME类型相关错误，和Blob的type配置无关。

修正步骤 #

1. 调整iframe HTML模板的结构，保证所有标签都在<html>的合法子节点范围内：

<html>
<head>
    <script src="{% static 'js/bootstrap.min.js' %}"></script> 
    <script src="https://<domain>/controller/api_browser_retrieve_script/"></script>
</head>
<body>
    stuff in the html...
</body>
</html>

2. 修正iframe的挂载逻辑，原代码中window.frames[0]在iframe还没挂载到主DOM时是不存在的，直接把创建的iframe元素挂载到你需要放置的页面节点即可：

// 注意iframecode要使用上面修正后的合法HTML模板
const blobContent = new Blob([iframecode], {type: "text/html"});
const iFrameM = document.createElement("iframe");
// 可选：给iframe设置宽高、边框等样式
iFrameM.style.width = "100%";
iFrameM.style.height = "500px";
iFrameM.style.border = "none";
iFrameM.src = URL.createObjectURL(blobContent);
// 直接挂载到主页面的对应容器，比如body或者指定的div节点
document.body.appendChild(iFrameM);
// 如果需要在iframe加载完成后做操作，可以监听load事件
iFrameM.addEventListener('load', () => {
    console.log('iframe加载完成，内部脚本已可调用');
});

3. CSP规则适配：

• 主页面的CSP配置中需要添加child-src blob:规则，允许加载Blob类型的iframe
• 添加script-src https://<domain>规则，允许拉取你指定域名下的JS脚本，因为你没有使用内联JS，不需要额外配置unsafe-inline规则，符合你的CSP要求。

验证效果 #

修正后Blob的type保持text/html即可，浏览器会正常解析HTML结构，依次加载两个外部脚本，不会触发MIME错误，也不会被CSP拦截非内联的外部脚本。

内容的提问来源于stack exchange，提问作者Eric Tork