【最佳实践】如何修改 Express 服务响应头？-Toy模板网

这篇具有很好参考价值的文章主要介绍了【最佳实践】如何修改 Express 服务响应头？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

📘 欢迎关注博主的掘金：暮星的主页

背景

最近在尝试修复工作项目中 Express 服务的 WebInspect 扫描报告指出的漏洞，其中有涉及到需要修改服务响应头的部分。以前没怎么研究过 Express，正好借此机会实践一下。

📣 版本
node : 14.17.6
express : 4.17.1

关于 WebInspect

Micro Focus Fortify WebInspect 是 Micro Focus 公司旗下的一款企业级 Web 应用程序安全分析产品。

如今，很多代码管理制度完善的公司都把 WebInspect Scan 作为常规化 Security Scan 的其中一环，甚至集成到 CI/CD 流程中。

通常使用它的方式就是把要扫描的 Web url 或者 API url（基于所选择的扫描类型）提供给 WebInspect 客户端，根据引导进行一些设置后开始扫描。

【最佳实践】如何修改 Express 服务响应头？
扫描过程中 WebInspect 会根据应用程序的行为和环境，多次从多角度进行定制访问攻击，找出可能存在的安全漏洞，并将它们归为 Critical、High、Medium、Low 等几个风险等级，最终生成 Scan Report，其中会提供漏洞说明、解决方案、预防未来等内容。

报告分析

从扫描报告来看，目前应用有以下几个 vulnerability：

Cached SSL Content
Browser Mime Sniffing is not disabled
Missing HTTP Strict-Transport-Security Header
Inadequate Cross Site Scripting Header Protection

报告指出这些漏洞都与响应头有关，要么是某个字段的值有风险，要么是缺少了某个字段。
于是我在本地把项目 run 起来，随便找了个响应的资源查看响应头。

【最佳实践】如何修改 Express 服务响应头？
结果确实和报告的描述一致，而按照报告的修复建议，我需要对所有请求的响应头做如下更改：

    // 修改字段
    Cache-Control: no-store           // fix --> Cached SSL Content
    
    // 添加字段
    X-Content-Type-Options: nosniff   // fix --> Browser Mime Sniffing is not disabled
    X-XSS-Protection: 1; mode=block   // fix --> Inadequate Cross Site Scripting Header Protection
    Strict-Transport-Security: 3600   // fix --> Missing HTTP Strict-Transport-Security Header

具体为什么添加某个字段，可以修复某个漏洞，本文不做深究。
如感兴趣，可根据列出的漏洞名目，自行搜索。

修复

首先看看现有的服务架构：

    // ... other code ...
    const express = require('express');
    const app = express();
    
    const port = xxx;
    const targetDir = xxx;
    
    app.use(express.static(targetDir));
    app.listen(port, async function() { xxx });
    // ... other code ...

嗯…很经典的静态资源服务器写法，服务所有要访问的静态资源都放到了 targetDir 下，app.listen 开启一个端口来监听所有的 HTTP 请求，然后用 app.use 将所有来自 '/' 及其子路径下的请求先交给 Express 内置的提供静态资源服务的中间件 express.static 处理，让其提供 targetDir 下的对应文件。

于是，我们主要有两种方法在此基础上修改所有请求的响应头：

在路由之前放置一个中间件，统一修改请求的响应头

    // ... other code ...
    const express = require('express');
    const app = express();
    
    const port = xxx;
    const targetDir = xxx;
    
    app.use((req, res, next) => {
        res.set('X-Content-Type-Options', 'nosniff');
        res.set('Cache-Control', 'no-store');
        res.set('X-XSS-Protection', '1; mode=block');
        res.set('Strict-Transport-Security', '3600');
        next();
    });
    
    app.use(express.static(targetDir));
    app.listen(port, async function() { xxx });
    // ... other code ...

偶然看到 express.static 有额外的参数 setHeaders，可以在提供静态资源的时候，为其设置响应头，点此了解详情

    // ... other code ...
    const express = require('express');
    const app = express();
    
    const port = xxx;
    const targetDir = xxx;
    
    let options = {
        setHeaders: (res, path, stat) => {
            res.set('X-Content-Type-Options', 'nosniff');
            res.set('Cache-Control', 'no-store');
            res.set('X-XSS-Protection', '1; mode=block');
            res.set('Strict-Transport-Security', '3600');
        }
    };
    
    app.use(express.static(targetDir, options));
    app.listen(port, async function() { xxx });
    // ... other code ...