Programatic method to verify if a codesandbox exists, via link

[icyJoseph]

Hi,

For issue reports over at the next.js repo, we use nissuer, which does a fetch request against a codesandbox link:

• https://github.com/balazsorban44/nissuer/blob/9413c629c6b7ccc4ff6fa7c0491fb5d2ea407bb7/index.js#L167-L172

We are now getting 403 status codes rather with a human/bot JS challenge.

What other resource does one have to check if a codesandbox link is valid? As in, does the project exist?

The intention of this check was to ensure a reproduction link was at least reachable, obviously the contents of the project still have to be looked through and triaged, but this check is helpful to callout that the sandbox might not be visible to the maintainers, and keep spam down. Right now this is giving us false positives, closing issues with valid links.

@mojojoji — Sorry for the direct tag, @karlhorky mentioned that you could help with some insight here. I am labelling this as an idea, because hitting the URL is bound to be fragile, there should probably be an endpoint to quickly check if the sandbox exists.

For example, this hits the JS challenge:

const link = 'https://codesandbox.io/p/devbox/recursing-lamarr-3ypq8k?file=%2Fapp%2Fpage.tsx%3A3%2C18'
const res = await fetch(link)
console.log(res.status, (await res.text()).match(/<title>(.*?)<\/title>/)?.[1])

An LLM was able to find the graphql endpoint:

const ask = (id) =>
  fetch('https://codesandbox.io/api/graphql', {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({
      query: 'query($id:ID!){ sandbox(sandboxId:$id){ id privacy } }',
      variables: { id },
    }),
  }).then((r) => r.json())

Use like this:

console.log(JSON.stringify(await ask('recursing-lamarr-3ypq8k')))   // a known sandbox
console.log(JSON.stringify(await ask('zzz-does-not-exist-000000'))) // nonexistent

Prints:

{"data":{"sandbox":{"id":"3ypq8k","privacy":0}}}
{"data":{"sandbox":null},"errors":[{"message":"Sandbox not found","path":["sandbox"],"locations":[{"line":1,"column":17}]}]}

Since this is undocumented, I reckon it might be just as unreliable anyway? are there any gotchas? I know we'd have to switch to check data.sandbox on a 200 response, would "privacy": 1 mean that maintainers wouldn't be able to see it either?

I also considered building a <id>-<port>.cbs.app, to get a preview url and through that validate the sandbox, but that's perhaps not the right tool for what we are trying to achieve.

Thanks in advance!