Spyke
piefed_help·PieFed helpbypathwonder

Displaying Images From View Community

Sorry, new guy here.

So about images, on my desktop browser, when I click just on the thumbnail to the side, I'm expecting the image to display. But the image loading graphics just keep looping without any image.

If I click the post, the image typically displays as expected.

On Voyager, tapping the thumbnail loads the image to the screen as expected.

View original on kopitalk.net
11
Comments5
wjs018
piefed.social

So, I just visited your instance and there is definitely an issue...but I am not sure I will really be of much help. When I click an image, it looks like the lightbox javascript is being blocked by the CSP. Here is what I see in the browser console:

The CSP that ships with piefed should allow the lightbox to run without issue. Perhaps there is a reverse proxy or CDN applying a stricter CSP? Maybe a browser plugin of some kind?

This kind of web admin stuff isn't really my area of expertise though.

4
Rimureply
piefed.social

That's it, yes.

If we use the browser dev tools to look at the CSP header that the HTML page returns, we can see that piefed.social has a different one than kopitalk.net. Below is piefed.social's one:

It's probably cloudflare or nginx causing that.

3
pathwonderreply
kopitalk.net

#solved

EDIT: 2025-10-25 at 11h29 - I deleted the Content-Security-Policy and PieFed displays images as expected.

Reasoning

So after crawling through some very old Reddit posts, I came across other self-hosters discussing their new found interest in Security Headers from 5 years ago (dated, yes). Among the comments was a post by pentesticals (glorious):

::: spoiler quote

Don't stress about security headers and CSP. These are there to help provide additional protection against client-side issues which may or may not be present.

These will not have any direct impact on your services you expose, rather they aim to be a last resort to protect your browser in case an attacker tries to exploit existing vulnerabilities such as a Cross Site Scripting - but not having these does not increase the risk of your server being compromised.

Use Nessus Essentials for scanning your services and have fun.

:::

https://www.reddit.com/r/selfhosted/comments/mpzl8f/any_recommendations_for_security_scans/

I use Caddy and I can indeed see the security headers that involve CSP. How should this setting be amended?

For what it's worth I looked over the "Using Caddy as reverse proxy" for Lemmy, and I notice that they just don't use the Content-Security-Policy option at all. I'm wondering if I should simply delete this Header for PieFed.

https://join-lemmy.org/docs/administration/caddy.html

::: spoiler Security Headers

(security_headers) {  
  header {  
    Strict-Transport-Security "max-age=31536000; includeSubDomains"  
    X-Content-Type-Options "nosniff"  
    X-Frame-Options "SAMEORIGIN"  
    Referrer-Policy "no-referrer"  
    X-XSS-Protection "1; mode=block"  
    Permissions-Policy "camera=(), microphone=(), geolocation=(), accelerometer=(), autoplay=(), fullscreen=(), gyroscope=(), interest-cohort=(), magnetometer=(), payment=()"  
    -Server  
    -x-powered-by  
  }  
}

:::

1
Rimureply
piefed.social

Yes when CSP was new it may sometimes have been beneficial to add them (although most of the time it would cause breakage) but these days most web apps will be setting that header themselves in a way that is appropriate for the app.

3

You reached the end

Displaying Images From View Community | Spyke