$30 off During Our Annual Pro Sale. View Details »

Content editing in Symfony

Content editing in Symfony

Content editing is the process of letting users create rich content directly from your project. It goes from allowing users to write simple text comments to letting users write rich documents collaboratively in real-time. Due to the inherent risks of displaying user content on your platform, it is a difficult problem to tackle in a secure, scalable and feature-rich way.

Let's discuss how the HtmlSanitizer component, Symfony UX and Mercure can be used together to build amazing editing experiences for your users.

Titouan Galopin

November 18, 2022
Tweet

More Decks by Titouan Galopin

Other Decks in Technology

Transcript

  1. Agenda 1. Know your content 2. Security concerns 3. Choosing

    an editor 4. The state of the art: block-based editors 5. Live editing with Symfony UX and Mercure 3
  2. • Article comments • Restaurant reviews • Social post •

    Document writing • CMS • … Many use cases 6
  3. ⬡ Stylable content vs Plain text? Should your users be

    able to insert bold/italic? Links? Images? … Questions to ask yourself 7
  4. Questions to ask yourself 8 ⬡ Stylable content vs Plain

    text? ⬡ Feature-rich content vs Markdown? Markdown is great but it’s difficult to use for non-technical users, and will it be enough?
  5. Questions to ask yourself 9 ⬡ Stylable content vs Plain

    text? ⬡ Feature-rich content vs Markdown? ⬡ Programmatic content manipulation? Will you need to manipulate the content programmatically (move elements, migrate to a new editor, upgrade your current editor, …)? (Most likely yes)
  6. Questions to ask yourself 10 ⬡ Stylable content vs Plain

    text? ⬡ Feature-rich content vs Markdown? ⬡ Programmatic content manipulation? ⬡ Translation? Automatic/manual content translation?
  7. Questions to ask yourself 11 ⬡ Stylable content vs Plain

    text? ⬡ Feature-rich content vs Markdown? ⬡ Programmatic content manipulation? ⬡ Translation? ⬡ Different display on mobile vs desktop? Should some blocks have a different structure on mobile?
  8. Questions to ask yourself 12 ⬡ Stylable content vs Plain

    text? ⬡ Feature-rich content vs Markdown? ⬡ Programmatic content manipulation? ⬡ Translation? ⬡ Different display on mobile vs desktop? ⬡ Display in non-Web contexts (mobile/desktop app, …)?
  9. Answers to these questions are both technical and human Content

    editors are one of the most complex UX challenge 13
  10. A content editor is a big security risk You must

    implement dedicated security 15
  11. Biggest risk: Cross-site scripting Inject JavaScript code into Web pages

    viewed by other users to extract information (session cookie, password, emails, …) from your users. 16
  12. But also … CSS display attack Inject CSS into pages

    to render them unusable or log the keystrokes of visitors. 17
  13. But also … Click-hijacking attack Inject HTML/CSS into pages to

    change the target of a legitimate link somewhere in the page (for instance the login button) to a phishing page. 18
  14. But also … DDoS attacks Libraries to sanitize user content

    are complex and CPU-intensive (HTML parsing and manipulation). It’s a great place to DDoS a platform. 19
  15. Simplest option Twig escape filter (or htmlentities) if you don’t

    need to accept HTML (plain text/markdown/…). You should use this when you can. 21
  16. HTML sanitizing When you need to accept HTML (rich-content), you

    need to distinguish safe from unsafe HTML. This is what’s called HTML Sanitizing. 22
  17. Symfony HtmlSanitizer The HTML Sanitizer component aims at sanitizing untrusted

    HTML code (e.g. created by a WYSIWYG editor in the browser) into HTML that can be trusted. 23
  18. HtmlSanitizer is useful to: • Prevent security issues (XSS, CSRF,

    data extraction, …) • Prevent display problems (ensure content consistency) • Output valid, standard HTML from potentially invalid WYSIWYG editor one 24
  19. 26

  20. Before displaying Because: 1. Content can be manipulated from outside

    your application (manually, script missing the sanitizer, …) 2. Because some databases have unpredictable behaviors Ex: MySQL transforms UTF-8 character ⟨ to ASCII < when storing in a non-UTF8 field 38
  21. Simplest option (textarea) • Easy-to-use for everyone • Can be

    enough, especially with modern emoji support • Very limited styling 42
  22. Great for technical users • Great UX for tech users

    (ex: Markdown + CodeMirror) • Flexible without too much JavaScript complexity • Not usable by non-tech users • Requires HTML sanitization for security 45
  23. UX-friendly for everyone • Easy-to-use by anyone • Requires a

    complex JavaScript library • Requires HTML sanitization for security • Difficult to manipulate the generated content 51
  24. Problems 1. How can I add a <div> around tweets

    on display? 2. How can I upgrade my editor version without breaking existing content? 3. How can I display content in a non-Web context? 4. How can I allow multiple people to edit collaboratively? 56
  25. By using JSON blocks: • Easier to manipulate (“add a

    <div> around tweets”) • Can display content outside the Web • Ease content migration during upgrades • Make live collaboration possible 61
  26. 63

  27. Security Blocks content should still be: • Escaped (Twig/htmlentities) if

    they won’t contain any HTML • Sanitized if they will 67
  28. Display Use Quill JS library to render blocks as safe

    HTML … or implement your own logic to display on other platforms! 70
  29. Solutions 1. How can I add a <div> around tweets

    on display? 2. How can I upgrade my editor version without breaking existing content? 3. How can I display content in a non-Web context? => Now very easy! 4. How can I allow multiple people to edit the same content collaboratively? … 71
  30. 75 Collaborative editor This is a Delta change: small, easy

    bit to synchronize the editor state between users
  31. Conclusion • For simple needs: plain text + escape is

    enough (a content editor isn’t necessarily worth it) 77
  32. Conclusion • For simple needs: plain text + escape is

    enough (a content editor isn’t necessarily worth it) • For tech users: Markdown + HtmlSanitizer with a code editor is great and flexible 78
  33. Conclusion • For simple needs: plain text + escape is

    enough (a content editor isn’t necessarily worth it) • For tech users: Markdown + HtmlSanitizer with a code editor is great and flexible • Otherwise: always choose a block-based editor (much more flexible) and use sanitization 79