Sanitize saved data

Some of the Tool's fields can contain any HTML code, for example, our Caption field with Inline Toolbar enabled. It's good to be sure that saved HTML content includes only allowed tags and attributes — only created by Inline Toolbar in our case.

Editor.js has a build-in Sanitizer module. There are two ways to use it.

Manually

Call sanitizer.clean() API method for fields that can contain HTML on saving. This method accepts two arguments: string to sanitize and a config described rules for sanitizing.

class SimpleImage { // ... other methods save(blockContent){ const image = blockContent.querySelector('img'); const caption = blockContent.querySelector('[contenteditable]'); + const sanitizerConfig = { + b: true, + a: { + href: true + }, + i: true + }; return Object.assign(this.data, { url: image.src, - caption: caption.innerHTML || '' + caption: this.api.sanitizer.clean(caption.innerHTML || '', sanitizerConfig) }); } // ... other methods }

In this example, we will clean every tag except b, a and i.

☝️

Read more about available sanitizer rules here.

Automatic

There is a second way to use the sanitizer for our Tool. If you implement the sanitize static getter with the sanitizer config, Editor.js will automatically clean your saved data.

Useful thing is that sanitizer config will be automatically extended by enabled Inline Tools tags.

Clean up manual sanitizing lines that we've added at the save method in the previous code example. Then, add the sanitize static getter.

class SimpleImage { // ... static get toolbox // ... static get pasteConfig /** * Automatic sanitize config */ static get sanitize(){ return { url: false, // disallow HTML caption: {} // only tags from Inline Toolbar } } // ... constructor // ... render // ... _createImage save(blockContent){ const image = blockContent.querySelector('img'); const caption = blockContent.querySelector('[contenteditable]'); return Object.assign(this.data, { url: image.src, caption: caption.innerHTML || '' }); } // ... validate // ... renderSettings // ... _toggleTune // ... _acceptTuneView // ... onPaste }

We pass false as config for the url field because it can't contain HTML code. For the caption field we pass the {}-rule which means that field can contain HTML only made by Inline Toolbar.

To check how it works, try to use Inline Toolbar in the caption field. Then add some unwanted tags, for example, div manually via browser web-inspector to the caption content editable element.

<div contenteditable="true"> Here is <div> a </div> <i>caption</i> field </div>

Then press Save and take a look at the output. There should be only tags from Inline Toolbar. Divs should be sanitized.

{ "time": 1553964811649, "blocks": [ { "type": "image", "data": { "url": "https://cdn.pixabay.com/photo/2017/09/01/21/53/blue-2705642_1280.jpg", "caption": "Here is a <i>caption</i> field", "withBorder": false, "withBackground": false, "stretched": false } } ], "version": "2.12.3" }

In the next chapter we will learn how to provide a way for our Tool users to pass some own configuration for our Tool.