How to display base64 images in Item Picker using markdown?
I am trying to embed base64 images in an Item Picker in GVH. Image urls works, but base64 fails.
The syntax that works fine looks like
this:
The syntax that fails (the base64 string
shows as text in the item picker):
Is base64 supported at all within the
Item Picker/GVH? If yes, a sample syntax will be much appreciated!
-
Hi Martin,
I think you're along the right lines. Workflow uses remarkable to parse markdown. There is a live demo where you can test it directly. You must check "CommonMark strict" to match our configuration.
I found an example in a forum that works in the live demo. It's a bit unhelpful that the alternate text matches the image, but you can change the alternate text and confirm that it still shows an image of "Hello World".
So, all that said, I expect it should work in your item picker.
0 -
Thank you Ken!
I have tried the live demo as you suggested. It works fine to display base64 encoded images there, even when CommonMark strict is checked.
However, pasting the same definition into a workflow does not give the same result. The base64 encoded image is not recognized, and the string is shown instead... For the record, I have tested using both Text element and Item picker.
This code works:
Substituting the image url with the equivalent base64 encoded image works like a charm in the live demo, but unfortunately not in workflows. I have limited the testing to the designer and sandbox.
I also testet the Hello World example, but it gave the same result.
0 -
Martin,
I used this example in the Image element property url:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
Then you see a red dot in the workflow sandbox
Erik
0 -
Or try:
data:image/png;base64,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
Generated by this site: https://www.base64-image.de/ the image of workflow.
Erik
0 -
Thanks Erik!
Yes, I have also tried this (sorry that I didn't mention this in previous posts).
Unfortunately this does not solve what I am trying to achieve. I cannot, as far as I can see, use an Image element within an Item Picker. The only way is to use markdown, and the ![]() syntax.
Martin
0 -
Martin,
I see what you mean. I can get the URL part working. But as soon as I use base64 encoding it does not work any more. Looks like it is not implemented!
Erik
0 -
Hi guys,
Thanks for the additional information. I took a closer look and stepped through the code. Workflow is passing in the correct text to remarkable, but for some reason it's not converting the link. It might need some further investigation to determine if there's something we're missing in the configuration.
Certainly, it's odd that it works in their demo but not in Workflow. We are using the latest version, and I expected the behaviour to be identical. I'll log a bug in our backlog.
0 -
You can test this more simply in a "Text" form element. I found that if I started with something like:
![test]()And gradually typed the url one character at a time, it rendered as an image until I had typed:
At which point, it changed to show the literal markdown instead.
This is likely a security feature of remarkable blocking data urls to prevent cross-site scripting.
I will note this in the bug and see if we can find a way to safely enable it for svg images.
0 -
I have a small update on this issue.
Firstly, the cause of the problem is that remarkable considers "data:" urls to be a "bad protocol". There was no explanation accompanying the change, but I assume it is to prevent security problems with loading scripts via data urls.
Secondly, I have learned that the "Remarkable demo" page uses remarkable v1.6.0, which is quite old. We are using remarkable v2.0.1 which is the latest version. I have asked them to update their demo page, but have not heard anything back. Sadly, we cannot rely on the demo page being identical to Geocortex Workflow.
We could potentially add our own validation logic for urls in order to address this.
It would likely involve us allowing "data:" urls when the datatype starts with "image/". I can't give an estimate at this time of when this will be implemented, but I would suggest you add it to the ideas page and we can see how many people vote for it.
0 -
Hi everyone,
I've learned that the W3C's CSP2 recommendation for content security states that "data:" urls allow cross site scripting attacks, and consequently should not be allowed.
For this reason, we will not be enabling this functionality in Geocortex Workflow.
0 -
Thanks for the update, and for looking into this Ken! The decision not to support the data: protocol is quite understandable, given the vulnerability you are referring to.
0
Du måste logga in om du vill lämna en kommentar.
Kommentarer
11 kommentarer