如何在我的 Angular 组件中打开其他 web 站点

Question

I am trying to make a web application that should open a web site inside a component then the tool will act like selenium. The senerio like this. User type link and hit enter. Then we open the web page inside the component. There is several ways to open a web page inside it like Iframe, embed, object etc. But here is the thing the web pages block me because of the CORS POLICY So is there way to achive this. Thank you.

Answer 1

You need to use dom sanitizer and your cross domain should accept your request through iframe.

Here is an example stackblitz. https://stackblitz.com/edit/angular-158g4a

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(private domSanitizer: DomSanitizer){}
  //https://www.google.com/  // does not work
  //https://angular.io/     // works fine
  url = this.domSanitizer.bypassSecurityTrustResourceUrl('https://angular.io/')
  name = 'Angular';
}