Preventing Cross-Site Scripting (XSS)

16 Jan 20256 minutes to read

The Rich Text 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.

The enableHtmlSanitize property determines whether XSS prevention is active. It’s set to true by default.

In the following sample, we removed the script tag and onmouseover attribute from the content of the Rich Text Editor.

app.component.ts

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [value]='editorValue'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})
export class AppComponent {
    public editorValue: string = `<div onmouseover='javascript:alert(1)'>Prevention of Cross Sit Scripting (XSS) </div><script>alert('hi')</script>`;
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The XSS prevention feature is only applicable when the editorMode is set to HTML.

Custom Cross-Site Scripting Prevention

For more precise control over XSS prevention, you can implement custom filtering logic using the beforeSanitizeHtml event.

Implementing Custom Cross-Site Scripting and Fililtering in Rich Text Editor

1. Use the beforeSanitizeHtml event to define custom filtering rules.
2. Utilize the helper function from the event argument to apply your custom filters.
3. Set the cancel argument to true if you want to override the built-in XSS prevention entirely.

The following sample demonstrates how to filter the script tag by value.

app.component.ts

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, BeforeSanitizeHtmlArgs, QuickToolbarService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';
import { detach } from '@syncfusion/ej2-base';

@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [value]='editorValue' (beforeSanitizeHtml)='onBeforeSanitizeHtml($event)'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})
export class AppComponent {
    public editorValue: string = `<div>Prevention of Cross Sit Scripting (XSS)</div><script>alert('hi')</script>`;
    public onBeforeSanitizeHtml(e: BeforeSanitizeHtmlArgs): void {
        e.helper = (value: string) => {
            e.cancel = true;
            let temp: HTMLElement = document.createElement('div');
            temp.innerHTML = value;
            let scriptTag: HTMLElement = temp.querySelector('script') as HTMLElement;
            if (scriptTag) {
                detach(scriptTag);
            }
            return temp.innerHTML;
        }
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can also filter out the e.selectors.tags and e.selector.attributs in the beforeSanitizeHtml event to control which HTML tags and attributes are allowed to appear.

For instance, if you want to display <iframe>, By manipulating the e.selectors.tags property in this event, you can selectively remove tags like <iframe>. This approach ensures that your application can safely display iframes while preventing potential security risks associated with XSS vulnerabilities.

The following sample demonstrates how to filter the iframe tag.

app.component.ts

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, BeforeSanitizeHtmlArgs, QuickToolbarService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [value]='editorValue' (beforeSanitizeHtml)='onBeforeSanitizeHtml($event)'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})
export class AppComponent {
    public editorValue: string = `<div>Prevention of Cross-Site Scripting (XSS)</div><script>alert('hi')</script><iframe srcdoc="<p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>"></iframe>`;
    public onBeforeSanitizeHtml(e: BeforeSanitizeHtmlArgs): void {
          if (e.selectors && e.selectors.tags) {
            e.selectors.tags = e.selectors.tags.filter((tag: string) => tag !== 'iframe:not(.e-rte-embed-url)');
            e.selectors.tags = [('iframe[src^="https://"]')];
        }
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));