Safe html pipe not working?

[high raptor]

Here is the pipe that I'm trying to use to render HTML on the page:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: "safeHtml" })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private domSanitizer: DomSanitizer) { }

  transform(value: string): SafeHtml {
    return this.domSanitizer.bypassSecurityTrustHtml(value);
  }
}

Here is how I'm using it on the HTML page:

<div [outerHTML]="dataItem.content | safeHtml"></div>

I've also tried using [innerHTML], but that didn't change anything.

Everything I've seen online seems to claim this should be working so am I missing something?

[empty hollow]

What about it doesn't work? And I don't think you can use outerHTML like that. But I've never tried it

[high raptor]

Even though bypassSecurityTrustHtml is being called via the pipe, base64 img in the value passed to it is removed.

[empty hollow]

You sure the data url is correct? Can you paste an example of the content value?

[high raptor]

Sure, 1s

[empty hollow]

You shouldn't need this for just images.

[high raptor]

Sorry trying to get this value... base64 strings are long so VS Code is trying to truncate it when I copy

It's not just for images; it's for HTML

[empty hollow]

Unless your HTML is unsafe it should just be fine to use innerHTML Unsafe would be malformed or with <script> tags.

Or javascript: protocol URLs

[high raptor]

I hardcoded a base64 image I found online so wondering if it's malformed 😮

[empty hollow]

Hard to validate if you cannot even get a copy in your clipboard.
https://validator.w3.org/#validate_by_input

[high raptor]

lol the service is truncating it.. jfc

Thanks again rob

[empty hollow]

Well that might be the problem. My advice is to fix that and not use bypassSecurityTrustHtml 🙂