Embedded images are not displayed

[gsantner]

Hey!
I tend to embed images into my Markdown documents. This has been shown to work well in the past as I could easily move my documents between different markdown applications, without having to care about asset files and file/http references.

However this does not work at Pico CMS.

Example

Document: 2020-05-05-brettspiele-kartenspiele-offline.md

PicoCMS

---

ruby-kramdown / jekyll

---

Content

---

Pandoc

---

Pico output html

img src / ![img]() was stripped

Version info

I have the PicoCMS that is bundled with NextCloud. CHANGELOG.md in the picocms folder mentions 2.1.4 on top, so guess this is the release version used.

[mayamcdougall]

Hey @gsantner,

I just downloaded your example file and gave it a test. It worked fine for me:

I'm not really sure what the issue is here, but it definitely should be working. I tested it using the standalone release of Pico (it's what I already had deployed for testing). I'm not sure what differences there are, if any between the standard and Nextcloud versions of Pico though. It could also be a difference somewhere in the rest of your stack (like the PHP version for instance), but unfortunately that's all a bit outside of my expertise.

@PhrozenByte, do you have any idea what could cause this issue?

[PhrozenByte]

This is caused by Pico CMS for Nextcloud: data URLs are removed by HTMLPurifier for security reasons. However, I'm not aware of any security implications for images (except SVGs maybe), so we probably can lower HTMLPurifier's defaults here. Will look into this and create a new release of Pico CMS for Nextcloud then.

[gsantner]

Should I recreate the issue in a nextcloud pico repo? But guess you have the ability to move the issue anyway as well

[PhrozenByte]

Fixed in https://github.com/nextcloud/cms_pico/commit/eb2609af65cdc2c294aebae8b8162ef234e76112, you can give it a try. However, please note that you can't use WebP images. HTMLPurifier unfortunately can't validate images of this type, you'll have to use PNG, JPEG or GIF instead. You might wanna ask ezyang/htmlpurifier whether they want to implement this.

[gsantner]

thanks for quick fix.

though bad to hear as it not fixes it for my use. because 99% of my markdown documents have webp embedded (for size). Not a single png/jpg

[PhrozenByte]

You might wanna switch to Pico (w/o Nextcloud), no limitations there :smiley:

[gsantner]

Well then I have to care about file management & deployment to server again :D.

Just want to see how it could work like with just nextcloud, without me having to think off deploying the files from git

[PhrozenByte]

Not necessarily. If you're the only user, you could simply mount Pico's content and assets dir in your Nextcloud using Nextcloud's official files_external app. No integration features are available then, but file management & deployment is solved.

[mayamcdougall]

+1 from me on that approach too.

I used to accomplish this a while back by simply simlinking my Pico folders from Nextcloud. If I'm remembering right, the original files had to live in Nextcloud because it would either ignore or overwrite symlinks. I wasn't using files_external though, Nextcloud was completely unaware I was doing anything special.

But this was hands-down the best setup I ever had for deploying pages!

I could save a file locally and have the changes almost instantly reflected on my server.

I'm assuming that Pico for Nextcloud offers a similar experience (I've never used it), but doing it manually worked great for me for years.

My current git-based approach also leaves a lot to be desired, so I hear you there. (Unfortunately for me though, I'm not using Nextcloud at the moment.)

But yeah, I'd definitely recommend this solution if it sounds like it fits your use case.

[gsantner]

Me neither (using nextcloud yet), so far on all ends issues and bugs getting into the way.

I'm evaluating it currently, and privacy issues here, password leaks there, no automatic file sync for android there, this one with pico...the list goes on and on ^^

[mayamcdougall]

Ah, my bad, I just assumed that if you started with the Nextcloud version of Pico, you were probably already using it. 😅

There's plenty of file syncing solutions out there though. If the automatic syncing appeals to you, you could try something lighter like Syncthing. Whatever solution you decide on, just sync your content and assets folders with it and you should be good (or maybe just content in your case). Since you can't generally run code from these folders, it ends up being a decent balance of convenience and security on the Pico side of things. 😉

Anyway, good luck with your search and let us know if there are any other questions we could answer for you. 😁

[gsantner]

I use syncthing + jekyll currently :D. Wanted to see if I can get something superior with NextCloud-only by now.

As said, may be better to recreate the bug report on nextcloud repository? Looks not like there anything Pico developers can do about the issue :D

[PhrozenByte]

As said, may be better to recreate the bug report on nextcloud repository? Looks not like there anything Pico developers can do about the issue :D

Doesn't make much of a difference whether I answer you here or there :laughing:

We can't do anything about this. Pico CMS for Nextcloud is designed to allow arbitrary users to create websites, thus we can't allow them to use any active content (like JavaScript), otherwise we would create a whole lot of security issues. For this reason we use HTMLPurifier in Pico CMS for Nextcloud, that removes any potentially insecure contents. I'm pretty sure that embedding a WebP image is no security issue at all, but HTMLPurifier simply doesn't know this rather new format - and thus removes it. As I said, you can head over to the developers of HTMLPurifier and ask them whether they add WebP support - if they do, Pico CMS for Nextcloud will support it, too.

Anyway, from your comments I assume that you don't actually want arbitrary users of your Nextcloud to create their own websites, you just want to use this for yourself, right? In this case you won't need Pico CMS for Nextcloud, using the app has no significant advantage for you. The only thing you have to do is to sync Pico's content and assets dir with your Nextcloud. Just install Pico (as explained here in this repo) and sync both folders with your Nextcloud. You can either use Nextcloud's files_external app, or, as explained by Maya, symlink the folders. This solves all your issues, embedding WebP images will work just fine then. Just give it a try :+1:

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in two days if no further activity occurs. Thank you for your contributions! :+1:

[gsantner]

@PhrozenByte

Thanks for help, I've reported the issue on htmlpurifier repo. And if I see correctly it's just one line of additional change required to add webp to a array.

Is there a release out at NextCloud-pico already with your change included? If so, I would test it with just that one line of change 😄

Also tried with clone your repo, replacing the store one, installed packages with composer and chowned by www-data, but all I get with all pico nc websites is a completley blank white page.