In udify.app, can't display external images because of CSP

langgenius / dify

Dify is an open-source LLM app development platform. Dify's intuitive interface combines AI workflow, RAG pipeline, agent capabilities, model management, observability features and more, letting you quickly go from prototype to production.

Other

49.47k stars 7.08k forks source link

Self Checks

[X] This is only for bug report, if you would like to ask a question, please head to Discussions.
[X] I have searched for existing issues search for existing issues, including closed ones.
[X] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
[X] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
[X] Please do not modify this template :) and fill in all the required fields.

Dify version

0.10.1

Cloud or Self Hosted

Cloud

Steps to reproduce

1.  Have the udify.app load an image from any external source (ex. loaded from markdown).
2.  Attempt to load the image, and observe the CSP error in the browser console.

✔️ Expected Behavior

External images should load without CSP violations, allowing for integration of external image sources as needed.

❌ Actual Behavior

External images are currently blocked by the CSP, preventing them from loading. Browser console error message: Refused to load the image 'https://omitted.omitted.fi/Cover/Show?id=kyyti.639346&index=0&size=large' because it violates the following Content Security Policy directive: "img-src 'self' data: mediastream: blob: filesystem: 'nonce-MDdlNWNlZjYtMzg0MS00ZjI0LTk0ZDAtNWZiNzM5ZjQwNmM3' .dify.ai .udify.app udify.app .cloudflareinsights.com .sentry.io http://localhost: http://127.0.0.1: https://analytics.google.com googletagmanager.com *.googletagmanager.com https://www.google-analytics.com https://api.github.com".

Hey @andrebalza! I'm here to help you with any bugs, questions, or contributions you have regarding udify.app. Let's work together to solve this issue!

To resolve the issue of external images being blocked by the Content Security Policy (CSP) in Dify, you need to modify the CSP settings to include the external domains you want to allow. This can be done by updating the CSP_WHITELIST environment variable in your configuration. This variable allows you to specify additional domains that should be permitted by the CSP.

Here's how you can do it:

Locate the .env configuration file in your Dify setup.
Find the CSP_WHITELIST parameter.
Add the external domains you want to allow for image sources to this list. For example, if you want to allow images from example.com, you would add it like this:
```
CSP_WHITELIST="*.sentry.io http://localhost:* http://127.0.0.1:* https://analytics.google.com https://googletagmanager.com https://api.github.com example.com"
```
Save the changes and restart your Dify application to apply the new settings.

This should allow external images from the specified domains to load without CSP violations.

To continue talking to Dosu, mention @dosu.

langgenius / dify