How do you call the /user/tokens/verify API from the browser?

I'm trying this:

const response: Response = await window.fetch(
  'https://api.cloudflare.com/client/v4/user/tokens/verify',
  {
    method: 'GET',
    mode: 'no-cors',
    headers: new Headers({
      Authorization: `Bearer ${apiToken}`,
      'Content-Type': 'application/json',
    }),
  },
);

const response: Response = await window.fetch(
  'https://api.cloudflare.com/client/v4/user/tokens/verify',
  {
    method: 'GET',
    mode: 'no-cors',
    headers: new Headers({
      Authorization: `Bearer ${apiToken}`,
      'Content-Type': 'application/json',
    }),
  },
);

This is the same code as the official documentation except with mode: 'no-cors' because CORS rejects requests from localhost. Unlike the documentation, this only responds with "400 Bad Request."

Cloudflare API Documentation

Interact with Cloudflare's products and services via the Cloudflare API

12 Replies

Hello, I’m Allie!•9mo ago

You shouldn't have an API token in the browser at all, that is bad for security reasons IIRC basically the entire API is explicitly set to reject Cross-Origin Requests for this very reason

quisi.do•9mo ago

Okay, but I want to manage my own security. 🤔 This isn't a case of "the website owns the token," it's a case of "the user owns the token," so they would be using their own token in their own browser instance. Is there no workaround? I don't want to just put the call behind a Cloudflare worker, because then "the website" is paying for the user to use their own token, which kind of defeats the purpose.

Hello, I’m Allie!•9mo ago

Nope, not as far as I'm aware

quisi.do•9mo ago

How would I put in a feature request? 🙈

Chaika•9mo ago

I believe no-cors strips out the auth. request header because it's not part of the cors-safelisted request headers, which is why you get that error btw. no-cors isn't a magical way around cors, it also prevents Javascript from reading any properties of the result you could try on the forums but I doubt it's going to happen, it's just not meant to be used that way. Use your own proxy or a worker, workers are dirt cheap, if you're doing something with Images or R2, and the bandwidth/upload is the issue, there are ways around it like Images signed url tokens which work with CORS afaik, and R2 directly has a cors configuration

quisi.do•9mo ago

I know they are cheap, but it doesn't necessary scale for a service that I'm not charging for. 😦 I just want to make an API UI but not have to pay out of pocket to let others use it.

Hello, I’m Allie!•9mo ago

You can make it work if people can download the UI and run it locally

quisi.do•9mo ago

Yeah. I was only wanting to invest a lowly browser session into it. It was meant to make development easier. 😆

Hello, I’m Allie!•9mo ago

Yeah, but then there is also the case of users saying do I trust this website with my API token that may be able to wipe out my entire domain profile?

quisi.do•9mo ago

Yeah, they are welcome to do that. Wouldn't be any different than an executable that they download and run locally.

Hello, I’m Allie!•9mo ago

Could always have it open source, so that they can inspect/build it themselves?

quisi.do•9mo ago

I have the web page open source. 🙃

Gaming

Programming

How do you call the /user/tokens/verify API from the browser?