ardatan / ardatan/graphql-mesh
CORS regex origins work in Firefox but not Chromium-based browsers
- 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