Froala Editor 4.0.15 Released: XSS vulnerability resolved and more

Froala is continuously updating its editor to make it more secure and intuitive so that everyone can enjoy a great content editing experience.

4.0.15 Release

The long-awaited 4.0.15 release of Froala is now available! This release contains a number of quality enhancements, usability improvements, and fixes for customer-reported issues. This includes:

• Resolving XSS vulnerability in the Markdown feature.
• Improvements for content pasting from different sources.
• Improvements for resizing images that have a caption.
• And more!

Resolving XSS vulnerability within the Markdown plugin

When developing applications, web developers must be cognizant of security issues. Cross-site scripting (XSS) is one particular issue that can occur when user input is not properly sanitized before being shown on a page.

XSS is a major security flaw. Additionally, if you are using an earlier version of the Markdown plugin, you should be aware of a potential XSS vulnerability. This can be exploited if an attacker injects malicious code into the markdown content that the plugin subsequently processes. The good news is that the Froala team is always trying to improve the editor’s security, and they’ve introduced certain capabilities to the Markdown plugin that help to mitigate XSS attacks. They’ve introduced an escaping mechanism, for example, that automatically escapes specific code parts that could be utilized in an attack.

To mitigate this issue, ensure that you are using the latest version of the Markdown plugin. You can do this by updating your editor using the instructions in the “Updating your editor” section below.

If you are loading the editor plugins separately, not using the editor pkgd script, make sure to replace the Froala editor version on the Markdown plugin script link with 4.0.15. For example,

https://cdn.jsdelivr.net/npm/[email protected]/js/plugins/markdown.min.js

If you’re not aware of the Froala markdown feature, It’s a highly requested feature that was introduced in version 4. It allows users to format words and text using code shortcuts through predefined, easy-to-remember markdown syntax. Get a deeper look at the Markdown plugin here.

Improvements in content pasting from different sources

If you’ve ever tried copying and pasting content from a Word document or another website into your Froala editor, you know how well it works. Sometimes, though, the result wouldn’t be exactly what you want it to be. So we’ve made some improvements:

• Convert the font size unit of the pasted content.

When you paste the content into Froala, it will now automatically convert the font size unit to the unit you set using the fontSizeUnit option, making it easier to keep your text style looking consistent. For example, If you paste content from MS Excel that has a 12px font size and the fontSizeUnit of your Froala is set to ‘pt‘, the content will have a 9pt font size after being pasted to the editor.

The fontSizeUnit is one of the many options that Froala provides to control the editor’s font style. You can use it to set the unit to be used for the font size. By default, it is set to ‘px’.

• Keep complex table structure after pasting from MS Excel.

We’ve also made improvements to pasting complex tables inside the editor – so now you can do it without worrying about losing any formatting or breaking the table structure after pasting it from MS Excel or any other source. We understand that tables are crucial for representing data, and we don’t want you to waste any more time fixing the table structure after you paste it into the editor. So update your editor now and enjoy pasting content into the editor without any hassle!

Improvements for resizing images that have a caption.

Images are extremely important to include when creating content  – especially if you want people to remember it! In fact, studies have shown that we’re more likely to recall information and engage with content when there are images involved. That’s why Froala makes it easy to add and edit images. It has been proven that Froala is one of the best WYSIWYG editors that handle images. With Froala, you get a lot of options for editing and enhancing your images, including the ability to resize, add an ALT attribute, set the display property, change the alignment, add a caption, and much more.

With Froala, you can resize images either by clicking on the “Change Size” button and entering a custom value into the width and height inputs that appear or by clicking on the image and dragging the blue border that appears around it. Resizing images by dragging allows you to see the new image size while editing, which makes it easy to adjust the image size to best fit your content. In the latest release, images with captions can also be resized by dragging correctly, just as it works for images without captions.

… and much more!

Several bugs were fixed with this release in a constant effort to make the user experience even better.

• Fixed deleting the last character on a line makes the cursor jump to the previous line with ENTER_BR config.
• Fixed the issue wherein the Font Family gets reset when pressing enter even after enabling the keepFormatOnDelete option
• Fixed crash when editing content: Uncaught TypeError: Cannot read property ‘classList’ of null.

Please find the complete changelog list here.

Get Froala V4.0.15

How Do I Upgrade to V4.0.15?

Super easy! Follow the steps below to update to the latest version.

For Froala Editor Version 3 and Version 4 Users

Follow the table below to know the proper way of downloading the latest Froala Editor release and how to include it in your project based on your preferred method.

<!-- Include Editor stylesheet-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<!-- Include Editor JavaScript file-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js"></script>

<!-- Include Editor stylesheet-->
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<!-- Include Editor JavaScript file-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

npm install froala-editor

<!--

Replace the {download-folder-path} in the following example with the path to the folder containing the stylesheet file e.g.

../css/froala_editor.pkgd.min.js

-->

<link href="{download-folder-path}/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<!--

Replace the {download-folder-path} with the path to the folder containing the JS file e.g.

../js/froala_editor.pkgd.min.js

-->

<script type="text/javascript" src="{download-folder-path}/froala_editor.pkgd.min.js"></script>

bower install froala-wysiwyg-editor

For Froala Editor Version 2 Users:

Follow this migration guide to get step-by-step upgrade instructions.

Try The Latest Froala Editor

Explore a variety of examples that show you the functionality in Froala HTML Editor.

If you like to see the HTML output while trying Froala, use Froala Online HTML Editor.

Are you ready to use Froala in production?

Level up your rich text editing capabilities today with the plan that best suits your needs.

Change Log

• Please visit the release notes for a complete list of changes.

Get Started

• You can download and start using Froala in less than five minutes following our get started guide.

Support and Feedback

• We’d love to hear what you think of the latest release! Join us on GitHub Community to chat with product managers, developers, and other members of the Froala team.

Technical Questions

• If you have a technical question, you can check to see if we already answered it in our help center. If not, contact our Support team.

What’s next?

Development continues to make Froala a safe, secure, and feature-rich WYSIWYG editor. More changes and improvements are coming up in the next release! Stay tuned and subscribe to our newsletter to be the first to know about the updates!