Я пытаюсь загрузить другой веб-сайт, где у меня будет список веб-сайтов. Если я нажму на ссылку веб-сайта, он должен открыть веб-сайт внутри моего углового приложения. Есть ли какая-либо опция, доступная в angular или где-либо еще, которую я могу использовать для загрузки сайта, где они ограничивают загрузку сайтов?
Я пробовал использовать функции загрузки HTML-тегов iframe, embed, object и jquery для загрузки сайта. Некоторые веб-сайты открываются, а некоторые сайты ограничивают открытие в других приложениях.
<html>
<body>
<iframe src = "https://stackoverflow.com" height = "100%" width = "100%"></iframe>
</body>
</html>
В угловом
<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);
}
}
Например, я ожидаю загрузить домашнюю страницу StackOverflow, но получаю сообщение об ошибке типа Отказался отображать «https://stackoverflow.com/» во фрейме, потому что он установил «X-Frame-Options» на «sameorigin».. Параметры браузера по умолчанию ограничивают загрузку страницы в iframe, если владелец сайта не хочет этого разрешать. Поэтому я хочу альтернативные варианты вместо iframe
Попробуйте DOM Sanitizing элемента и добавьте его с помощью div как innerHTML. Так что у вас будет div-оболочка для управления iframe.
к вашему сведению. https://angular.io/api/platform-browser/DomSanitizer
Чтобы узнать, как создать канал с помощью дезинфицирующего средства DOM, следуйте это.
Используйте окно.открыть(). Это довольно просто!
В вашем файле component.html-
<a (click) = "goToLink("www.example.com")">page link</a>
В вашем файле component.ts-
goToLink(url: string){
window.open(url, "_blank");
}
Вместо использования "_blank" используется "_self"
window.open откроет новую вкладку в браузере. Но я хочу добавить содержимое страницы в один из элементов html в своем приложении.
затем использовал <iframe src = "https://stackoverflow.com" height = "100%" width = "100%" target = "_self"></iframe>
Вы можете попробовать так.
<object data = "https://stackoverflow.com" width = "600" height = "400">
<embed src = "https://stackoverflow.com" width = "600" height = "400"/>
</object>
теги object и embed также не дают решения
«X-Frame-Options» применяются владельцами/серверами, чтобы люди не могли использовать свой сайт как на других сайтах, использующих Iframe.
Подумайте о ситуации: если вы запускаете Google в iframe на всей странице, вы можете использовать свой URL-адрес для обслуживания Google, вы также можете делать много других сумасшедших вещей.
Есть некоторые расширения chorme/FF, которые вы можете обойти. Но вы не можете ожидать, что все ваши пользователи будут использовать это.
https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe
Это поможет решить проблему или хотя бы с точки зрения развития
если у вас есть права собственности или связь с сайтом, то вы можете легко отключить это ограничение. Если проблема решена, отметьте ее как принятую :)
в основном заголовки для веб-сайта устанавливаются на веб-сервере, если заголовки «X-Frame-Options» в файлах установлены как одинаковые, вы не можете загрузить сайт из любого другого источника.
«X-Frame-Options» — это заголовок, который в основном не позволяет никому загружать ваш веб-сайт внутри другого веб-сайта.
единственное, что вы можете сделать, это открыть сайт в новой вкладке/окне, или вы можете просто перенаправить в том же приложении.
Я тоже пробовал это, создав модуль безопасного канала с очисткой bypassSecurityTrustResourceUrl, но это тоже не сработало.