Lors de l'exécution d'une Activité Discord via Discord, vous pouvez rencontrer des problèmes de Politique de sécurité du contenu (CSP). Vous pouvez résoudre ces problèmes en vous assurant que les requêtes réseau suivent les règles du Discord Proxy.

Cela peut être fait manuellement... ou vous pouvez laisser @robojs/patch le gérer.

Qu’est-ce que le CSP ?

Content Security Policy (CSP) est une norme de sécurité qui permet de prévenir les attaques de Cross-Site Scripting (XSS). Il contrôle quelles ressources une page peut charger et où elle peut envoyer des données.

Lorsque vous exécutez une activité Discord dans Discord, vous utilisez en fait le proxy Discord comme intermédiaire, ce qui signifie qu'il définit son propre Règles CSP. Si vos requêtes réseau ne respectent pas ces règles, elles seront bloquées.

• Les requêtes relatives telles que /api/token seront bloquées sauf si elles sont préfixées par /.proxy.
• Les requêtes externes telles que https://example.com/api/token seront bloquées à moins qu'elles ne soient mappées ou proxy.

Résolution des violations CSP

Comme indiqué ci-dessus, tout ce que vous avez à faire est de vous assurer que vos requêtes réseau suivent les règles du Discord Proxy. Dans certains cas, cela inclut l'ajout de /.proxy au début du chemin de votre requête.

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

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

Cependant, les WebSockets peuvent être un peu plus délicats. Surtout lorsque vous comptez sur Hot Module Remplacement (HMR) qui se charge avant votre propre activité comme dans Vite. Nous avons donc créé @robojs/patch pour tout gérer pour vous.

Corriger votre activité

@robojs/patch est un package léger qui corrige vos requêtes réseau pour suivre les règles du Discord Proxy. Il fonctionne en mettant à jour les variables globales fetch et WebSocket.

npm install @robojs/patch

Nous avons différentes manières d'appliquer ce correctif en fonction de la configuration de votre projet.

Méthode 1 : Plugin Vite (recommandé)

Si vous utilisez Vite, vous pouvez appliquer le correctif en tant que plugin dans votre fichier de configuration Vite.

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

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

Nous recommandons cette méthode car elle permet au correctif de s'exécuter avant le client HMR de Vite, garantissant ainsi son bon fonctionnement.

Méthode 2 : appel de fonction

Si vous n'utilisez pas Vite, vous pouvez appliquer le patch en appelant directement une fonction.

import { DiscordProxy } from '@robojs/patch'

DiscordProxy.patch()

Assurez-vous d'appeler ceci au tout début de votre projet, avant que d'autres scripts ne soient chargés. (par exemple, le haut de votre fichier index.js)

➞ ? Documentation : @robojs/patch

Demandes externes

Cela n'affecte pas les requêtes adressées aux URL externes. Si vous rencontrez des problèmes CSP avec ceux-ci, vous pourrez peut-être les résoudre en créant votre propre proxy ou en les mappant dans le Portail des développeurs Discord.

➞ ? Tutoriel : Résoudre les problèmes CSP avec un proxy

Résoudre les problèmes de politique de sécurité du contenu (CSP) dans votre activité Discord à l'aide d'un proxy Node.js

Stand WavePlay pour WavePlay ・ 17 juin

#discorde #programmation #nœud #javascript

Intéressé par les activités Discord ?

Robo.js est un framework puissant pour créer facilement des Activités Discord. Il fournit une large gamme de fonctionnalités et d'outils pour vous aider à créer des expériences Discord épiques !

Rejoignez notre Serveur Discord pour discuter avec d'autres développeurs, poser des questions et partager vos projets. Nous sommes un groupe sympathique et toujours heureux de vous aider ! De plus, notre propre robot IA, Sage, est là pour vous aider à répondre à toutes vos questions.

➞ ? Communauté : Rejoignez notre serveur Discord

➞ ? Tutoriel : Créer une activité Discord en quelques secondes avec Robo.js

Robo - Imaginez la magie

Dynamisez Discord avec des activités, des robots, des serveurs sans effort et bien plus encore ! ⚡ | 83 membres

discord.com

Créer une activité Discord en quelques secondes avec Robo.js

Stand WavePlay pour WavePlay ・ 9 avril

#discorde #sdk #javascript #bot