При запуске Действия Discord через Discord вы можете столкнуться с Проблемами политики безопасности контента (CSP). Вы можете это исправить, убедившись, что сетевые запросы соответствуют правилам Discord Proxy.

Это можно сделать вручную... или позволить @robojs/patch сделать это.

Что такое ЦСП?

Политика безопасности контента (CSP) — это стандарт безопасности, который помогает предотвратить атаки Межсайтовый скриптинг (XSS). Он контролирует, какие ресурсы может загружать страница и куда она может отправлять данные.

Когда вы запускаете Действие Discord в Discord, вы фактически используете Прокси-сервер Discord в качестве посредника, то есть он устанавливает свой собственный Правила CSP. Если ваши сетевые запросы не соответствуют этим правилам, они будут заблокированы.

• Относительные запросы, такие как /api/token, будут заблокированы, если им не будет префикса /.proxy.
• Внешние запросы, такие как https://example.com/api/token, будут заблокированы, если они не сопоставлены или проксированы.

Устранение нарушений CSP

Как указано выше, все, что вам нужно сделать, это убедиться, что ваши сетевые запросы соответствуют правилам Discord Proxy. В некоторых случаях это включает добавление /.proxy в начало пути вашего запроса.

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

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

Однако WebSockets может быть немного сложнее. Особенно если полагаться на Горячую замену модулей (HMR), которая загружается перед вашими действиями, как в Vite. Итак, мы создали @robojs/patch, чтобы сделать все за вас.

Исправление вашей активности

@robojs/patch — это легкий пакет, который исправляет ваши сетевые запросы, чтобы они соответствовали правилам Discord Proxy. Он работает путем обновления глобальных переменных 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()]
})

Мы рекомендуем этот метод, поскольку он позволяет запустить патч раньше, чем клиент HMR Vite, гарантируя его правильную работу.

Способ 2: вызов функции

Если вы не используете Vite, вы можете применить патч, вызвав функцию напрямую.

import { DiscordProxy } from '@robojs/patch'

DiscordProxy.patch()

Обязательно вызывайте это в самом начале вашего проекта, до загрузки других скриптов. (например, начало вашего файла index.js)

➞ ? Документация: @robojs/patch

Внешние запросы

Это не влияет на запросы, сделанные на внешние URL-адреса. Если у вас возникли проблемы CSP с ними, вы можете исправить их, создав собственный прокси или сопоставив их на Портале разработчиков Discord.

➞ ? Руководство: Решение проблем CSP с помощью прокси-сервера

Решение проблем с политикой безопасности контента (CSP) в вашей активности в Discord с помощью прокси-сервера Node.js

Персонал WavePlay для WavePlay ・ 17 июня

#дискорд #программирование #узел #javascript

Заинтересованы в деятельности Discord?

Robo.js — это мощная платформа для простого создания Discord Activity. Он предоставляет широкий спектр функций и инструментов, которые помогут вам создавать эпические впечатления от Discord!

Присоединяйтесь к нашему серверу Discord, чтобы общаться с другими разработчиками, задавать вопросы и делиться своими проектами. Мы дружная компания и всегда рады помочь! Кроме того, наш собственный робот с искусственным интеллектом, Sage, всегда готов помочь вам с любыми вопросами.

➞ ? Сообщество: Присоединяйтесь к нашему серверу Discord

➞ ? Учебник: Создание действия Discord за считанные секунды с помощью Robo.js

Робо - Представь волшебство

Расширьте возможности Discord с помощью простых действий, ботов, серверов и многого другого! ⚡ | 83 участника

discord.com

Создание действия Discord за считанные секунды с помощью Robo.js

Сотрудники WavePlay для WavePlay ・9 апреля

#дискорд #sdk #javascript #бот