Cross-Site scripting(XSS) prevention in React Block Editor component

18 Nov 20183 minutes to read

The Block Editor allows users to edit the content with security by preventing cross-site scripting (XSS). By default, it provides built-in support to remove elements from editor content that cause XSS attacks. The editor removes the elements based on the attributes if it is possible to execute a script.

Enabling XSS prevention

The enableHtmlSanitizer, enabled by default, activates XSS prevention. When active, the editor automatically removes elements like <script> and attributes like onmouseover from the content.
The following example shows XSS prevention removing a <script> tag and onmouseover attribute:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, ContentType } from '@syncfusion/ej2-react-blockeditor';

function App() {
  const blocksData = [
        {
            blockType: 'Paragraph',
            content: [
                {
                    contentType: ContentType.Text,
                    content: `<div onmouseover='javascript:alert(1)'>Prevention of Cross Sit Scripting (XSS) </div> <script>alert('hi')</script>`
                }
            ]
        }
    ];

  return (
    <BlockEditorComponent
      id="blockeditor"
      blocks={blocksData}
      enableHtmlSanitizer={true}
    ></BlockEditorComponent>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('container'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, BlockModel, ContentType } from '@syncfusion/ej2-react-blockeditor';

function App() {
    const blocksData: BlockModel[] = [
        {
            blockType: 'Paragraph',
            content: [
                {
                    contentType: ContentType.Text,
                    content: `<div onmouseover='javascript:alert(1)'>Prevention of Cross Sit Scripting (XSS) </div> <script>alert('hi')</script>`
                }
            ]
        }
    ];

  return (
    <BlockEditorComponent  id="blockeditor"  blocks={blocksData} enableHtmlSanitizer={true}></BlockEditorComponent>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('container'));