Angular DomSanitizer replacing new line characters on textarea fields

Question

Is Angular's DomSanitizer just a glorified text-replacer? If it is, I'd like to know if it's feasible to implement my own sanitizer, because the Angular one is replacing special characters like "<" with <, when I think it should just replace "<" with nothing because < is pretty gross to look at, and it's also replacing "\r\n" in <textarea> fields with 
 instead of just letting me add a harmless new line character. (Using Angular 11 FYI.)

I'm attempting to use Angular's DomSanitizer as such:

TS:

comments: string = null;

constructor(public sanitizeHTML: SanitizeHtmlPipe) { }
...(irrelevant code)...

HTML:

<textarea class="form-control" [(ngModel)]="comments" name="comments" 
    [value]="comments | sanitizeHtml" 
    (change)="onCommentsChange()" (paste)="onCommentsChange()" 
    rows="7" required></textarea>

My .pipe.ts file:


@Pipe({
    name: 'sanitizeHTML'
})
export class SanitizeHtmlPipe implements PipeTransform {

    constructor(private sanitizer: DomSanitizer) {
    }

    transform(potentiallyUnsafeHtml: string): SafeHtml {
        let sanitizedHtml = this.sanitizer.sanitize(SecurityContext.HTML, potentiallyUnsafeHtml);
        return sanitizedHtml
    }
}

The same problem is happening on input fields (is showing the same < stuff instead of just replacing / preventing them from being added / displayed):

<input formControlName="username" id="searchBox" 
    [value]="UsernameInputForm.get('username').value | sanitizeHTML"
    type="search" placeholder="Search User" 
    class="search-user">

(ts code: )
UsernameInputForm = new FormGroup({
    username: new FormControl()
})

I tried using this replacement code in the pipe to see if I could get new lines to display but it just shows a literal <br> in the textarea field instead of it displaying an actual new line.

transform(potentiallyUnsafeHtml: string): SafeHtml {
    let sanitizedHtml: any
    if(potentiallyUnsafeHtml != null) {
        potentiallyUnsafeHtml = potentiallyUnsafeHtml.replace(/<|>/g, '');
        potentiallyUnsafeHtml = potentiallyUnsafeHtml.replace(/(?:\r\n|\r|\n)/g, '<br>');
    }

    sanitizedHtml = this.sanitizer.sanitize(SecurityContext.HTML, potentiallyUnsafeHtml);
    // console.log("sanitizedHtml: ",sanitizedHtml)
    return sanitizedHtml
}

Manuela CodingPadawan · Accepted Answer · 2024-09-02 10:17:10Z

0

You can use ngx-markdown.

let sanitizedValue = this.markdownService.parse(valueToSanitize); sanitizedValue = this._sanitizer.sanitize(SecurityContext.HTML, sanitizedValue);

Works like a charm!

answered Sep 2, 2024 at 10:17

Manuela CodingPadawan

4962 gold badges9 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular DomSanitizer replacing new line characters on textarea fields

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related