Wenn Sie eine Discord-Aktivität über Discord ausführen, können Probleme mit der Content Security Policy (CSP) auftreten. Sie können diese Probleme beheben, indem Sie sicherstellen, dass Netzwerkanfragen den Discord-Proxy-Regeln entsprechen.

Dies kann manuell erfolgen... oder Sie können es @robojs/patch überlassen.

Was ist CSP?

Content Security Policy (CSP) ist ein Sicherheitsstandard, der dabei hilft, Cross-Site Scripting (XSS)-Angriffe zu verhindern. Es steuert, welche Ressourcen eine Seite laden und wohin sie Daten senden kann.

Wenn Sie eine Discord-Aktivität in Discord ausführen, verwenden Sie tatsächlich den Discord-Proxy als Mittelsmann, was bedeutet, dass er seinen eigenen festlegt. CSP-Regeln. Wenn Ihre Netzwerkanfragen diesen Regeln nicht entsprechen, werden sie blockiert.

• Relative Anfragen wie /api/token werden blockiert, sofern ihnen nicht /.proxy vorangestellt ist.
• Externe Anfragen wie https://example.com/api/token werden blockiert, es sei denn, sie sind zugeordnet oder proxied.

Beheben von CSP-Verstößen

Wie oben erwähnt, müssen Sie lediglich sicherstellen, dass Ihre Netzwerkanfragen den Discord-Proxy-Regeln entsprechen. In einigen Fällen umfasst dies das Hinzufügen von /.proxy am Anfang Ihres Anforderungspfads.

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

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

Allerdings können WebSockets etwas kniffliger sein. Vor allem, wenn Sie sich auf Hot Module Replacement (HMR) verlassen, das vor Ihrer eigenen Aktivität geladen wird, wie in Vite. Deshalb haben wir @robojs/patch erstellt, um alles für Sie zu erledigen.

Patchen Sie Ihre Aktivität

@robojs/patch ist ein leichtes Paket, das Ihre Netzwerkanforderungen so patcht, dass sie den Discord-Proxy-Regeln folgen. Dies funktioniert durch die Aktualisierung der globalen Werte fetch und WebSocket.

npm install @robojs/patch

Wir haben je nach Projektkonfiguration verschiedene Möglichkeiten, diesen Patch anzuwenden.

Methode 1: Vite-Plugin (empfohlen)

Wenn Sie Vite verwenden, können Sie den Patch als Plugin in Ihrer Vite-Konfigurationsdatei anwenden.

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

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

Wir empfehlen diese Methode, da sie es ermöglicht, den Patch vor dem HMR-Client von Vite auszuführen und so sicherzustellen, dass er ordnungsgemäß funktioniert.

Methode 2: Funktionsaufruf

Wenn Sie Vite nicht verwenden, können Sie den Patch anwenden, indem Sie eine Funktion direkt aufrufen.

import { DiscordProxy } from '@robojs/patch'

DiscordProxy.patch()

Rufen Sie dies unbedingt ganz am Anfang Ihres Projekts auf, bevor andere Skripte geladen werden. (z. B. oben in Ihrer index.js-Datei)

➞ ? Dokumentation: @robojs/patch

Externe Anfragen

Dies wirkt sich nicht auf Anfragen an externe URLs aus. Wenn Sie CSP-Probleme damit haben, können Sie diese möglicherweise beheben, indem Sie Ihren eigenen Proxy erstellen oder sie im Discord-Entwicklerportal zuordnen.

➞ ? Tutorial: CSP-Probleme mit einem Proxy lösen

Beheben Sie Probleme mit der Content Security Policy (CSP) in Ihrer Discord-Aktivität mithilfe eines Node.js-Proxys

WavePlay-Mitarbeiter für WavePlay ・ 17. Juni

#Zwietracht #Programmierung #Knoten #javascript

Interessiert an Discord-Aktivitäten?

Robo.js ist ein leistungsstarkes Framework zum einfachen Erstellen von Discord-Aktivitäten. Es bietet eine breite Palette an Funktionen und Tools, die Ihnen dabei helfen, epische Discord-Erlebnisse zu erstellen!

Treten Sie unserem Discord-Server bei, um mit anderen Entwicklern zu chatten, Fragen zu stellen und Ihre Projekte zu teilen. Wir sind ein freundlicher Haufen und helfen immer gerne weiter! Darüber hinaus steht Ihnen unser eigener KI-Robo Sage bei allen Fragen zur Seite.

➞ ? Community: Treten Sie unserem Discord-Server bei

➞ ? Tutorial: Mit Robo.js in Sekundenschnelle eine Discord-Aktivität erstellen

Robo – Stellen Sie sich Magie vor

Stärken Sie Discord mit mühelosen Aktivitäten, Bots, Servern und mehr! ⚡ | 83 Mitglieder

discord.com

Mit Robo.js in Sekundenschnelle eine Discord-Aktivität erstellen

WavePlay-Mitarbeiter für WavePlay ・ 9. April

#Zwietracht #sdk #javascript #bot