Patch Your Discord Activity’s Network Requests for Smooth CSP Compliance

When running a Discord Activity through Discord, you may encounter Content Security Policy (CSP) issues. You can fix these by making sure network requests follow Discord Proxy rules.

This can be done manually... or you can let @robojs/patch handle it.

What is CSP?

Content Security Policy (CSP) is a security standard that helps prevent Cross-Site Scripting (XSS) attacks. It controls which resources a page can load and where it can send data.

When you run a Discord Activity in Discord, you're actually using the Discord Proxy as a middleman, meaning it sets its own CSP rules. If your network requests don't follow these rules, they'll be blocked.

Relative requests like /api/token will be blocked unless prefixed with /.proxy.
External requests like https://example.com/api/token will be blocked unless they're mapped or proxied.

Resolving CSP Violations

As stated above, all you have to do is make sure your network requests follow the Discord Proxy rules. In some cases, that includes adding /.proxy to the beginning of your request path.

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

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

However, WebSockets can be a bit trickier. Especially when relying on Hot Module Replacement (HMR) that loads before your own activity like in Vite. So, we created @robojs/patch to handle everything for you.

Patching Your Activity

@robojs/patch is a lightweight package that patches your network requests to follow Discord Proxy rules. It works by updating the fetch and WebSocket globals.

npm install @robojs/patch

We have different ways to apply this patch depending on your project setup.

Method 1: Vite Plugin (Recommended)

If you're using Vite, you can apply the patch as a plugin in your Vite config file.

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

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

We recommend this method because it allows the patch to run before before Vite's HMR client, ensuring that it works correctly.

Method 2: Function Call

If you're not using Vite, you can apply the patch by calling a function directly.

import { DiscordProxy } from '@robojs/patch'

DiscordProxy.patch()

Be sure to call this at the very beginning of your project, before other scripts are loaded. (e.g. the top of your index.js file)

➞ 📚 Documentation: @robojs/patch

External Requests

This does not affect requests made to external URLs. If you're having CSP issues with those, you may be able to fix them by creating your own Proxy or mapping them in the Discord Developer Portal.

➞ 📚 Tutorial: Resolve CSP Issues with a Proxy

Resolve Content Security Policy (CSP) Issues in Your Discord Activity Using a Node.js Proxy

WavePlay Staff for WavePlay ・ Jun 17

#discord #programming #node #javascript

Interested in Discord Activities?

Robo.js is a powerful framework for building Discord Activities with ease. It provides a wide range of features and tools to help you create epic Discord experiences!

Join our Discord Server to chat with other developers, ask questions, and share your projects. We're a friendly bunch and always happy to help! Plus, our very own AI Robo, Sage, is there to assist you with any questions you may have.

➞ 🚀 Community: Join our Discord server

➞ 📚 Tutorial: Creating a Discord Activity in seconds with Robo.js