ChrisLi•7mo ago

Discord activities Content Security Policy issue

Hi guys, currently, I'm going to use React + Convex to develop new Discord Activities. However, I encountering a CSP issue when testing. Discord suggests using URL Mapping to resolve it: https://discord.com/developers/docs/activities/development-guides#url-mapping But I think Convex is using websocket, hope to get any suggestions or help. Thx!

Discord Developer Portal

Discord Developer Portal — API Docs for Bots and Developers

Integrate your service with Discord — whether it's a bot or a game or whatever your wildest imagination can come up with.

32 Replies

ballingt•7mo ago

@ChrisLi did you try a mapping as suggested in https://discord.com/developers/docs/activities/development-guides#url-mapping I hope it would work the same way (but not sure)

ChrisLiOP•7mo ago

yea, I see it uses prefix to solve the http issue, not sure how to do that with convex. I use vite to init my react project

ballingt•7mo ago

What's different about Convex, did you try this?

ballingt•7mo ago

Looks like it should work for WebSockets

ballingt•7mo ago

this UI here

ballingt•7mo ago

@ChrisLi I think I'm not understanding your question, are you asking what to put in that box?

ChrisLiOP•7mo ago

yea, I don't know how to config that 🥲

ballingt•7mo ago

You don't know how to find that UI?

ChrisLiOP•7mo ago

hmmm, I don't know which value should I put for url and target

ballingt•7mo ago

I think you need to - use a different URL in your React app: instead of https://sensible-skunk-264.convex.cloud, use something like https://your-activity/convex-api/ - but I'm not sure what goes in your-activity, where is the rest of your activity served from? - In the Activity URL Mappings, map /convex-api to your domain, https://sensible-skunk-264.convex.cloud If you don't know what URL your activity is served from then we may need to make some client changes: currenty the client expects an absolute url that includes the protocol, like https://discord-activities-or-whatever/your-activity @ChrisLi making a discord activity with Convex is cool, would love to hear how it goes!

ChrisLiOP•7mo ago

thanks! I'll do more research then.

ChrisLiOP•7mo ago

I got some tries, and it still doesn't work. Here is the config:

ChrisLiOP•7mo ago

got the same csp issue as before my frontend is pure vite+ react in my local, exposed by ngrok communicate with convex directly inside my react

ChrisLiOP•7mo ago

hmmm, also tried this way and still does not work:

ChrisLiOP•7mo ago

ChrisLiOP•6mo ago

Hi @ballingt , this issue still blocks me. I’m really appreciate if you have any insights! 🙏

ballingt•6mo ago

If you're doing that mapping I think the VITE_CONVEX_URL should be https://discord-activities-or-whatever/your-activity`, not the ngrok url ~~Where is the site hosted?~~ How is the site exposed to the Discord UI? i.e. if you just fetch('/') from the frontend, what URL is being fetched? To avoid the CSP issue you need to hit a url like /convex-api. But the COnvex client expects a qualified URL like https://some-discord-thing/convex-api so you need to build that URL If the URL isn't stable it might be necessary to change the Convex client to accept a relative path

ChrisLiOP•6mo ago

It works for me now! @ballingt I used the fetch / to get the host url Thank you very much!🙏

ballingt•6mo ago

That's great! Looking forward to hearing about it, I've never written a Discord activity so I'd love to learn how. What was the host URL? Don't have to reveal your real one, but roughly what does it look like? Just wondering in case future folks ask.

ChrisLiOP•6mo ago

sure, the url is like this:

ChrisLiOP•6mo ago

and for reference the config in the url mapper is like this:

ChrisLiOP•6mo ago

the target url is the url we host the website cc. @ballingt hmmm, but I'm a little bit confused about the VITE_CONVEX_URL, what does it required? never touched it once start the Convex project. 🧐

ballingt•6mo ago

cool, thanks What does your code where you create a ConvexClient look like?

ChrisLiOP•6mo ago

like this:

ballingt•6mo ago

@ChrisLi that often that makes use of VITE_CONVEX_URL, which is automatically populated in the .env.local file. So VITE_CONVEX_URL in .env.local is modified to point at your development deployment in dev, and your production deployment in prod. But you need it to be something else, https//?????638.discordsays.com/convexapi

ChrisLiOP•6mo ago

yea, but at first it ends with .convex.cloud, so, it can be modified?

ballingt•6mo ago

so instead of using import.meta.env.VITE_CONVEX_URL there I would hardcode it to what you need it to be to work ahhh ok yeah that part we need to fix

ChrisLiOP•6mo ago

makes sense

ballingt•6mo ago

this looks like the next problem https://github.com/get-convex/convex-js/blob/main/src/browser/sync/client.ts#L202 @ChrisLi You can hack this for now by providing a custom WebSocket constructor, but we'll change this to make it easier in the next client release

ChrisLiOP•6mo ago

that's cool, thanks for letting me know!

ballingt•6mo ago

@ChrisLi for now you might try
function ChrisWebSocketConstructor() { // put your actual domain here, like // wss://?????638.discordsays.com/convexapi/api/1.13.0/sync return new WebSocket('wss://oceanic-beaver-692.convex.cloud/api/1.13.0/sync'); } const client = new c.ConvexReactClient('https://happy-otter-123.convex.cloud', {webSocketConstructor: ChrisWebSocketConstructor})
function ChrisWebSocketConstructor() { // put your actual domain here, like // wss://?????638.discordsays.com/convexapi/api/1.13.0/sync return new WebSocket('wss://oceanic-beaver-692.convex.cloud/api/1.13.0/sync'); } const client = new c.ConvexReactClient('https://happy-otter-123.convex.cloud', {webSocketConstructor: ChrisWebSocketConstructor})
@ChrisLi or just hang tight and we'll get this fixed in a few days. Are you getting console errors about this now? Errors about the WebSocket not being able to connect, or more CSP errors? Hm looking at the code more closely, this should work without any of these hacks! If you pass in

const client = new ConvexReactClient('wss://?????638.discordsays.com/convexapi/')

const client = new ConvexReactClient('wss://?????638.discordsays.com/convexapi/')

that looks like it would work fine! There's actually nothing here for us to fix, let me know if this works for you! The only inconvenience left is that - you have to specify skipConvexDeployomentUrlCheck, and - you can't use the automatically filled out VITE_CONVEX_URL value, because that won't be using the proxy

ChrisLiOP•6mo ago

ahhh, ya, actually there is no more errors appears after I use the discord url to create the Convex Client!

Discord activities Content Security Policy issue

Did you find this page helpful?