docs: Content-Security-Policy and loading HTML apps with Artifacts (#158)

I put LibreChat on a VPS and was trying out the Artifacts feature but noticed the apps wouldn't load. The right panel would show:

```
"This content is blocked. Contact the site owner to fix the issue."
``` 

and then

```
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 or submit an issue on GitHub.

ENV: create-react-app
ERROR: TIME_OUT
```

I updated my web server's Content-Security-Policy to include `frame-src 'self' https://*.codesandbox.io` and that fixed the issue. I figured I would document that here for others.
This commit is contained in:
Josh Campbell
2024-12-03 14:21:02 -08:00
committed by GitHub
parent ba4151d53e
commit a058b0d3bd

View File

@@ -24,6 +24,10 @@ description: Discover LibreChat's revolutionary Artifacts feature for instant cr
Experience the future of UI/UX design and development with LibreChat's generative capabilities. Bring your ideas to life faster than ever before!
## Content-Security-Policy
You may need to need to update your web server's Content-Security-Policy to include `frame-src 'self' https://*.codesandbox.io` in order to load generated HTML apps in the Artifacts panel. This is a dependency of the [sandpack](https://sandpack.codesandbox.io/) library.
---
AI News 2024: The Original and BEST Open-Source AI Chat Platform, LibreChat Releases Code Artifacts! This Generative UI Tool Can Generate React, HTML & Diagrams Instantly from a Single Prompt in Your Browser with Any LLM, OpenAI, Anthropic, LLAMA, Mistral, DeepSeek Coder & More Thanks to OLLAMA Integration.