开发AngularJS5应用遇安全问题：缺失X-Content-Type-Options:nosniff头

架构老林

2026-5-25

解决AngularJS 5应用中X-Content-Type-Options未设置为'nosniff'的问题

这个安全漏洞确实是旧版浏览器里的典型风险——MIME嗅探可能让原本声明为脚本/文本的响应被解析成HTML或其他类型，进而引发XSS这类安全问题。下面给你几种在AngularJS 5项目中补上这个响应头的可行方案：

方案1：后端服务器全局配置（以Express为例）

如果你的应用部署在Express后端上，直接通过中间件全局添加这个头即可：

const express = require('express');
const app = express();

// 全局注入X-Content-Type-Options响应头
app.use((req, res, next) => {
  res.setHeader('X-Content-Type-Options', 'nosniff');
  next();
});

// 托管Angular打包后的静态文件
app.use(express.static('dist/your-app-folder'));

app.listen(3000, () => {
  console.log('服务已启动在3000端口');
});

方案2：开发环境通过Angular CLI代理配置

如果是开发阶段用Angular CLI的dev server调试，可以在代理配置里添加头规则：
先创建proxy.conf.json文件：

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "onProxyRes": function(proxyRes, req, res) {
      // 给代理后的响应添加目标头
      proxyRes.headers['X-Content-Type-Options'] = 'nosniff';
    }
  }
}

然后在angular.json的serve配置里指定这个代理文件：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-app:build",
    "proxyConfig": "proxy.conf.json"
  }
}

方案3：反向代理服务器配置（以Nginx为例）

如果用Nginx做反向代理部署应用，直接在server块里添加头规则：

server {
  listen 80;
  server_name your-domain.com;

  location / {
    root /path/to/your/dist;
    index index.html;
    # 强制添加X-Content-Type-Options头，always确保错误状态码下也生效
    add_header X-Content-Type-Options nosniff always;
  }
}