Html cleaning and blueimp gallery

Frappe Framework
1

Hi Frappe Team

I want to pick your brain about the wysiwyg editor in frappe. Currently it strips “data-” tags out of elements added to any html content. Also I see that you have the blueimp gallery already as part of the frappe internals and wanted to expose the gallery to my designer so he can setup a very simple popup gallery just by adding the necessary elements in a page’s content.

Now the blueimp gallery can be triggered with a “data-gallery” data tag but the current editor strips it out. I wanted to see if I could go into the editor and allow a less restrictive mode(I’ll submitted it as a pull request if it is simple and clean). I am not sure exactly sure where to look for this but any hints would be awesome.

Thanks!

4 Likes
2

Yeah, lets replace the text editor: Change the default text editor · Issue #2042 · frappe/frappe · GitHub

I think @revant_one and @gvrvnk were also working on it

Anyone want to take a lead?

3

So I did a quick experiment and swapping the editor for summernote as @revant_one noted in the issues post. It was not very difficult:

summernote_editor_in_frappe.png1465×1021 236 KB

Of Course, I didn’t do any work to see if uploading images/videos or anything else works yet. That image is summernote loading content from an existing page.

However, my original issue still exists even after swapping the editor :smiley:
Whenever I press save, any “data-” attributes get stripped. I’m guessing this is handled somewhere in the model validation.

4

Ah - sorry that is because of XSS filtering: frappe/frappe/utils/__init__.py at develop · frappe/frappe · GitHub

5

@Felipe_Orellana Summernote looks good. Can you open a PR on that? Maybe I can fix the file uploads and other stuff.

6

I also got same issue when I am developing website from default web pages. Even I wan unable to add url to another website.

7

Yeah, so I kept working on it yesterday. Uploads work, image linking works, even video embedding works. I also added code mirror library to do code coloring while editing source. Still need to add ctrl+s cmd+s shortcuts and I’ll be done. I’ll send a PR today

2 Likes
8

Here is the SummerNote integration I did. Let me know if there are things to change/update/remove.

https://github.com/frappe/frappe/pull/2225

1 Like
9

Hi! It is awesome feature! Thank you very much. For me it is very important to have summernote-image-attributes… so I can add this by myself later or for this I should change core code?

10

I also want the image attributes plugin in there, I have 2 other plugins which should be really useful.

Lets let the frappe team review the editor change and then discuss what extra summernote plugins should make it to core.

11

Now about that filtering :smiley:

So I need to allow at a minimum data-* attributes to be allowed(which should be safe from xss issues I believe) but the bleach and html5lib libraries frappe uses internally to clean tags and attributes don’t allow for wildcard attribute names.

Though I did an experiment and bleach does allow a callable to be passed to test attribute name and values.

Only issue is that although I can get my data-* attributes to be allowed the callable has no way of knowing which element the attribute came from so attribute filter applies equally to all tags:

def allowed_attributes(b, name, val):
        return True if name in HTMLSanitizer.svg_attributes or \
                name in HTMLSanitizer.acceptable_attributes or \
                name.lower().startswith("data-") else False

and the actuall filter:

escaped_html = bleach.clean(html, tags=tags, attributes=allowed_attributes, styles=styles, strip_comments=strip_comments)

Not sure if this change is acceptable to you @rmehta

Unless there is something I am not seeing