[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. - 博客园