CDN: Improve Cross-Origin Resource Sharing (CORS) and cache headers

[Daniel-H123]

1. What is not working as documented?

I am currently facing an issue related to CORS while attempting to load fonts from a different CDN hostname, which is routed through Cloudflare. According to the documentation provided here, I expect the fonts to load successfully, but it seems there is a CORS-related problem preventing their loading.

2. How can we reproduce it?

Steps to reproduce the behavior:

1. Use a different CDN hostname routed through Cloudflare.
2. Attempt to load fonts from this CDN hostname.
3. Observe the CORS-related blockage in DevTools, preventing successful font loading.

3. What behavior do you expect?

Successful loading of fonts with Access-Control-Allow-Origin header set to PHOTOPRISM_SITE_URL variable.

4. What could be the cause of your problem?

Access-Control-Allow-Origin header not set.

5. Can you provide us with example files for testing, error logs, or screenshots?

6. Which software versions do you use?

Latest release

7. On what kind of device is PhotoPrism installed?

Windows Server 2019, 32GB ram, I7 4790k

8. Do you use a Reverse Proxy, Firewall, VPN, or CDN?

Yes, Synology reverse proxy, but tested without and headers are not present either.

[lastzero]

@Daniel-H123 Note that the CDN config options are intended for users who run a public server and additionally want to use a CDN to serve static content such as frontend assets, thumbnails, and videos. An example of this would be our public demo at https://demo.photoprism.app/.

Cloudflare users typically use the service as a reverse proxy ("web application firewall") to make their private server publicly accessible over the internet. In this case, you don't need to configure an external CDN, which might resolve your issues?

[lastzero]

I've added a note regarding the use of Cloudflare to our docs:

• https://docs.photoprism.app/getting-started/using-a-cdn/#cloudflare

[Daniel-H123]

@Daniel-H123 Note that the CDN config options are intended for users who run a public server and additionally want to use a CDN to serve static content such as frontend assets, thumbnails, and videos. An example of this would be our public demo at https://demo.photoprism.app/.

Cloudflare users typically use the service as a reverse proxy ("web application firewall") to make their private server publicly accessible over the internet. In this case, you don't need to configure an external CDN, which might resolve your issues?

Understandable, but using Cloudflare for the website as a whole, didn't work for me because Cloudflare limits the amount of websocket connections for free users, so it was pretty unreliable.

I've added a note regarding the use of Cloudflare to our docs:

• https://docs.photoprism.app/getting-started/using-a-cdn/#cloudflare

While this would resolve the issue, I still see the benefits of supporting the modification of the Access-Control-Allow-Origin header. As you can see on this website, Cloudflare also offers caching and performance optimisations, especialy for static resources. Also Photoprism doesn't need any more configurations at all for this type of use. The images load in perfectly, and the fonts will load in for sure if the headers are set correctly.

I'm very new at GO, but i've tried to help you by creating a base structure for it. It probably needs a setting in the docker enviroment, but i'll leave that up to you.

PR: #3940

[lastzero]

@Daniel-H123 You can test the changes referenced above by using the photoprism/photoprism:test image provided on Docker Hub. It will:

1. Ignore any configured CDN URL if it is the same as the site URL, minimizing the impact of configuration mistakes.
2. Add a PHOTOPRISM_HTTP_CORS config option that sets the Access-Control-Allow-Origin header to * if it is set to "true", e.g. PHOTOPRISM_HTTP_CORS: "true".
3. In addition, if PHOTOPRISM_HTTP_CORS is not set, the server automatically checks whether an Origin header is present and, if so, sets the Access-Control-Allow-Origin header to the same value so that Cross-Origin Resource Sharing (CORS) should also possible.

Note that 3. was implemented for testing purposes only, as it is generally not safe unless the origin is checked against a list of allowed origins - so either such a check must be added or the code must be removed again.

Please let me know if this helps you get it working with Cloudflare and if not, what additional changes would be needed. Thank you!