Kaze Notes | Cloudflareのミドルウェアを使ってBasic認証をかける方法

Cloudflareのミドルウェアを使ってBasic認証をかける方法をまとめました。

Cloudflareのミドルウェアで何ができるのか

基本的にはAstroのミドルウェアと同じような機能があります。

認証
キャッシュ制御
リダイレクト
ヘッダーやクッキーの操作

ミドルウェアの基本的な使用方法

Cloudflareのミドルフェアは、プロジェクト内の/functions/_middleware.jsまたは/functions/_middleware.tsを作成して記述します。
デプロイ時にCloudflare側で自動で/functions/_middleware.jsを処理してくれます。

1
export async function onRequest(context) {
2
  try {
3
    return await context.next();
4
  } catch (err) {
5
    return new Response(`${err.message}\n${err.stack}`, { status: 500 });
6
  }
7
}

_middleware.jsを使ってBasic認証をかけてみる

/functions/_middleware.jsを作成して、以下のように記述します。

1
export async function onRequest(context) {
2
  /* 認証ヘッダーを取得 */
3
  const authHeader = context.request.headers.get("Authorization");
4

5
  /* 認証ヘッダーがない場合は401を返す */
6
  if (!authHeader || !authHeader.startsWith("Basic ")) {
7
    return unauthorized();
8
  }
9

10
  /* Base64デコード */
11
  const base64Credentials = authHeader.slice("Basic ".length);
12

13
  let credentials;
14
  /* Base64デコードに失敗した場合は401を返す */
15
  try {
16
    credentials = atob(base64Credentials);
17
  } catch {
18
    return unauthorized();
19
  }
20

21
  /* ユーザー名とパスワードを分割 */
22
  const index = credentials.indexOf(":");
23

24
  /* ユーザー名とパスワードを分割に失敗した場合は401を返す */
25
  if (index === -1) {
26
    return unauthorized();
27
  }
28

29
  /* ユーザー名とパスワードを分割 */
30
  const id = credentials.substring(0, index);
31
  const password = credentials.substring(index + 1);
32

33
  /* 期待するユーザー名とパスワードを取得 */
34
  const expectedUser = context.env.BASIC_AUTH_ID;
35
  const expectedPassword = context.env.BASIC_AUTH_PASSWORD;
36

37
  /* ユーザー名とパスワードが一致しない場合は401を返す */
38
  if (
39
    !id ||
40
    !password ||
41
    id !== expectedUser ||
42
    password !== expectedPassword
43
  ) {
44
    return unauthorized();
45
  }
46

47
  return context.next();
48
}
49

50
function unauthorized() {
51
  return new Response("認証が必要です", {
52
    status: 401,
53
    headers: {
54
      "WWW-Authenticate": 'Basic realm="Secure Area"',
55
    },
56
  });
57
}

Cloudflareのダッシュボードから、環境変数を設定します。

1
BASIC_AUTH_ID=your_id
2
BASIC_AUTH_PASSWORD=your_password

実際にアクセスをすると、Basic認証のダイアログが表示され、認証が成功するとページが表示されます。
確認できれば設定完了です。

Basic認証の動作を詳しく見てみる

onRequest
ヘッダーの取得
ヘッダーのデコード
ユーザー名とパスワードの検証
認証が成功した場合は次のミドルウェアまたはレンダリング処理に渡す
認証が失敗した場合は401を返す

onRequest

onRequestはCloudflare上で実行される関数で、リクエストされた時に実行される関数です。
以下のように扱うことができます。

1
export async function onRequest(context) {
2
  return await context.next();
3
}

contextはリクエストの情報を含むオブジェクトで、nextは次のミドルウェアまたはレンダリング処理に渡すための関数です。

onRequest以外にもonRequestGetやonRequestPostなどがあり、それぞれエクスポートする必要があり、GETリクエストに対してはonRequestGetが実行されるため、リクエストに応じて使い分ける必要があります。
Basic認証の場合は、リクエストの種類に関係なく実行を行う必要があるため、onRequestを使用します。

ヘッダーの取得

context.request.headersでリクエストのヘッダーを取得することができます。

1
/* 認証ヘッダーを取得 */
2
const authHeader = context.request.headers.get("Authorization");

onRequestの第一引数であるcontextには、リクエストの情報を含むオブジェクトが渡されます。
contextにrequestオブジェクトがあり、リクエストに含まれるheaderを取得することができます。

Request

ヘッダーのデコード

ヘッダーに載せられたBasic認証のユーザー名とパスワードは、Base64エンコードされています。
Base64 エンコーディングでエンコードされたデータの文字列をデコードするのがatobメソッドです。
また、今回はatobを使用しましたが、Uint8Arrayを使用してデコードする方法もあるようです。

1
/* Base64デコード */
2
const base64Credentials = authHeader.slice("Basic ".length);
3

4
let credentials;
5
/* Base64デコードに失敗した場合は401を返す */
6
try {
7
  credentials = atob(base64Credentials);
8
} catch {
9
  return unauthorized();
10
}

Memo

Base64とは、文字列をバイト列として表現するためのエンコード方式です。
Basic認証では、HTTPの通信規約により、ユーザー名とパスワードをBase64エンコードして符号化し、リクエストを送信するという決まりになっています。

Basic 認証方式

Memo

AstroのミドルウェアでBasic認証をかけた際には、Buffer.fromメソッドを使用して、Base64エンコードされた文字列をデコードしました。
Astroの場合はNode.js環境になるため、atobが非推奨になっているため、Buffer.fromを使用しました。

CloudflareではJavaScriptが標準で使用できるため、atobを使用することができますが、Node.js環境ではないため、Buffer.fromを使用することができません。

Web Standards

ユーザー名とパスワードの検証

ユーザー名とパスワードを分割するために、indexOfメソッドを使用します。デコードした文字列には:が含まれているため、indexOfメソッドで:の位置を取得し、substringメソッドでユーザー名とパスワードを分割することができます。ユーザー名とパスワードをcontext.envから取得して、一致しているかを検証します。

1
const index = credentials.indexOf(":");
2

3
/* ユーザー名とパスワードを分割に失敗した場合は401を返す */
4
if (index === -1) {
5
  return unauthorized();
6
}
7

8
/* ユーザー名とパスワードを分割 */
9
const id = credentials.substring(0, index);
10
const password = credentials.substring(index + 1);
11

12
/* 期待するユーザー名とパスワードを取得 */
13
const expectedUser = context.env.BASIC_AUTH_ID;
14
const expectedPassword = context.env.BASIC_AUTH_PASSWORD;
15

16
/* ユーザー名とパスワードが一致しない場合は401を返す */
17
if (!id || !password || id !== expectedUser || password !== expectedPassword) {
18
  return unauthorized();
19
}

認証が成功した場合は次のミドルウェアまたはレンダリング処理に渡す

認証が成功した場合は、次のミドルウェアまたはレンダリング処理に渡すために、context.next()を実行します。

1
return context.next();

Types EventContext

認証が失敗した場合は401を返す

認証が失敗した場合は、Responseオブジェクトを返して、401ステータスコードを返します。

1
return new Response("認証が必要です", {
2
  status: 401,
3
  headers: {
4
    "WWW-Authenticate": 'Basic realm="Secure Area"',
5
  },
6
});

Request