Cloudflareのキャッシュが原因で、webhookでDiscordに転送する"パブリック"投稿に問題が発生 / Cloudflare Caching Issue with Webhook Forwarding of "Public" Posts to Discord

[Lefioty]

💡 Summary

[日本語]

皆様、こんにちは：

最近、MisskeyのノートをDiscordに転送する設定をテストしましたが、webhookを設定してから、パブリック投稿のURLが最初にJSON形式で表示され、3〜4分後に再読み込みまたは更新すると、ようやくMisskeyのUIが表示されるようになりました。（Home、Follower、Directの3種類の投稿URLは最初から正常に表示されます）

現在は、Cloudflareの「全体キャッシュ」設定を一時的に無効にすることで、UIが正常に表示されています。
この問題を根本的に解決する方法はありますでしょうか？

ご助言を感謝いたします。🙏

---

[English]

Hello everyone:

Recently, I tested setting up my Misskey Notes to be forwarded to Discord, but since setting up the webhook, the URLs of public posts initially appear in JSON format, and only after 3-4 minutes of refreshing or reloading do they display the Misskey UI. (Only Home, Follower, and Direct post URLs display normally from the start)

Currently, I've temporarily disabled Cloudflare's "cache everything" setting to restore normal UI display.
How can I fundamentally solve this issue?
Grateful for your advice. 🙏

🥰 Expected Behavior

Webhookを有効にした後、新しいタブで新しく投稿されたURLに直接アクセスすると、正常に表示されるはずです。

After enabling the webhook, accessing a newly posted URL in a new tab should display normally.

🤬 Actual Behavior

Webhookを有効にした後、新しいタブでパブリック投稿のURLに直接アクセスすると、正常なUIではなくJSONコードが表示されます（Home、Follower、Directの3種類の投稿URLは正常に表示されます）

After enabling the webhook, accessing a new public post URL in a new tab will display JSON code instead of the normal Misskey UI (Home, Follower, Direct post URLs display normally)

📝 Steps to Reproduce

[日本語]

1. Cloudflareの基本キャッシュ設定：

• host/api/* を除外（ホスト名、URIパス）
• ホスト全体をキャッシュ（ホスト名、SSL/HTTPS）

2. webhookを設定する ... (注記は最下部に)
3. パブリック投稿を送信
4. タイムラインで新規投稿の右上の投稿時間をマウスの中央ボタンでクリックし、新しいタブで投稿のURLを開くと、正確なMisskey UIではなく、JSONに変換されたページが表示されます6. 3〜4分後にURLを更新すると、JSONに変換された投稿が通常のUIに変わります

Cloudflareの「ホスト全体キャッシュ」設定を無効にすると、完全に正常に表示されます。上記の問題がなく、webhook設定も保持できます。

---

[English]

1. Cloudflare basic cache settings:

• Exclude host/api/* (Hostname, URI Path)
• Cache entire host (Hostname, SSL/HTTPS)

2. Setting up webhook ... (Notes at the bottom)
3. Send public post
4. In the timeline, middle-click the post time in the top right of a new post to open its URL in a new tab, which will show a JSON-converted page instead of the correct Misskey UI
5. After 3-4 minutes, refreshing the URL will change the JSON-converted post to a normal UI

Disabling Cloudflare's "entire host cache" setting allows completely normal display. There are no above issues, and the webhook setting can be retained.

---

webhookを設定する

セットアップ手順

a. Discordウェブフックの作成

• Discordでウェブフックを作成し、そのURLをコピーします。

b. 中間プロキシの設定

• Cloudflareワーカーまたは類似のサービスでプロキシを設定します。
• プロキシに2つの環境変数を設定します：
  • SECRET：Misskeyウェブフックを検証するためのキー
  • DISCORD：DiscordウェブフックのURL

c. Misskeyウェブフックの設定

• Misskeyの設定で新しいウェブフックを作成します。
• URLに中間プロキシのURLを入力します。
• Secretに、プロキシのSECRET環境変数と同じ値を入力します。
• 「Note」（投稿）などのトリガーしたいイベントを選択します。

d. プロキシロジックの作成

• プロキシサービスで、Misskeyのウェブフックリクエストを受信するロジックを作成します。
• リクエストの正当性を検証します（SECRETを使用）。
• Misskeyのリクエスト内容を解析し、Discordが受け入れ可能な形式に変換します。
• 変換された内容をDiscordウェブフックURLに送信します。

サンプルコード

Cloudflareワーカーのコード：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  if (request.method !== 'POST') {
    return new Response('Method Not Allowed', { status: 405 })
  }

  const secret = request.headers.get('X-Misskey-Hook-Secret')
  if (secret !== SECRET) {
    return new Response('Unauthorized', { status: 401 })
  }

  const body = await request.json()
  const note = body.body.note

  const discordPayload = {
    content: `New post from: ${note.user.name}:\n${note.text}`
  }

  await fetch(DISCORD, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(discordPayload)
  })

  return new Response('OK', { status: 200 })
}

この例では、Misskeyのウェブフックリクエストを受信したときに、投稿内容をDiscordに転送します。

注意事項

• 中間プロキシサービスが公開アクセス可能であることを確認してください。
• SECRETを適切に管理し、他人に漏洩しないようにしてください。
• ニーズに応じて、Discordメッセージの形式と内容をカスタマイズできます。

---

Setting up webhook

Setup Steps

a. Create Discord Webhook

• Create a webhook in Discord and copy its URL.

b. Set Up Middleware Proxy

• Create a proxy using Cloudflare Workers or a similar service.
• Set two environment variables in the proxy:
  • SECRET: Key for validating Misskey webhook
  • DISCORD: Discord webhook URL

c. Configure Misskey Webhook

• Create a new webhook in Misskey settings.
• Enter the middleware proxy URL in the URL field.
• Enter the same value as the SECRET environment variable in the proxy in the Secret field.
• Select the events you want to trigger, such as "Note" (post).

d. Write Proxy Logic

• Write logic in the proxy service to receive Misskey webhook requests.
• Validate the request's legitimacy (using SECRET).
• Parse the Misskey request content and convert it to a format Discord can accept.
• Send the converted content to the Discord webhook URL.

Sample Code

Cloudflare Workers code:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  if (request.method !== 'POST') {
    return new Response('Method Not Allowed', { status: 405 })
  }

  const secret = request.headers.get('X-Misskey-Hook-Secret')
  if (secret !== SECRET) {
    return new Response('Unauthorized', { status: 401 })
  }

  const body = await request.json()
  const note = body.body.note

  const discordPayload = {
    content: `New post from: ${note.user.name}:\n${note.text}`
  }

  await fetch(DISCORD, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(discordPayload)
  })

  return new Response('OK', { status: 200 })
}

This example forwards the post content to Discord when receiving a Misskey webhook request.

Precautions

• Ensure your middleware proxy service is publicly accessible.
• Properly manage your SECRET and do not disclose it to others.
• Customize the format and content of Discord messages according to your needs.

💻 Frontend Environment

• Model and OS of the device(s): Windows 10
• Browser: Chrome
• Server URL:
• Misskey: 2024.10.1

🛰 Backend Environment (for server admin)

• Installation Method or Hosting Service:
• Misskey: 2024.10.1
• Node: v22.11.
• PostgreSQL:psql (PostgreSQL) 15.7 (Ubuntu 15.7-1.pgdg22.04+1)
• Redis: 7.2.5
• OS and Architecture: Ubuntu 22.04.4 LTS

Do you want to address this bug yourself?

• Yes, I will patch the bug myself and send a pull request

[anatawa12]

なぜこの問題がwebhookの追加で発生するかはわかりませんが、おそらくこれはCloudflareの仕様によるものです。

まず初めにcloudflareのデフォルト設定では、特定の拡張子を持たないものはキャッシュされないようになっています。そのためデフォルト設定ではこの問題は発生しないと思います。

そして、手動でRules等で設定することで Cloudflare にノートのページなどをキャッシュさせることはできます。
しかし、 Cloudflare は Varyに定義されたヘッダをキャッシュキーに追加しないため、Acceptの差によるレスポンスキャッシュの振り分けができません。
Misskeyに置いて、ノートのActivity Pubのアクセスと通常のブラウザのアクセスは同じURLを共有します。
そのため、CDN等はAcceptの違いによりキャッシュを分ける必要があリマスが、これが正しく行われないCloudflareでCacheがされる
JSONが表示される問題が発生したり、または連合先がノートへアクセスできない問題が発生します。

この問題がwebhookの追加によって発生するようになる理由は不明です。