Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.There are two cases where the "Restrict images to this site" doesn't work properly:
1) If you copy/paste an image directly into CKEditor, it brilliantly converts it into base64 and the code is saved to the database, like so: <img alt="" src="data:image/png;base64, lots and lots of characters />
2) If your image is explicitly referenced using the full URL (I have got lots like this on my site as a result of using IMCE), like so: <img alt="" src="http://mysite.com/my-image-file.jpg" />
In both these cases, although the image is actually on my site it only gets displayed if I switch off the "Restrict images to this site" filter
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | 2824087-8.patch | 1.85 KB | avogler |
Comments
Comment #2
Wim LeersThose are two distinct problems. Please create separate issues for them next time :)
filter.module, not inckeditor.module. Specifically in\Drupal\filter\Plugin\Filter\FilterHtmlImageSecure. There are several problems with that filter. I think #2257291: Handle alternate domains in filter_html_image_secure is closely related.Comment #3
Wim LeersComment #4
joel_guesclin CreditAttribution: joel_guesclin as a volunteer commentedI can reproduce this on a Mac, so here goes:
1) Make sure that "Restrict images to this site" is switched on for "Full HTML"
2) Choose an image on your workstation, and open it using the default image display app on the Mac (mine is in French so it's called "Aperçu", I think it's "Preview" in English?
3) In Preview, use the menu option Edit > Copy
4) Then create an Article (I'm in Drupal 8.2.1), and select text format Full HTML. In the Body textarea, right-click and choose option "Paste".
5) In my browser (Firefox 49) I then get a modal window saying that because of the browser security settings I can't copy directly into the window, so do to paste the image
6) The image appears in the textarea.
7) Save the article. The images are replaced by red warning "X"
8) Switch off "Restrict images to this site" for Full HTML and display the article. The images appear.
So there is no HTML to copy/paste, only an image
One thing I have noticed, is that this only works in Full HTML. If you try to do this using Basic HTML (I've not at all changed the input formats), then the "src="data:image/png;base64" gets changed to "src="image/png;base64" and the image doesn't show at all when displayed.
I'm not sure how important this is, because I'm not even sure whether or not it is a good idea to use base64 inline images like this. I imagine that they don't work with responsive images. I'm also testing this in the "Inline responsive images" module, for which I have raised another bug.
Comment #5
joel_guesclin CreditAttribution: joel_guesclin as a volunteer commentedComment #8
avogler CreditAttribution: avogler commentedHere's a patch for 1) that allows data URIs in the src attribute of img tags. Haven't tested it with Copy/Paste but works for my use case of inserting FMath formulas.
Comment #9
avogler CreditAttribution: avogler commentedComment #11
avogler CreditAttribution: avogler commentedAs this patch breaks some tests I reconsidered the aproach. I guess it is easier to add the "data:" scheme to the list of allowed protocols in a services.yml. Hope this helps if someone stumbles over the same problem.
Comment #13
seanBJust ran into the first problem as well. There are CKEditor issues for it and it seems to be a browser issue:
https://dev.ckeditor.com/ticket/8208
https://dev.ckeditor.com/ticket/8021
Also found this, you can fix this with a custom plugin:
https://stackoverflow.com/questions/6582559/ckeditor-preventing-users-fr...
Comment #14
askibinski CreditAttribution: askibinski as a volunteer and at ezCompany commentedHere is a small module which implements a ckeditor plugin like the one Sean mentions:
https://www.drupal.org/project/ckeditor_blockimagepaste
It prevents pasting/dropping an image if you enable the plugin for the filters desired.
Comment #15
Wim Leers@askibinski Would it make sense to move this into Drupal core instead?
Comment #16
seanBFor now the module still has some issues in IE11 and Edge. Also not sure if we can have proper tests for the copy/paste and drag & drop? Let's at least create a initial patch for review and something to iterate on when there is a need for it.
Comment #17
askibinski CreditAttribution: askibinski as a volunteer and at ezCompany commentedI'm going to give it a shot writing a nightwatch test for this during the dev days here in Lisboa.
Comment #19
askibinski CreditAttribution: askibinski as a volunteer and at iO commentedTurns out it's perfectly possible to write a Nightwatch test for this:
https://www.drupal.org/project/ckeditor_blockimagepaste/issues/3027063
So that's something. I think this can live in contrib just fine for anyone having this problem. There haven't been any comments in over half a year in this issue so it's probably an edge case scenario which doesn't affect many people. Otherwise, next step could be a patch based on the work in contrib.
Comment #20
maxilein CreditAttribution: maxilein commentedI don't think it is an edge case. It is important for the interoperability with other technologies.
I think it is even a blocker to adopt drupal for rich content creating sites at all.
Comment #21
devkinetic CreditAttribution: devkinetic commentedI am running the contrib module that blocks this.
IMO by default allowing a user circumvent the media entity system, while simultaneously filling the DB with base64 is an issue. I see the edge case wanting to embed base64 into wysiwyg.
If pasting an image instead added a new media entity, and then placed it in wysiwyg, that would be a different story. That sounds more like a contib than core piece though. Just my thoughts...
Comment #22
Wim LeersI think that'd be an excellent feature request that is now more feasible than ever before :) (With Media embedding in the upcoming Drupal 8.8 and REST/JSON:API file uploads since April 2018.)
Comment #23
devkinetic CreditAttribution: devkinetic commented@Wim It should activate the add image dialog, so field data can be filled out, and there is the use case of a user pasting content with multiple images. I agree we are closer than ever, and these use cases will help to round out the UX we've been waiting so patiently for.
Comment #24
maxilein CreditAttribution: maxilein commentedPlease consider the following use case:
You want to keep something that consists of multiple chapters with multiple images.
Popping up the image dialouge for each is not practical!
There need to be options for automating these conversions of multiple images.
Comment #30
quietone CreditAttribution: quietone at PreviousNext commentedCKEditor has been removed from core, CKEditor 4 is removed from Drupal Core in 10.0.0