bug(critical): "[froalaView]" directive has XSS security problem!

[leo6104]

trafficstars

@Directive({
  selector: '[froalaView]'
})
export class FroalaViewDirective {

  private _element: HTMLElement;

  constructor(private renderer: Renderer2, element: ElementRef) {
    this._element = element.nativeElement;
  }

  // update content model as it comes
  @Input() set froalaView(content: string){
    this._element.innerHTML = content;
  }

  ngAfterViewInit() {
    this.renderer.addClass(this._element, "fr-view");
  }
}

content = "<img src=x onerror=prompt(document.cookie)>"


<div [fraolaView]="content"></div>

It show document.cookie value in window.prompt

I think it is critical issue.

Please use angular DomSanitizer.sanitize function in set froalaView

[bunnyvishal6]

Any update on this?

[securylight]

Maybe It'll be easier with POC:

app.module.ts

The code of this file import Froala components and directive:

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { FroalaEditorModule, FroalaViewModule, FroalaViewDirective } from 'angular-froala-wysiwyg';

@NgModule({ declarations: [ AppComponent,
], imports: [ BrowserModule, AppRoutingModule, FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } app.component.ts

This code takes the “content” query string param into “content” class member:

import { Component } from '@angular/core'; import { ActivatedRoute } from '@angular/router';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'angularnewapp'; content:string;

constructor(private route: ActivatedRoute) { }

ngOnInit() { this.route.queryParams
.subscribe(params => { this.content = decodeURI(params.content); }); }

} app.component.html

This code injects the “content” class member value into the froala view component.

Froala Editor

Hello, Froala!

Froala View

The result:

[pixelshaded]

Simple work around using your own component:

<div
  class="fr-view"
  [innerHTML]="content"
></div>

This will put the content through Angular's sanitizer. The froalaView directive doesn't do much other than add a class and set innerHTML (and since its doing so directly on the native element, it bypasses the sanitizer)

[pixelshaded]

There are some caveats to the work around. Using Froala with angular depends on bypassing Angular's built in sanitization. Using alignment as an example, Froala creates <p style="text-align: center">my content</p>. This style attribute is stripped with Angular's sanitization. https://github.com/angular/angular/issues/19645. Without a way to whitelist these things, you have to disable all of sanitization to render Froala content properly in Angular, unless you are willing to forego on the features which leverage things like style attributes. For instance, if all you need is some of the basics like bold, italic, etc, then Angular's sanitization may work for you. Unfortunately there is no list which defines what does and does not work with the sanitizer.

[selangley-wa]

Judging by the XSS issues that Froala does fix, it appear that their approach is to prevent XSS content from being entered into Froala editor, therefore they should not ever occur in the Froala views?

https://froala.com/wysiwyg-editor/changelog/ Fixed, XSS in the Markdown feature. Fixed, Xss when setting external content via setModel on React Fixed, Xss issue with iframe Fixed, XSS on image url input field Fixed, XSS vulnerability in [insert video] Fixed XSS Vulnerability in WYSIWYG HTML Editor Fixed Security issue: XSS via pasted content