Issues Embedding GitHub Gists in an Angular Application

I'm encountering an issue when trying to embed GitHub Gists in my Angular application. I have a component where I want to display code snippets from GitHub Gists using iframes. However, I'm facing a security-related problem

When I try to embed a Gist using an iframe with a source URL like this:

//COMPONENT
import { Component } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
@Component({
  selector: 'app-code-block',
  templateUrl: './code-block.component.html',
  styleUrls: ['./code-block.component.scss'],
})
export class CodeBlockComponent {
  constructor(private sanitizer: DomSanitizer) {}

  gistUrl: string =
    'https://gist.github.com/KeanuBarnardd/c058985c88b93f6b7247da50ff927a28';
    
  getSafeUrl(url: string): SafeResourceUrl {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

// HTML
<iframe [src]="getSafeUrl(gistUrl)" frameborder="0"></iframe>

I receive the following error in my browser console: ERROR Error: NG0904: unsafe value used in a resource URL context

I have attempted to use Angular's DomSanitizer to bypass security, but it doesn't resolve the issue.

I've also tested this in different browsers with the same result.

I've tried the methods given here all of them seem to be outdated. How to embed a GitHub gist in the Angular template?

I've also tried just putting the embedding tag directly into the HTML that doesn't work either as I get an HTML stripping security error.

Any help would be good thanks.