Unable to interact with Glitch.io embeded iframe in Angular

Coding Help
1

Hello, due to difficulities in getting Three.js to work within my Angular 8 application I have decided to use Glitch.io to host my Three.js project and then embed that within an Angular component. However, I believe Angular automatically treats foreign resource URLs as unsafe and strips the functionality to prevent XSS attacks. I have attempted to use Angular’s DomSanitizer to mark the src url as safe but I am still unable to interact with the embedded iframe.

learn.component.ts

import { Component, OnInit, } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-learn',
  templateUrl: './learn.component.html',
  styleUrls: ['./learn.component.css']
})
export class LearnComponent implements OnInit {

  safeURL: any;

  constructor(private sanitizer: DomSanitizer) {
    this.safeURL = sanitizer.bypassSecurityTrustResourceUrl("[GLITCH.IO GENERATED URL]")
  }

  ngOnInit() {

  }
}

learn.component.html

 <div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
     <iframe
         [src]="safeURL"
         title="uf-3d-rocket on Glitch" allow="geolocation; microphone; camera; midi; vr; encrypted-media"
         style="height: 100%; width: 100%; border: 0;">
     </iframe>
 </div>

This is what I get when viewing the app and inspecting:

sample
sample2560×959 179 KB

I am supposed to be able to drag the 3D environment but I cannot. Additionally, even the share/view source buttons cannot be interacted with so it seems like the url was not properly sanitized. I’ve tried this with pipes too but at this point I just need this working in a single place in the app so either way works.

Thank you in advance.

2

None of the errors in the DevTools console is due to Angular. They are just blocked by your browser - usually by extensions as most of the links blocked are just tracking services.

Also I’m unsure as to why you need to use Angular to display an iframe?

Also I don’t like web frameworks, they’re annoying.

3

Hi @DEEX3545, welcome to the Glitch forums! Am I correct in my understanding that the iframe seems to be loading on the page correctly, but you aren’t able to interact with it as you expected? Do you know where in your code (if it is in your code) those POST requests are firing off from?