🌤️

Cloudflare WorkersとHonoでリダイレクトサービスを作る

2024/05/03に公開

Cloudflare

モチベーション

OAuthを使ってWebアプリケーションを開発する際、開発環境ではローカルホスト（localhost）をコールバックURLとして指定したいことがよくあります。しかし、一部のOAuthプロバイダ（例：TikTok）ではlocalhostをコールバックURLとして許可していません。（127.0.0.1も同様）

このような問題を解決するために、redirectToMeのようなリダイレクトサービスを利用することができます。

https://redirectmeto.com/

しかし、このような外部サービスに依存するのはセキュリティ上のリスクが考えられます。そこで、Cloudflare WorkersとHonoを使ってセルフホストしたリダイレクトサービスを無料で構築する方法を紹介します。

リダイレクトサービスの構築方法

以下の手順で、Cloudflare WorkersとHonoを用いてリダイレクトサービスを構築します。なお、wranglerとbunの動作環境が必要です。

リポジトリはこちら

以下のコマンドを実行して、Honoプロジェクトを作成します。
テンプレートはCloudflare Workersを選んでください。

bunx create-hono my-redirect-to-me

src/index.tsを以下のように編集します。

src/index.ts

import { Hono } from 'hono';

const app = new Hono();

app.get('/', (c) => {
  return c.html(`<h1>redirect to me</h1>`);
});

app.get('*', (c) => {
  const url = new URL(c.req.url);
  const redirectUrl = url.pathname.substring(1) + url.search;
  return c.redirect(redirectUrl, 302);
});

export default app;

http://localhost:8787/http://localhost:3000/callback にアクセスすると、http://localhost:3000/callback にリダイレクトされます。

無限リダイレクトを防ぐために、/にアクセスした場合は<h1>redirect to me</h1>を返すようにしています。

実装は至ってシンプルで、リクエストのパスを取得してリダイレクト先のURLとして指定しています。

例えば、 http://localhost:8787/http://localhost:3000/callback?code=1234 にアクセスすると、urlは以下のような値になります

URL {
    searchParams: URLSearchParams(1) { 'code' => '1234' },
    hash: '',
    search: '?code=1234',
    pathname: '/http://localhost:3000/callback',
    port: '8787',
    hostname: 'localhost',
    host: 'localhost:8787',
    password: '',
    username: '',
    protocol: 'http:',
    href: 'http://localhost:8787/http://localhost:3000/callback?code=1234',
    origin: 'http://localhost:8787'
  },

url.pathname.substring(1)は先頭の/を取り除いたhttp://localhost:3000/callbackを返します。

url.searchはクエリパラメータをそのまま返します。

これをc.redirectに渡すことで、リダイレクトを行います。

また、リダイレクト先のホワイトリストを設定することで、不正なリダイレクトを防ぐことができます。このように拡張性が高いこともセルフホストしたリダイレクトサービスのメリットです。

最後に以下のコマンドを実行して、Cloudflare Workersにデプロイします。

bun run deploy

以上で、リダイレクトサービスの構築は完了です。簡単！

リダイレクトサービスの使用方法

構築したリダイレクトサービスを使用するには、以下のようなURLを指定します。

<デプロイしたURL/http://localhost:3000/callback>

このURLをOAuthのコールバックURLとして指定することで、OAuthプロバイダからのコールバックをリダイレクトサービスが受け取り、http://localhost:3000/callbackにリダイレクトします。パラメータもそのまま渡されます。

おわりに

Cloudflare WorkersとHono最高！

GitHubで編集を提案

モチベーション

リダイレクトサービスの構築方法

リダイレクトサービスの使用方法

おわりに

Discussion