MIME类型与外部JS文件冲突动态创建html元素答案

【问题标题】：MIME type conflict with external JS File dynamically creating html elementsMIME类型与外部JS文件冲突动态创建html元素
【发布时间】：2021-11-05 03:39:58
【问题描述】：

我尝试使用外部 JS 文件动态创建 html 元素。但是 Firefox 告诉我存在一些 MIME 类型冲突。我使用 type=("text/javascript") 因为它是一个 JS 文件。我尝试了从“text/html”到“application/javascript”的各种不同类型但没有任何效果。

提前致谢！

我的html文件：

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vortrags Wizard</title>
    <script type="text/javascript"src="./sectionCreator.js" ></script>
</head>

<body>
    <div class=container>
        <div class="header"> <h1>Vortrags Wizard!</h1></div>
        
            <div id= "areaID" class="questionArea"></div>

            <div class="commitArea"></div>

            <div class="footer"></div>
            </div>

   </div>
</body>


</html> 

My JS file:

function createSection(className,content){
    
    var section = document.createElement("section");

    section.classList.add(className);

    section.innerHTML = content;
    
    return section;
}

window.onload = function(){
    var area = document.getElementById("areaID");
    area.appendChild(createSection("testClass","testContent"));
}```

Error Message:(German)
>Die Ressource von "http://127.0.0.1:5501/sectionCreator.js" wurde wegen eines MIME-Typ-Konfliktes ("text/html") blockiert (X-Content-Type-Options: nosniff).

My Translation:
The Ressource was blocked due to an MIME-Type-Conflict ("text/html")

【问题讨论】：

server 表示 URL 指向 HTML 文档。 type 属性只是告诉浏览器会发生什么，与错误无关。
这可能是 this question 的另一个副本，但您没有包含 minimal reproducible example

标签： javascript html mime-types

【解决方案1】：

如果您使用的是服务器，请检查“./sectionCreator.js”上的第一个“点”是否可能将请求发送到错误的路由或目录，并确保响应具有标头“Content-Type” : text/javascript' 仅当通过应用程序代码动态加载 js 文件时。

【讨论】：

以.js 结尾的URL 是带有HTML 内容类型的JS 真的很少见。通常问题在于它实际上是 HTML 文档，所以仅仅告诉浏览器它是 JS 并没有帮助。
当 MIME 嗅探被禁用时，浏览器停止尝试猜测 MIME 类型，而是依赖于“Content-Type”响应标头。就是因为MIME sniffing vulnerability，攻击者可以利用它来执行Cross Site Scripting attacks
这与问题有什么关系？错误消息说 Content-Type 是 text/html 这可能是因为资源是 HTML。您建议关闭 nosniff 并使该站点容易受到您链接到的 MIME 嗅探漏洞的攻击不会将该 HTML 文档转换为 JS。
如果资源是 HTML，错误会这样说： Uncaught SyntaxError: Unexpected token '
只有在尝试将 HTML 作为 JS 执行时才会这样做。它不尝试将 HTML 作为 JS 执行，因为 Content-Type 是 text/html，所以它说 由于 MIME 类型不匹配而阻塞了资源（X-Content-Type-Options: nosniff ) 代替。