0

I'm having issues retrieving elements inside on an iFrame. Let's spend first two words about how the site is structured (don't ask me why in that way lol):

  • There is the main website, let's call it website A;
  • Inside website A, there is a iFrame, which is an entire another project, let's call it website B;
  • Inside website B, there is a specific section which have another iFrame, which will show slideshows, hosted on an s3 bucket.. inside an iFrame;

Summary, there is an Amazon S3 bucket content (html) shown in iFrame inside website B, which is an iFrame of website A.

Now, I want to access to elements inside the inner html, the one showed through a public s3 bucket inside the inner iFrame. I'm using angular 8 with TypeScript, I'm able to get the iFrame as native element, but I'm not able to access contentDocument. This is how the code looks like of the component of website B which have the tag on its html:

  @ViewChild('iframe', { read: ElementRef, static: true }) iframe: ElementRef;

  ngAfterViewInit() {
    this.iframe.nativeElement.onload = () => {
      this.intervalSubscription = timer(1000, 250).subscribe(() => {
        
        console.log(this.iframe.nativeElement.contentDocument);

        if(this.iframe.nativeElement.contentDocument != null){
          const doc: HTMLDocument = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow.document;
          let nextButton: HTMLElement;
          ['.component_base.next', '.universal-control-panel__button_next', '.uikit-primary-button_next', '#next'].some(selector => {
            nextButton = doc.querySelector(selector) as HTMLElement;
            return !!nextButton;
          });
  
          if (nextButton && (nextButton.hasAttribute('disabled') || nextButton.style.display === 'none')) {
            this.slideshowCompleted.emit(true);
            this.intervalSubscription.unsubscribe();
          }
        }        
      });
    };
  }

I'm getting this error:

ERROR DOMException: Blocked a frame with origin "http://localhost:4400" (which is website B) from accessing a cross-origin frame.

enter image description here If I console log the contentDocument is null, even tho the html get displayed fine. I even set some cors stuffs on the bucket as chat gpt suggested me to lol but didn't worked.. any advice?? I need to have access to a specific button inside this html, because basically when it's disabled it means the user finished watching the slideshow and I'll call backend to update a value about the progress of the slideshow is done

This is what I get instead if I console.log(this.iframe.nativeElement) only:

enter image description here

Raso
  • 1
  • 1
  • Browsers will not allow a page (domain A) to access iframe content from a different domain (domain B). It's basic security. There are mechanisms that allow messages to be posted and received between different-domain pages in that situation. – Pointy Aug 26 '23 at 12:10
  • Do you think I can configure that from amazon s3 bucket? because there is a section which says: << Cross-origin resource sharing (CORS) CORS (Cross-Origin Resource Sharing) configuration, written in JSON format, defines a method by which client Web applications loaded in one domain can interact with resources located in a different domain >> It looks like what I need, but I tried to set those stuffs up but still nothing :( – Raso Aug 26 '23 at 12:18
  • CORS has to do with JavaScript from a domain A page issuing xhr requests to domain B. If domain B thinks that's OK, it can respond with headers (the CORS headers) to tell the browser it's OK for domain A to get the content. – Pointy Aug 26 '23 at 12:19
  • You can use messaging between the the iframe page. Once an iframe has loaded, it can send a message to the parent page indicating it is up and running, and the parent page then has the iframe’s messaging ‘address’ and can reply sending anything it likes. The host page has to put code creating a listener/handler for the iframe's message: – Nikkorian Aug 26 '23 at 14:28
  • for example: For mor info see https://stackoverflow.com/questions/9153445/how-to-communicate-between-iframe-and-the-parent-site – Nikkorian Aug 26 '23 at 14:36

0 Answers0