It's not working with Angular component ?

[bkpatil]

Hello, it's working in angular inex.html file, but when trying to implement inside the component it's throwing this error - "Refused to display 'https://in.linkedin.com/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' ".
so, how to achieve inside the component.

[niutech]

Could you show me a demo, e.g. using JSFiddle?

[The-MAZZTer]

Set a breakpoint in the constructor of the x-frame-bypass class. Chances are it is not being instantiated and you are looking at a normal iframe.

I think this is because the Angular HTML templates get converted to real HTML differently enough that custom elements that use the is attribute don't get created; they use the base element instead, so you are seeing a normal iframe.

My workaround for this was to inject the raw HTML for the iframe so Angular wasn't responsible for creating it.

My example:

HTML template:

<aside #aside>
</aside>

TypeScript:

    @ViewChild("aside", {static: true}) private aside: ElementRef<HTMLElement>;

private async showAside(): Promise<void> {
    this.aside.nativeElement.innerHTML =
    `<iframe is="x-frame-bypass" allow="fullscreen 'none'; geolocation 'none'; camera 'none'; microphone 'none'" sandbox="allow-scripts"></iframe>`;
    this.aside.nativeElement.getElementsByTagName("iframe")[0].src = URL_HERE; // Doing it this way so I don't have to worry about escaping the url by hand. There's no issue with embedding it directly in the innerHTML.
}

Angular claims it has support for custom elements but that might only extend to ones that don't inherit from an existing element, not sure.

[The-MAZZTer]

@niutech I made my own demo, it's in the linked angular bug report. Pretty sure this is an angular bug.