[WEB]對於"Refused to execute script from 'http://xx.xx.xx/yy/zz.js' because its MIME type ('') is not executable, and strict MIME type checking is enabled."問題的解決辦法

1 文由

階段一：對WEB服務器HTTP通信的header設置了安全頭(X-Content-Options:nosniff)

兩個月前協助交付側大哥處理、修復一個三級等保項目的第三方安全公司釋出的安全漏洞，其中有1個低危漏洞(如下圖示)涉及到對HTTP的header設置安全頭(X-Frame-Options / X-XSS-Protection / X-Content-Options)。

[漏洞報告]
遠程網絡應用程序未設置X-Content-Options響應頭。
X-Content-Options是Microsoft提出的一種緩解MIME類型攻擊的方式，並且已經在Chrome和Safari中實現。
HTTP相應頭X-Content-Options：nosniff

[解決思路]
按照風險報告上的建議在nginx返回頭中增加了：X-Content-Type-Options：nosniff

針對這一漏洞的對應header的安全頭的配置，在Tomcat服務器和Nginx服務器上如何實現，已在博主兩個月前的這篇博文可見：

• [網絡/Java EE/Web]Tomcat/Nginx中配置全局的安全響應頭(header)——X-Frame-Options / X-XSS-Protection / X-Content-Options - 博客園/千千寰宇

[/usr/local/nginx/conf/nginx.conf]
http {
    ...
    add_header X-Frame-Options "SAMEORIGIN"; #或 add_header X-Frame-Options SAMEORIGIN;
    add_header X-XSS-Protection "1; mode=block"; 
    add_header X-Content-Type-Options "nosniff";
    ...
}

階段二：web服務報錯"Refused to execute script from 'http://xx.xx.xx/yy/zz.js' because its MIME type ('') is not executable, and strict MIME type checking is enabled."

萬萬沒想到的是，今天交付側大哥跟我說這項目中某個web服務用不了了，這個web服務通過js的ajax請求發出的動態式加載的靜態文件加載不出來了。經過一番排查，發現瀏覽器報了這個錯：

2 原因分析

那么，是什么原因導致的捏？(你 dong 滴)
咱們先翻譯翻譯下面這段報錯信息:

Refused to execute script from 'http://xx.xx.xx/yy/zz.js' because its MIME type ('') is not executable, and strict MIME type checking is enabled.
javascript請求的內容返回的MIME類型為''，不是可執行的文件，目前已啟用了嚴格的MIME類型檢查。（故而，該文件加載失敗）

好啦，這下其實咱們也能猜出個三七二十一了。

nginx WEB服務器配置了(X-Content-Type-Options: nosniff)，其禁用了通信終端對WEB服務器端所支持的MIME(Multipurpose Internet Mail Extensions,多用途互聯網郵件擴展類型)的嗅探。
同時，也導致了自動識別MIME類型被關閉了，無法自動識別文件類型。

進而導致：前端使用ajax動態加載js/css文件到html網頁中時，header返回的content-type為''類型，與文件類型本身(application/javascript； text/css)不匹配，被禁止加載。

3 解決方案

方案1: 取消 X-Content-Options:nosniff 配置

• 【nginx】

• 【Tomcat】

<filter>
    <filter-name>httpHeaderSecurity</filter-name>
    <filter-class>org.apache.catalina.filters.HttpHeaderSecurityFilter</filter-class>
    <async-supported>true</async-supported>           
    <init-param>
        <param-name>blockContentTypeSniffingEnabled</param-name> //配置行1
        <param-value>false</param-value> //配置行2
    </init-param>
</filter>

方案2：給HTTP通信中的html/js/css等文件的響應頭header中主動添加文件類型

[Java]
HTTPServletResponse.setContentType(String mimetype); //"text/html;charset=UTF-8"
HTTPServletResponse.addHeader(String name;String value); //"content-type", "text/javascript; charset=uft-8"
HTTPServletResponse.response.setHeader(String name;String value); //"content-type", "text/javascript; charset=uft-8"

[PHP]
header("content-type:text/javascript; charset=uft-8");

X 推進與參考文獻

• 對於“Refused to execute script from ” because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.”問題的解決辦法 - luoxiao123
• 對於錯誤“Refused to execute script from '...' because its MIME type ('') is not executable, and strict MIME type checking is enabled.”的處理 - 博客園
• because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. - 博客園