Web App Manifest blocked by CORS when hosted behind authentication

Open
#1,802 11 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
38/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript
Domain
web-dev

Research direction

Locate the template for the generated index.html file and inspect how the manifest link is emitted. Reproduce the issue with the starter app behind authentication, then verify that the authenticated manifest request succeeds with the expected credentials behavior.

Written by the indexing model from the issue text.

Description

Resolution: Needs Investigation

Stencil version:

@stencil/core@1.2.3

I'm submitting a:
[x] bug report
[ ] feature request
[ ] support request

Current behavior:
Currently, when deploying a Stencil site / app to a host behind authentication, the manifest file fails to load with the following error:

Access to manifest at 'https://path.to/my-site/manifest.json' from origin 'https://path.to' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Expected behavior:
The manifest should be loaded with crossorigin="use-credentials" so that the browser sends the auth credentials when requesting the manifest. See MDN for details.

Steps to reproduce:

  1. Deploy the starter app to a location that is behind authentication.
  2. Open DevTools and observe that the manifest does not load due to a CORS error.

Other information:
I'm not sure where the template for the generated index.html file lives, but I believe this fix should be as simple as changing:

<link rel="manifest" href="./manifest.json">

to

<link rel="manifest" href="./manifest.json" crossorigin="use-credentials">
Dominant language
TypeScript
Stars
13.1k
Forks
855
Avg merge
4h 7m
Merged PRs (30d)
44

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from stenciljs/core

All issues in stenciljs/core

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.