Ao executar uma Atividade do Discord por meio do Discord, você pode encontrar problemas de Política de segurança de conteúdo (CSP). Você pode corrigir isso certificando-se de que as solicitações de rede sigam as regras do Discord Proxy.

Isso pode ser feito manualmente... ou você pode deixar @robojs/patch cuidar disso.

O que é CSP?

Política de Segurança de Conteúdo (CSP) é um padrão de segurança que ajuda a prevenir ataques de Cross-Site Scripting (XSS). Ele controla quais recursos uma página pode carregar e para onde pode enviar dados.

Quando você executa uma Discord Activity no Discord, na verdade você está usando o Discord Proxy como intermediário, o que significa que ele define seu próprio Regras CSP. Se suas solicitações de rede não seguirem essas regras, elas serão bloqueadas.

• Solicitações relativas como /api/token serão bloqueadas, a menos que sejam prefixadas com /.proxy.
• Solicitações externas como https://example.com/api/token serão bloqueadas, a menos que sejam mapeadas ou proxied.

Resolvendo violações do CSP

Conforme mencionado acima, tudo o que você precisa fazer é garantir que suas solicitações de rede sigam as regras do Discord Proxy. Em alguns casos, isso inclui adicionar /.proxy ao início do caminho da sua solicitação.

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

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

No entanto, WebSockets pode ser um pouco mais complicado. Especialmente ao contar com Hot Module Replacement (HMR) que carrega antes de sua própria atividade, como em Vite. Então, criamos @robojs/patch para cuidar de tudo para você.

Corrigindo sua atividade

@robojs/patch é um pacote leve que corrige suas solicitações de rede para seguir as regras do Discord Proxy. Ele funciona atualizando os globais fetch e WebSocket.

npm install @robojs/patch

Temos diferentes maneiras de aplicar este patch dependendo da configuração do seu projeto.

Método 1: Plugin Vite (recomendado)

Se você estiver usando o Vite, você pode aplicar o patch como um plugin em seu arquivo de configuração do Vite.

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

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

Recomendamos este método porque ele permite que o patch seja executado antes do cliente HMR do Vite, garantindo que funcione corretamente.

Método 2: chamada de função

Se você não estiver usando o Vite, você pode aplicar o patch chamando uma função diretamente.

import { DiscordProxy } from '@robojs/patch'

DiscordProxy.patch()

Certifique-se de chamar isso logo no início do seu projeto, antes que outros scripts sejam carregados. (por exemplo, a parte superior do seu arquivo index.js)

➞ ? Documentação: @robojs/patch

Solicitações Externas

Isso não afeta as solicitações feitas a URLs externos. Se você estiver tendo problemas de CSP com eles, poderá corrigi-los criando seu próprio proxy ou mapeando-os no Portal do desenvolvedor Discord.

➞ ? Tutorial: Resolva problemas de CSP com um proxy

Resolva problemas de política de segurança de conteúdo (CSP) em sua atividade do Discord usando um proxy Node.js

Equipe do WavePlay para WavePlay ・ 17 de junho

#discórdia #programação #nó #javascript

Interessado em atividades do Discord?

Robo.js é uma estrutura poderosa para criar Atividades do Discord com facilidade. Ele fornece uma ampla gama de recursos e ferramentas para ajudá-lo a criar experiências épicas no Discord!

Entre em nosso Discord Server para conversar com outros desenvolvedores, fazer perguntas e compartilhar seus projetos. Somos um grupo amigável e estamos sempre dispostos a ajudar! Além disso, nosso próprio AI Robo, Sage, está lá para ajudá-lo com qualquer dúvida que você possa ter.

➞ ? Comunidade: Junte-se ao nosso servidor Discord

➞ ? Tutorial: Criando uma atividade Discord em segundos com Robo.js

Robo - Imagine Magia

Aprimore o Discord com atividades, bots, servidores e muito mais! ⚡ | 83 membros

discord. com

Criando uma atividade Discord em segundos com Robo.js

Equipe do WavePlay para WavePlay ・ 9 de abril

#discórdia #sdk #javascript #robô