X-Powered-By ヘッダーを非表示にする方法

こんにちは、フロントエンドエンジニアの辻です。
最近、HTTPの仕様を学習する機会がありました。その中でX-Powered-By ヘッダーなるモノが気になり、記事にまとめてみました。

X-Powered-By ヘッダーとは

X-Powered-By ヘッダーとは、サーバーがクライアントへ返すレスポンスヘッダーの一種です。
実は HTTP の RFC には存在しない独自規格であり、半ば慣習的に使われています。
書式に厳密な決まりはなく、概して「このレスポンスは、どんなミドルウェア・フレームワークによって返されたものか」を示します。
JavaScript 製フレームワークなら Next.js や Express などが、デフォルトで X-Powered-By ヘッダーを表示します。

以下のキャプチャは、インストールしたての Next.js プロジェクトにて npm run start コマンドを実行して localhost:3000/ にアクセスした時のレスポンスヘッダーです。
レスポンスヘッダーの最終行に X-Powered-By がありますね。

そもそも X-Powered-By ヘッダーって必要？

mdn の X-Powered-By には、以下のような解説があります。

ホスティング環境やその他のフレームワークによって設定される可能性があり、アプリケーションや訪問者に有益ではない情報を含みます。潜在的な脆弱性が発現することを防ぐために、このヘッダーは設定しないでください。

X-Powered-By | mdn

X-Powered-By ヘッダーを返しているからと言って、すぐにセキュリティ上の問題に直結するわけではありません。
「ああ。このアプリでは XXX っていうミドルウェア・フレームワークを使っているんだな。」と思われるくらいです。

しかしながら、mdn の解説文にもある通り、時と場合によっては脆弱性の発現につながる可能性はあります。
例えば、将来的に利用中のミドルウェアやフレームワークに脆弱性が発見されてしまうと「お。このアプリでは脆弱性が見つかった XXX ってフレームワークを使っているな。しめしめ…」と攻撃されるきっかけを作りかねません。

何よりユーザーにとって有益な情報ではないため、X-Powered-By ヘッダーは非表示にする方が無難です。

X-Powered-By ヘッダーを非表示にするには

今回は JavaScript 製フレームワークで人気の Next.js と Express における X-Powered-By ヘッダーの非表示方法を紹介します。
いずれも現時点の最新版での方法です。

Next.js v13

Next.js で X-Powered-By ヘッダーを非表示するには、next.config.js に poweredByHeader: false を追記するだけです。
設定方法は公式サイトにも記載されています。（poweredByHeader | nextjs）

/** @type {import('next').NextConfig} */
const nextConfig = {
  poweredByHeader: false // 追記
};

module.exports = nextConfig;

Express v4

Express では 2 種類の方法があります。

1 つ目は app.disable() を使う方法で、1 番簡単です。
Express では app.disable() の引数に、設定項目の文字列を入れると該当する機能を OFF にできます。
app.disable("x-powered-by") と記述すれば X-Powered-By ヘッダーを非表示にできます。

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

app.disable("x-powered-by"); // X-Powered-By ヘッダーを非表示にする

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.listen("3000", () => {
  console.log("Server is running on port 3000");
});

2 つ目は helmet を利用する方法です。
helmet を Express に導入すると、レスポンスヘッダーに関するセキュリティ上の設定をよしなにやってくれます。
Use helmet にあるように、helmet の利用は Express 公式で推奨されています。

helmet を利用するには、npm install --save helmet コマンドでインストールした後で、Express のコードを以下のように編集します。
これだけで X-Powered-By ヘッダー を非表示にできます。

const helmet = require("helmet"); // helmet を読み込む
const express = require("express");
const app = express();

app.use(helmet()); // app.use() で helmet を適用

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.listen("3000", () => {
  console.log("Server is running on port 3000");
});

おわりに

X-Powered-By ヘッダーを返すからといって、すぐに問題が発生する事はありません。
が、やはり非表示にした方が無難です。

今回紹介したフレームワーク以外でも X-Powered-By ヘッダーを返すモノは存在します。
気になる方は、ご利用中のミドルウェアやフレームワークのレスポンスヘッダーを確認してみてはいかがでしょうか。