search

area17 / twill

Twill is an open source CMS toolkit for Laravel that helps developers rapidly create a custom admin console that is intuitive, powerful and flexible. Chat with us on Discord at https://discord.gg/cnWk7EFv8R.
https://twillcms.com
Apache License 2.0
3.78k stars 574 forks source link

WYSIWYG purges some HTML tags added through Source code #2258

Open Tom-revere opened 1 year ago

Tom-revere commented 1 year ago

Description

Unsupported HTML tags added to a WYSIWYG through Source code, are removed when content is updated.

Steps to reproduce

  1. Insert a WYSIWYG field.
  2. Edit the field using Source code.
  3. Insert the below, which contains an unsupported <small> tag. <p>Etiam ut purus mattis mauris sodales aliquam. Praesent egestas neque eu enim. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Etiam iaculis nunc ac metus. <small>Aenean commodo ligula eget dolor</small>.</p>
  4. Change back to WYSIWYG view.
  5. Make further changes to the content.
  6. The <small> tags will have been purged.

Expected result

All changes made to the field through Source code should be retained

Actual result

Unsupported HTML tags will be purged: <small>, <mark>, etc.

Versions

Twill: v3.0.1

Laravel: v9.52.4

PHP: v8.0

ifox commented 9 months ago

Hi @Tom-revere is this with Quill or Tiptap?

Tom-revere commented 8 months ago

Hi @ifox, this is happening for both Quill and Tiptap

Tofandel commented 8 months ago

This is desired behavior to me, both Quill and TipTap will only keep the html that they have been configured to support

With both, components are selected using selectors and the render has to output the selector, if the markup you produce does not convert to one of their component there is no way to edit it, even attributes which are not allowed in the component will be stripped

This is how they prevent XSS by being only inclusive

If you want support for <small> you would need to add your own tip tap node (the only question is how to make twill extensible like this? Maybe adding config for custom extensions and a path to the js file of the extension)