ardatan / ardatan/graphql-mesh

CORS regex origins work in Firefox but not Chromium-based browsers

Open
#6,497 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
3.5k
Forks
363
Avg merge
6h 10m
Merged PRs (30d)
19

Description

### Issue workflow progress

_Progress of the issue based on the
[Contributor Workflow](https://github.com/the-guild-org/Stack/blob/master/CONTRIBUTING.md#a-typical-contributor-workflow)_

- [ ] 1. The issue provides a reproduction available on
[Github](https://github.com/Urigo/graphql-mesh/tree/master/examples/hello-world),
[Stackblitz](https://stackblitz.com/github/Urigo/graphql-mesh/tree/master/examples/hello-world)
or
[CodeSandbox](https://codesandbox.io/s/github/Urigo/graphql-mesh/tree/master/examples/hello-world)

> Make sure to fork this template and run `yarn generate` in the terminal.
>
> Please make sure Mesh package versions under `package.json` matches yours.

- [ ] 2. A failing test has been provided
- [ ] 3. A local solution has been provided
- [ ] 4. A pull request is pending review

---

**Describe the bug**

In Chromium-based browsers (tested Brave and Chrome), regex patterns for allowed origins fail validation with the following in the browser console:

```
Access to XMLHttpRequest at 'http://localhost:5000/graphql' from origin 'http://localhost:3000'
has been blocked by CORS policy: Response to preflight request doesn't pass access control check:
The 'Access-Control-Allow-Origin' header contains the invalid value '/https?:\/\/localhost:\d{4}/'.
```

In Firefox, the requests succeed successfully (HTTP 200).

**To Reproduce**

Steps to reproduce the behavior:

In a Mesh config file (e.g. `.meshrc.ts`), add the following config:

```ts
const meshConfig = {
serve: {
cors: {
credentials: true,
allowedHeaders: ["Content-Type", "Authorization"],
exposedHeaders: ["Access-Control-Allow-Origin"], // for debugging
origin: [/https?:\/\/localhost:\d{4}/]
}
}
}
```

Run the Mesh server (`mesh dev`). From an app running in the browser on any localhost port, make a request to the Mesh server in a Chromium-based browser and check the console for CORS origin errors.

**Expected behavior**

Expected CORS validation to pass in Chromium-based browsers.

**Environment:**

- OS: Arch Linux kernel 6.7.0-arch3-1
- `@graphql-mesh/cli`: ^0.88.5
- NodeJS: v20.8.1

**Additional context**

CORS `Access-Control-Allow-Origin` can only be a wildcard or an exact URL (see https://stackoverflow.com/a/44071913). To work around this, some projects that abstract the server (much like Mesh does), such as [micronaut](https://github.com/micronaut-projects/micronaut-core), allow regexes to be used for CORS via special config (see [here](https://github.com/micronaut-projects/micronaut-core/issues/9423)).

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the `.meshrc.ts` CORS configuration shown in the issue and reproduce it by running `mesh dev`, then make a request from a localhost app in Chrome or Brave. Trace how the `origin` regex is turned into the `Access-Control-Allow-Origin` response header. Done means the same regex-based configuration passes CORS validation in Chromium-based browsers without breaking the Firefox behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, typescript
Domain
api, security
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.