Ticket #13199 (closed Bug: fixed)

Opened 19 months ago

Last modified 16 months ago

image in data URIs filtered only on output, bloats object and database

Reported by: khink Owned by:
Priority: minor Milestone: 4.x
Component: Visual Editor Version: 4.2
Keywords: patch Cc:

Description

In RichText fields on dexterity content types, data URIs are filtered on output but are stored in the database. In the case of images, this will make the objects and database grow at an enormous rate.

Some browsers will create an image with data URI when an image is dragged from the desktop into the visual editor area. I've seen this for Safari on Mac OSX, and for Firefox 15.0.1 on Ubuntu 12.04.

To reproduce the behavior on any browser:

  • start with a Plone 4.2.1 with plone.app.dexterity installed
  • enable dexterity, create a content type with a RichText field
  • create an object of the new type
    • drag an image from the desktop into the text if your browser supports it
    • alternatively, edit HTML for the text field, and insert <a href="data:text/html;base64,PHNjcmlwdD5hbGVydCgidGVzdCIpOzwvc2NyaXB0Pg==">click me</a> (code from test_xss.py in PortalTransforms)
  • after saving, the link content is stripped on output and does not show on screen (which is okay)
  • stop the zope instance and inspect the object with ./bin/instance debug: obj.textfield.raw has the entire html. in the case of an image, this would be quite big.

Change History

comment:1 Changed 19 months ago by kleist

  • Status changed from new to confirmed
  • Component changed from Unknown to Dexterity

comment:2 Changed 19 months ago by khink

Update: My initial example was for dexterity, but behavior is the same for AT. You can showcase it thus in a standard Plone 4.2:

  • start with a Plone 4.2.1
  • modify the /front-page object:
    • drag an image from the desktop into the text if your browser supports it
  • after saving, the link content is stripped on output and does not show on screen (which is okay)
  • 2 ways to see the image is still there:
    • edit the frontpage again, the image will show up.
    • stop the zope instance and inspect the object with ./bin/instance debug. Do page = app.Plone.get('front-page'); page.schema.get('text').getRaw(page) and it will show the image data.
Last edited 19 months ago by khink (previous) (diff)

comment:3 Changed 19 months ago by khink

We solved it by adding the setup parameter to the JS file that handles our TinyMCE settings:

        setup : function(ed) {
	           ed.onSaveContent.add(function(ed, o) {
	               // find all img's with src=data:image
	               var pattern=/\<img[^>]*src=[^>]*data:image[^>]*\/\>/g;
	               var filtered=o.content.replace(pattern, '');
	               o.content=filtered;
	           });
	        },

This will allow images to be dragged into the visual editor, but on saving, the image will be filtered.

The link  http://stackoverflow.com/questions/10720964/tinymce-callback-handler-on-image-dragdrop has some info on disabling dragging an image into the visual editor.

Maybe something similar could be done for Products.TinyMCE.

comment:4 Changed 19 months ago by khink

We might insert this code in tiny_mce_init.js, see  https://github.com/plone/Products.TinyMCE/tree/khink-filter-data-images-13199 This branch is based on the 1.2.x branch, so Plone 4.2.

In its current state it's a crude fix: It gives no error message, but just removes the image. It does so when the save button is clicked, so people might wonder where their image has gone. Some other people might object.

I'd like to add a test, but how do we test TinyMCE?

If all this goes through, we shouldn't forget to check it in Plone 4.3 as well. (A little different: 4.3 uses the master branch of P.TinyMCE, there's no tiny_mce_init there.)

comment:5 Changed 19 months ago by khink

  • Component changed from Dexterity to Visual Editor

Setting Component to "Visual Editor"

comment:6 Changed 17 months ago by khink

Sent a pull request, maybe that will create some action.  https://github.com/plone/Products.TinyMCE/pull/39

comment:7 Changed 17 months ago by kleist

  • Keywords patch added

comment:8 follow-up: ↓ 9 Changed 17 months ago by schrei5

I think this is a incredible useful feature. Sure the documents might get big. But I think the right thing to do here would be to automatically create a (blob) image and replace the src attribute with the url to this image.

My users really want this functionality.

comment:9 in reply to: ↑ 8 Changed 17 months ago by khink

Replying to schrei5:

I think this is a incredible useful feature. Sure the documents might get big. But I think the right thing to do here would be to automatically create a (blob) image and replace the src attribute with the url to this image.

My users really want this functionality.

It's important to note that currently this is not an existing feature. I'm just reporting that the image, which we don't use, gets into our database.

That said, i see your point. If you want that in Plone you might file a bug for it (maybe reference this one).

comment:10 Changed 16 months ago by maartenkling

  • Status changed from confirmed to closed
  • Resolution set to fixed

The pull request is closed, so is the ticket? if not please reopen :)  https://github.com/plone/Products.TinyMCE/pull/39

Note: See TracTickets for help on using tickets.