Image galleries and CSPs (v2.9.1+)

Hello,

As of Ghost version 2.9.1 I’ve found there are problems with the image gallery card. I’m able to upload images (and they appear on the filesystem of my web server) yet the gallery card appears to be empty. If I upload the same image to a single image card it uploads correctly.

This has definitely worked correctly on my server before (I self host) as I’ve used it here.

I’m now using Ghost version 2.11.1 and the problem appears to remain.

To reproduce:

  • Create a story
  • Insert a gallery card
  • Chose one image for the gallery (problem also exists with 2 images, not tested further)
  • The image appears briefly in the gallery during the upload but then doesn’t show on the page
  • Captions remain
  • Files are uploaded to the web server

Are others having the same problem? If so I’m happy to raise an issue on Github, but wanted to check I wasn’t doing anything silly.

Thanks in advance,

Jonathan

Which browser and browser version are you using? Is this repeatable every time? Do you see any errors in the web inspector “Console” tab when uploading (right-click the page and choose “Inspect” to open the web inspector)?

Hi Kevin,

Apologies, I really should have included that in my message. Testing now with Firefox Quantum 64.0.2 (64-bit) (on Windows 10)

I see a response of “/content/images/2019/01/HarbledownJunctionStourBridgeDemolition.jpg” on a POST to /ghost/v2/admin/uploads (HTTP 201) and we can see here that the image uploaded successfully.

Chrome gave more details in its network when I tested with that. The problem is down to my content security policy:

Content Security Policy: The page’s settings blocked the loading of a resource at blob:https://blog.jonsdocs.org.uk/9ffed853-11fb-4e05-94ac-9f3ea74f0ee5 (“img-src”).

I’ll change my HTTP security headers when I get home (can’t from here) to allow that, then report back.

Apologies for not providing sufficient information initially. Hadn’t thought to check the headers given individual images work (I’m guessing those are handled differently?).

Changing my Content Security Policy seems to have resolved the issue.

The img-src attribute needs to include “blob:”.

I’ve updated the title of this post to reflect the fact the issue was the CSP, not Ghost, so hopefully this solution will help people.

Many thanks for the reply :slight_smile:

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.