為你的網站帶上帽子—使用 helmet 保護 Express 應用

Express 基於 Node.js，是一款用於構建 Web 服務的優秀框架。它很容易上手，且得益於其中間件的概念，可以很方便地進行配置與拓展。儘管現在有各種各樣的用於創建 Web 應用的框架，但我的第一選擇始終是 Express。然而，直接使用 Express 不能完全遵循安全性的最佳實踐。因此我們需要使用類似 的模塊來改善應用的安全性。

部署

在開始之前，請確認你已經安裝好了 Node.js 以及 npm（或 yarn）。你可以在 Node.js 官網下載以及查看安裝指南。

我們將以一個新的工程為例，不過你也可以將這些功能應用於現有的工程中。

在命令行中運行以下命令創建一個新的工程：

運行以下命令安裝 Express 模塊：

在 目錄下創建一個名為 的文件，加入以下代碼：

保存文件，試運行看看它是否能正常工作。運行以下命令啟動服務：

訪問 http://localhost:3000，你應該可以看到 。

檢查 Headers

GIF

現在讓我們通過增加與刪除一些 HTTP headers 來改善應用安全性。你可以用一些工具來檢查它的 headers，例如使用 運行以下命令：

標誌可以讓其輸出 response 的 HTTP headers。如果你沒有安裝 ，也可以用你最常用瀏覽器開發者工具的 network 面板代替。

你可以看到在收到的 response 中包含的以下 HTTP headers：

一般來說，由 開頭的 header 是非標準頭部。請注意那個 的 header，它會暴露你使用的框架。對於攻擊者來說，這可以降低攻擊成本，因為他們只專註攻擊此框架的已知漏洞即可。

戴上頭盔（helmet）來看看如果我們使用會發生什麼。運行以下命令安裝：

將 中間件加入你的應用中。對 進行如下修改：

這樣就使用了 的默認配置。接下來看看它做了什麼事情。重啟服務，再次通過以下命令檢查 HTTP headers：

新的 headers 會類似於下面這樣：

首先值得慶祝的是 header 不見了。但現在又多了好些新的 header，它們是做什麼的呢？

X-DNS-Prefetch-Control

這個 header 對增加安全性並沒有太大作用。它的值為 時，將關閉瀏覽器對頁面中 URL 的 DNS 預讀取。DNS 預讀取可以提高你的網站的性能，根據 MDN 描述，它可以增加 5% 或更高的圖片載入速度。不過開啟這項功能也可能會使用戶在多次訪問同一個網頁時緩存出現問題。

譯註：緩存問題未查到資料，如果您了解這塊請留言

它的默認值是 ，如果你希望通過它提升性能，可以在調用 時傳入 開啟 DNS 預讀取。

X-Frame-Options

可以讓你控制頁面是否能在 、 或者 之類的頁框內載入。除非你的確需要通過這些方式來打開頁面，否則請通過下面的配置完全禁用它：

所有的現代瀏覽器都支持 。你也可以通過稍後將介紹的內容安全策略來控制它。

Strict-Transport-Security

它也被稱為 HSTS（嚴格安全 HTTP 傳輸），用於確保在訪問 HTTPS 網站時不出現協議降級（回到 HTTP）的情況。如果用戶一旦訪問了帶有此 header 的 HTTPS 網站，瀏覽器就會確保將來再次訪問次網站時不允許使用 HTTP 進行通信。此功能有助於防範中間人攻擊。

有時，當你使用公共 WiFi 時嘗試訪問 https://google.com 之類的門戶網頁時就能看到此功能運作。WiFi 嘗試將你重定向到他們的門戶網站去，但你曾經通過 HTTPS 訪問過 ，且它帶有 的 header，因此瀏覽器將阻止重定向。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！