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

18 Nov 20182 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 { Component, ViewChild } from '@angular/core';
import { BlockEditorModule } from "@syncfusion/ej2-angular-blockeditor";
import { BlockModel, ContentType } from "@syncfusion/ej2-blockeditor";

@Component({
    imports: [BlockEditorModule],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html'
})


export class AppComponent {
    public 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>`
                }
            ]
        }
    ];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<div id="container">
    <ejs-blockeditor id="blockeditor" [blocks]="blocksData" [enableHtmlSanitizer]="true" />
</div>
/* You can add global styles to this file, and also import other style files */
@import "node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-angular-blockeditor/styles/tailwind3.css';