How to open other web sites inside angular application
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
Answer
'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