[Bug]: Visuals stopped working with recent upgrade

[kapustor]

What happened?

We have a setup with a Nginx server with self-signed certificates pointing to Linrechat. The setup worked great (even though the browser warned that the connection is not secure, etc). Visuals also worked great.
However after a recent upgrade visuals stoped working with error:

Couldn't connect to server

This means sandpack cannot connect to the runtime or your network is having some issues. Please check the network tab in your browser and try again. If the problem persists, report it via [email](mailto:hello@codesandbox.io?subject=Sandpack%20Timeout%20Error) or submit an issue on [GitHub.](https://github.com/codesandbox/sandpack/issues)

ENV: static
ERROR: TIME_OUT

There are also errors in the browser like:

index.rWGKSrFj.js:2 Token is not present. User is not authenticated.
:3071/login:1 Uncaught (in promise) SecurityError: Failed to register a ServiceWorker for scope ('https://100.68.126.18:3071/') with script ('https://100.68.126.18:3071/sw.js'): An SSL certificate error occurred when fetching the script.
new:1 Refused to load the image 'https://lh3.googleusercontent.com/a/ACg8ocKSCFSSs7b8_r3FtImJI78N3btNHe9QogE9MR9v5xjAXLCN0oCI=s96-c' because it violates the following Content Security Policy directive: "img-src 'self' data:".

index.rWGKSrFj.js:2 Parameters processed successfully 
e88d5516-e900-459c-9855-72f82394ed03:1 Refused to load the image 'https://lh3.googleusercontent.com/a/ACg8ocKSCFSSs7b8_r3FtImJI78N3btNHe9QogE9MR9v5xjAXLCN0oCI=s96-c' because it violates the following Content Security Policy directive: "img-src 'self' data:".

vendor.BIxDWwK1.js:140 Refused to frame 'https://26ccca124b9d960-preview.sandpack-static-server.codesandbox.io/' because it violates the following Content Security Policy directive: "frame-src 'self' https://challenges.cloudflare.com https://codesandbox.io".

about:blank:1 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.

Seems like the same problem occurs not only with self signed certs, but also with some ALBs - our public deployment (https://llm.clickhouse.com) is also affected - I cannot upgrade it to the latest version.

Version Information

2a3bf25

Steps to Reproduce

1. Upgrade to the recent vertion with git pull with a self-signed certificate
2. Try to output any visual

What browsers are you seeing the problem on?

Chrome

Relevant log output

There is no specific log output, only the browser one that I provided above.

Screenshots

Code of Conduct

• I agree to follow this project's Code of Conduct

[kapustor]

Can it be related to this? If yes, can we make this change optional, controlled by a parameter, etc?

[djuillard]

I do not know wether it is related, but after upgrading this morning I had an issue when uploading images. No error in the logs, but the chatbot was like frozen.

I had to re-deploy an older librechat docker image to make it work again.

[rubentalstra]

@kapustor yeah that's me. Please explain what is not working and how it should work. I'm trying to make the application more secure.

[kapustor]

@rubentalstra not sure what other details to provide in addition to the issue body. Seems like the most close error is:
vendor.BIxDWwK1.js:140 Refused to frame 'https://26ccca124b9d960-preview.sandpack-static-server.codesandbox.io/' because it violates the following Content Security Policy directive: "frame-src 'self' https://challenges.cloudflare.com https://codesandbox.io".

Why can we have this error with your update?

[rubentalstra]

I forgot to make it https://*. 😅

[rubentalstra]

@kapustor if you can. Please create a PR and update the value to:

https://*.codesandbox.io

I'm not in the ability to create a PR right now😅

[kapustor]

@rubentalstra seems like it fixes the visuals, but pictures (user avatars and others) are not working with the same error:

[kapustor]

Same if I try to upload an image to the chat (when my private IP is used):

@danny-avila isn't it better to roll back this PR as it breaks quite many things?

[danny-avila]

isn't it better to roll back #7377 as it breaks quite many things?

Hi @kapustor 👋

In my opinion, it's better to keep and maintain Content Security Policy for many reasons. However, the current implementation is not configurable, so I will remove it for now, as it's also not taking into account many different existing configurations such as CDN's and the full scope of sandpack domains (custom or not).

Will remove its usage for now until we have a better version of it. Thanks.