webkit-fake-url:// should probably be filtered on paste

[ghost]

Webkit allows you to copy and paste images to content-editable regions, but the result is an aptly-named "webkit-fake-url" that (as far as I can tell) is completely useless for anything other than displaying the image in the local browser (there's apparently no way to get at the data from Javascript).

There's an open (but unassigned) issue in the Webkit tracker requesting that this be replaced with a data-uri: https://bugs.webkit.org/show_bug.cgi?id=49141

Steps to reproduce:

1. Open a Mercury editor in Safari.
2. Open an image file in an application that allows copying (e.g., Preview on the Mac).
3. Copy the image and paste it into the Mercury editor.

The image will appear, but inspection of the HTML source code shows the (useless) webkit-fake-url.

This is likely to be confusing to users, since it looks like the image has been pasted successfully, but it will be broken if the content is saved and then viewed on another machine (or if the browser is closed and reopened -- the fake URLs go away when the browser is closed).

I worked around the issue with this crude patch, but there may be a more elegant way.

Editable.prototype.handlePaste = function(prePasteContent) {
    var cleaned, container, content, pasted;
    pasted = prePasteContent.singleDiff(this.content());
    if(pasted.indexOf("webkit-fake-url://") != -1){
        this.content(prePasteContent); // Just throw away the paste.
    }
         // Normal handlePaste code continues...

[jejacks0n]

Thanks for this. I think your suggested fix is likely how it will be fixed -- just integrated a little differently.

I really do appreciate the research you've done.

[lppier]

Hi, does this mean that the image cut and paste functionality is not working for now? Thanks!

[jejacks0n]

It works fine if you're copying images from one region to another, or one site to another.. you just can't copy/paste an image from your local drive (for obvious reasons).

Sadly though, the image upload functionality doesn't work in Safari… it should with the next version of safari (and I think it should on nightly builds of webkit -- been a while since I checked the status though).

---

Jeremy Jackson http://github.com/jejacks0n

On Apr 16, 2012, at 8:55 PM, lppier wrote:

Hi, does this mean that the image cut and paste functionality is not working for now? Thanks!

---

Reply to this email directly or view it on GitHub: https://github.com/jejacks0n/mercury/issues/179#issuecomment-5167374

[lppier]

Hi Jeremy,

I think that it actually works in firefox cutting and pasting from my desktop. it's saved as something like this .. img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPgAAAEDCAYAAAAY88llAAAD8GlDQ1BJQ0MgUH..... and so on

is it supposed to work this way?

Pardon me for any dumb questions I'm new to rails and all.... getting back into programming after 5 years.

Also, by image uploading functionality, do you mean the one in the editor toolbar? I only see uploading from another url but not from desktop.

Just thought you might want to know.. great job with this editor!

Pier.

[jejacks0n]

@lppier Yeah, firefox uses data:urls, but this can be negative for several reasons. You're basically embedding the entire image into a content region that (in many cases) may be saved to the database. It's probably better to not use this "feature" and instead instruct your content people that that's not an appropriate method for adding images.

[jejacks0n]

@tonyhursh This was a good find. Thanks for the info.