How to open other web sites inside angular application

Asked 22/5, 2019 at 6:12 Answered 22/5, 2019 at 7:49

Solved html angular iframe x-frame-options

I am trying to load the other website where I will have a list of websites. If I click on the website link it has to open the website inside my angular application. Is there any option available in angular or anywhere that I can use to load the site where they restrict to load the sites

I have tried with HTML tag elements iframe, embed, object and jquery load functions to load the site. Some of the websites are opening and some sites restrict to open on other applications

<html>
<body>
<iframe src="https://stackoverflow.com" height="100%" width="100%"></iframe>
</body>
</html>

In angular

  <div >
    <iframe id="companyFrame" [src]="sourceURL | safe" class="frame"> 
    </iframe>
  </div>

  @Pipe({ name: "safe" })
  export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
   }
  }

For example, I expect to load StackOverflow home page site but I got an error like Refused to display 'https://stackoverflow.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. It is browser default options to restrict load the page in iframe if the site owner does not want to allow it. So I want alternative options instead of iframe

Alluvion answered 22/5, 2019 at 6:12 Comment(0)

'X-Frame-Options' are enforced by the owners/servers so that people cannot use their site as a in other sites using Iframe .

Think like a situation : if you launch google in iframe in your whole page , then you can use your url to serve google, you can do many more crazy things also .

There are some chorme/FF extension you can use it to bypass. But you cannot expect that your all users will be using that.

https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe

Isologous answered 22/5, 2019 at 6:39 Comment(2)

It will help to solve the problem or at least from development perspective – Alluvion 22/5, 2019 at 6:48

if you have ownersip or connection with the site the, then you can easily disable this restriction. If it resolves your issue , please mark it as accepted :) – Isologous 22/5, 2019 at 6:53

You can try like this.

<object data="https://stackoverflow.com" width="600" height="400">
    <embed src="https://stackoverflow.com" width="600" height="400"/>
</object>

Interflow answered 22/5, 2019 at 6:32 Comment(1)

object and embed tags also not providing a solution – Alluvion 22/5, 2019 at 6:36

basically the headers for a website are set in web server, if the headers 'X-Frame-Options' on files are set as sameorigin, you cannot load the site from any other origin.

'X-Frame-Options' is the header set to basically not allow anyone to load your website inside another website.

only thing you can do is, open the site in a new tab / window, or you can just redirect inside same app.

Jenine answered 22/5, 2019 at 7:49 Comment(0)

Try DOM Sanitizing the element and add it with the help of div as innerHTML. So that you will have the wrapper div to control iframe.

FYI. https://angular.io/api/platform-browser/DomSanitizer

Arroyo answered 22/5, 2019 at 6:22 Comment(2)

I have tried that too by creating safe pipe module with sanitizing bypassSecurityTrustResourceUrl but it did not work as well – Alluvion 22/5, 2019 at 6:28

To know how to create a pipe using DOM sanitizer follow this – Morril 26/5, 2021 at 11:1

Use window.open(). It's pretty straightforward !

In your component.html file-

<a (click)="goToLink("www.example.com")">page link</a>

In your component.ts file-

goToLink(url: string){
window.open(url, "_blank");
}

Instead of using "_blank" used "_self"

Cosmogony answered 22/5, 2019 at 6:26 Comment(2)

window.open will open a new tab in the browser. But I want to add the page content in one of html element in my application – Alluvion 22/5, 2019 at 6:52

then used <iframe src="https://stackoverflow.com" height="100%" width="100%" target="_self"></iframe> – Cosmogony 22/5, 2019 at 7:2

Recommended topics

Hot tags