Sanitize saved data 

Some of Tool's fields can contain an 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 sanitise and a config described rules for sanitising.

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 are second way to use 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 have add at the save method  in previous code example. Then, add a 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 a config for url field because it can't contain HTML code. For caption field we pass {}-rule that means that field can contain HTML only made by Inline Toolbar. 

To check how it works, try to use Inline Toolbar at the caption field. Then add some unwanted tags, for example, div manually with 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 sanitised.

{ "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" }

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