Mautic 3.x Gmail 404 broken image for images with spaces because of + instead of %20

[weismannweb]

[//]: # ( Invisible comment: IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII Before you create the issue: IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII Search for similar report among other reported issues. Learn how to troubleshoot at https://www.mautic.org/docs/en/tips/troubleshooting.html Use drag&drop to attach images or other files )

Bug Description

So gmail uses a proxy to cache and show images in emails when viewed in the gmail online web client. I think this happens in thunderbird too if using gmail but im not sure. So gmail converts this:

https://foo.com/media/images/grapesjs/Actress%20FB.png (basically a space: "Actress FB.png")

to this:

https://ci5.googleusercontent.com/proxy/hPdUa87WfRmi36f09yr7WmpU5hIsrKVQfMzDjvEcnlCL7LOW9oFO044mDT2PbvHBieB2VFPTK4pSagAccxAvIcq4MuLY3unB5Cpgu9j2MHXLvcVtkTNdWyfvT9KU=s0-d-e1-ft#https://foo.com/media/images/grapesjs/Actress+FB.png

This happens in the new grapejs builder but I imagine unless the other builders convert spaces in urls on upload then the other builders have the same issue.

So the issue is that the image gives a 404 because this "Actress+FB.png" does not exist but this does "Actress FB.png" but thats not the image being requested by Gmail.

A quick fix is to rename the image or copy it and replace spaces with"+".

A long term fix is probably for all upload routines to editors it should replace spaces with - since its bad to upload files with spaces anyway as it is a bad web practice. The problem is mautic end users don't know this and you cant control them so you have to hold their hands a little by doing it for them. The other fix might be some kind of htaccess rule? Not really sure if that's possible.

Q	A
Mautic version	3.x.x
PHP version	7.3
Browser	chrome

Steps to reproduce

1. send email using grape js (maybe other builders) to a gmail address with image that has space in the name.
2. see image does not show in gmail

Log errors

[//]: # ( Invisible comment: Please check for related errors in the latest log file in [mautic root]/app/log/ and/or the web server's logs and post them here. Be sure to remove sensitive information if applicable. )

[npracht]

Hi @weismannweb ! You confirm you use a third party plugin for your emails ? Your image URL is https://foo.com/media/images/grapesjs/Actress%20FB.png but grapesjs is not integrated in mautic.

[weismannweb]

Ohh i thought grapejs was packed with mautic already. Yeah maybe I did install it and its not core code. Anyway yes it is

https://github.com/Webmecanik/plugin-grapesjs-builder

But unless your freola version of the builder fixes spaces it probably has the same issue. I will test and report back.

[npracht]

thanks

[weismannweb]

yes the normal editor renamed the file:

https://ci3.googleusercontent.com/proxy/FZ3B0M0T-1RXmIlFge48m-HQeWl41D_Wj6i6l27B3WIqJiLLnFcboqXr-yaMscH5ktJy0IJcKCTuHdLLV4oFoPgb0deertd1Jzgokab1mUA4btOBG5szIpsBUSU2YP8GeSRJxhjV=s0-d-e1-ft#https://foo.com/media/images/06d1e70be798d8c18969c6acb17466aa.png

I guess I should report this in https://github.com/Webmecanik/plugin-grapesjs-builder instead.

[weismannweb]

I was under the impression this https://github.com/Webmecanik/plugin-grapesjs-builder was in line to be in the core at some point though. Is that true? It kind of stopped progress a couple months ago.

[npracht]

Yes please open the issue on the other repository. Concerning the integration in core, this is something under discussion but it needs extra work before we can do it.

Thanks