Discord を通じて Discord アクティビティを実行すると、コンテンツ セキュリティ ポリシー (CSP)の問題が発生する可能性があります。これらを修正するには、ネットワーク リクエストが Discord プロキシ ルールに従っていることを確認します。

これは手動で行うこともできます...または、@robojs/patch に処理させることもできます。

CSPとは何ですか?

コンテンツ セキュリティ ポリシー (CSP) は、クロスサイト スクリプティング (XSS) 攻撃の防止に役立つセキュリティ標準です。ページがどのリソースをロードできるか、およびデータをどこに送信できるかを制御します。

Discord で Discord アクティビティ を実行すると、実際には Discord プロキシ を仲介者として使用することになります。つまり、独自の が設定されます。 CSPルール。ネットワーク リクエストがこれらのルールに従っていない場合、リクエストはブロックされます。

• /api/token のような相対リクエストは、/.proxy.
というプレフィックスが付けられていない限りブロックされます。
• https://example.com/api/token などの外部リクエストは、マッピングまたはプロキシ化されていない限りブロックされます。

CSP 違反の解決

上で述べたように、ネットワーク リクエストが Discord プロキシ ルールに従っていることを確認するだけです。場合によっては、リクエスト パスの先頭に /.proxy を追加することも含まれます。

// Before
fetch('/api/token')

// After
fetch('/.proxy/api/token')

ただし、WebSocket には少し注意が必要です。 Vite のように、自分のアクティビティの前に読み込まれる Hot Module Replacement (HMR) に依存している場合は特にそうです。そこで、すべてを処理できる @robojs/patch を作成しました。

アクティビティにパッチを適用する

@robojs/patch は、Discord プロキシ ルールに従うようにネットワーク リクエストにパッチを適用する軽量パッケージです。 fetch および WebSocket グローバルを更新することで機能します。

npm install @robojs/patch

プロジェクトの設定に応じて、このパッチを適用するさまざまな方法があります。

方法 1: Vite プラグイン (推奨)

Vite を使用している場合は、Vite 設定ファイルのプラグインとしてパッチを適用できます。

import { DiscordProxy } from '@robojs/patch'
import { defineConfig } from 'vite'

export default defineConfig({
    plugins: [DiscordProxy.Vite()]
})

この方法をお勧めします。これにより、Vite の HMR クライアントよりも前にパッチを実行でき、正しく動作することが保証されます。

方法 2: 関数呼び出し

Vite を使用していない場合は、関数を直接呼び出してパッチを適用できます。

import { DiscordProxy } from '@robojs/patch'

DiscordProxy.patch()

他のスクリプトが読み込まれる前に、プロジェクトの最初に必ずこれを呼び出してください。 (例:index.js ファイルの先頭)

➞ ? ドキュメント: @robojs/patch

外部からのリクエスト

これは、外部 URL に対するリクエストには影響しません。これらに関して CSP の問題が発生している場合は、独自のプロキシを作成するか、Discord デベロッパー ポータルでマッピングすることで問題を解決できる可能性があります。

➞ ? チュートリアル: プロキシを使用して CSP の問題を解決する

Node.js プロキシを使用して Discord アクティビティのコンテンツ セキュリティ ポリシー (CSP) の問題を解決する

WavePlayスタッフ・WavePlay担当・6月17日

＃不和 ＃プログラミング ＃ノード #javascript

Discord のアクティビティに興味がありますか?

Robo.js は、Discord アクティビティを簡単に構築するための強力なフレームワークです。壮大な Discord エクスペリエンスの作成に役立つ幅広い機能とツールを提供します!

Discord サーバー に参加して、他の開発者とチャットしたり、質問したり、プロジェクトを共有したりできます。私たちはフレンドリーな集団なので、いつでも喜んでお手伝いします！さらに、私たち独自の AI ロボ Sage が、あなたの質問に答えてくれます。

➞ ? コミュニティ: Discord サーバーに参加してください

➞ ? チュートリアル: Robo.js を使用して数秒で Discord アクティビティを作成する

ロボ - イマジンマジック

簡単なアクティビティ、ボット、サーバーなどで Discord をパワーアップしましょう! ⚡ |会員数83名

discord.com

Robo.js を使用して Discord アクティビティを数秒で作成する

WavePlayスタッフ・WavePlay担当・4月9日

＃不和 #sdk #javascript #ボット