It's not working with Angular component ? about x-frame-bypass HOT 3 OPEN

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

from x-frame-bypass.

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.

from x-frame-bypass.

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

from x-frame-bypass.