ckEditor - prevent base64 images

Question

I have a Primefaces ckEditor from primefaces extensions in my JSF application.

When a phone number is pasted in, it cleverly recognises it as a phone number and generates a little base64 image tag of a phone icon. There is nothing in the source to generate this, so it must be identifying the phone number as a phone number and is then adding a phone icon.

The issue is, this pasted text is then emailed out from the application at various points, and when the email hits Office 2007, the image cant be rendered as Outlook 2007 doesnt seem to like the base64 image types, and so the missing image icon is presented.

How can I prevent this automatic recognition of telephone numbers, and prevent the creation of any base64 type image creation after a paste operation.

 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAKLSURBVHjadJPfS5NhFMe/21xvuhXRyJAZroiSrJnbRdT7vrAf5HBaK5RABmEEwQIvkpZ/QRcWXdSFw5soKaF0F7qZeLO13mGBDpQsf5CoxVKHOt0Pctp2uvEdrzG/V+c553w/54HnPDIiQiGpPMETABoB2AAYd9MRAMMAvGmX+RcAyAoBVJ7gZQDtABworH4AHWmX+bOMZdkjCoXiUzabvcAwzPSsob5p/VTNY9GcdpnxdmYZ9wJThSCtCr1e/4XjuNPd3d1KjUZzaGbI27ysqzGQoggAsLa1A7ehArrDxfDNr0oBlQB+wmKxbJFEL968SxoamsjkHaPU9l9piUo6A0RE1DG2QCWdASrpDAzJM5kMI8XecdjVxfEl+K9dxFgsgUvvR6HyBKHyBAEATyKLeGSsENuNcqk5kUjEGm7fzcYqr0ClVODl99+YXEvl6+c1amjVe+ahiGGYaUEQKnmeh91uL43rqheixjpdmzCL11er0PcjhrTLvMfUJsyKYUSeyWQ6enp6tgCgrKxsfbP8bB8AdE1G89cOReMAgOv+Cag8QXRNRkXAsDwcDr+am5tLCYKA3t7eo2dG+1vVK/MfpRPtA+MIReMYaKj+/xm9MiICx3EmpVL5wefzFavValis1u1vvHMkdfykCQC0kSGUTo+Ajmnx1dSC7IGD+UUCEYGIwLKsyWazrSeTSSIiMpnNf7Ttz5+ec96fr7/VnE0mk+QfHMzV3WjcKH/4rEr05QGFIA6HY4llWRLPRER+v3/HYrFMFQSIkNra2tVQKJSlfcSyLO0LECFWq3XF6XRGA4HAptTsdrsXeZ6fEHtl+31nAOA4rkUulz/I5XL63dQGgHEAN8Ph8AYA/BsAt4ube4GblQIAAAAASUVORK5CYII=" style="margin: 0px; border: currentColor; left: 0px; top: 0px; width: 16px; height: 16px; right: 0px; bottom: 0px; overflow: hidden; vertical-align: middle; float: none; display: inline; white-space: nowrap; position: static !important;" title="Call: +44 (0) 1111 1111" />

Regards

i

score 0 · Answer 1 · answered Jul 10 '13 at 11:27

0

That's due to some extension in your browser.

Disable all the extensions and then enable them little by little to find out which one is the culprit.

answered Jul 10 '13 at 11:27

AlfonsoML

12,634
2
46
53

I can't. all IE9 settings are managed centrally and are locked down, so I need to strip out the HTML base 64 image tags somehow. Happens also in Chrome – smackenzie Jul 10 '13 at 12:26
If it happens in two different browsers then it might be some plugin that it has been added to your CKEditor install, but we have no way to know what's on your server. – AlfonsoML Jul 10 '13 at 15:24
it happens before it hits the server, straight on the paste in the ckEditor control. – smackenzie Jul 10 '13 at 15:38
Great!, it's not a server issue. Now you should check the plugins that you're using in CKEditor as I said. – AlfonsoML Jul 10 '13 at 16:29
I am using primefaces extensions...not sure how I would check what plugins they are using...stripping them out before I persist...seems easier all round. – smackenzie Jul 10 '13 at 17:00
also, don't think its CKEditor related....I notice when I open up Outlook Web Mail it adds the same icon to phone numbers....which are not present when you open the email in plain Outlook client...! – smackenzie Jul 10 '13 at 17:03

score 0 · Answer 2 · answered Jul 10 '13 at 16:59

I am stripping these out at the point of save now with a regexp...couldnt intercept the paste event of the ckEditor.

public void setAutoSignature(String autoSignature) {

        //strip out base 64 img tags which can appear when phone numbers identified and phone icon appears 
        String pattern = "<img\\s[^>]*base64[^>]*>";
        autoSignature = autoSignature.replaceAll(pattern, "");

        this.autoSignature = autoSignature;
    }

score 0 · Answer 3 · answered Apr 16 '20 at 14:41

0

This is a related post on StackOverflow that may fix the issue: https://stackoverflow.com/a/23101048/2808203 In the plugin.js add the Javascript and modify if only needing to block base64 images.

answered Apr 16 '20 at 14:41

Darrell Ulm

132
1
2
11

ckEditor - prevent base64 images

3 Answers3