Отказался отображать в кадре, потому что он установил "X-Frame-Options" в "SAMEORIGIN"
Я разрабатываю веб-сайт, который должен быть отзывчивым, чтобы люди могли получить доступ к нему со своих телефонов. На сайте есть некоторые защищенные части, которые можно войти в систему с помощью Google, Facebook,...и т. д. (протокол OAuth).
серверная часть разрабатывается с использованием ASP.Net веб-API 2 и передняя часть в основном AngularJS с некоторой бритвой.
для части аутентификации все работает нормально во всех браузерах, включая Android, но аутентификация Google не работа на iPhone, и это дает мне это сообщение об ошибке
Refused to display 'https://accounts.google.com/o/openid2/auth
?openid.ns=http://specs.openid.ne…tp://axschema.org/namePerson
/last&openid.ax.required=email,name,first,last'
in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
теперь, насколько я обеспокоен, я не использую iframe в моих HTML-файлах.
я погуглил вокруг, но никакого ответа не получил, чтобы исправить проблему.
11 ответов
Я нашел лучшее решение, это может помочь кому-то
заменить "watch?v="
by "v/"
и это будет работать
var url = url.replace("watch?v=", "v/");
O. K. потратив больше времени на это с помощью этого so post
преодоление "отображение запрещено X-Frame-Options"
мне удалось решить проблему путем добавления &output=embed
до конца url-адреса перед отправкой на URL-адрес google:
var url = data.url + "&output=embed";
window.location.replace(url);
в этом случае они установили заголовок в SAMEORIGIN, что означает, что они запретили загрузку ресурса в iframe вне своего домена. Так этот iframe не способен отображать домен крест
для этого вам нужно соответствовать местоположению в вашем apache или любой другой службе, которую вы используете
Если вы используете Apache, то в httpd.файл conf.
<LocationMatch "/your_relative_path">
ProxyPass absolute_path_of_your_application/your_relative_path
ProxyPassReverse absolute_path_of_your_application/your_relative_path
</LocationMatch>
попробуйте использовать
вы можете найти весь встроенный код в разделе "встроенный код", и это выглядит так
<iframe width="560" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_CODE" frameborder="0" allowfullscreen></iframe>
для встраивания видео youtube на страницу angularjs, вы можете просто использовать следующий фильтр для вашего видео
app.filter('scrurl', function($sce) {
return function(text) {
text = text.replace("watch?v=", "embed/");
return $sce.trustAsResourceUrl(text);
};
});
<iframe class="ytplayer" type="text/html" width="100%" height="360" src="{{youtube_url | scrurl}}" frameborder="0"></iframe>
Я сделал следующие изменения и отлично работает для меня.
просто добавьте атрибут <iframe src="URL" target="_parent" />
_parent
: это откроет встроенную страницу в том же окне.
_blank
: в другой вкладке
для меня исправление должно было войти в console.developer.google.com и добавьте домен приложения в раздел "JavaScript Origins"учетных данных OAuth 2.
немного поздно, но эта ошибка также может быть вызвана, если вы используете native application Client ID
вместо web application Client ID
.
Спасибо за вопрос. Для YouTube iframe первой проблемой является URL, который вы дали, это встроенный URL или URL-ссылка из адресной строки. эта ошибка для не embed URL, но если вы хотите дать не embed URL, то вам нужно закодировать в "безопасной трубе", как (для не встроенного или встроенного URL ):
import {Pipe, PipeTransform} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
@Pipe({name: 'safe'})
export class SafePipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {
}
transform(value: any, url: any): any {
if (value && !url) {
const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
let match = value.match(regExp);
if (match && match[2].length == 11) {
console.log(match[2]);
let sepratedID = match[2];
let embedUrl = '//www.youtube.com/embed/' + sepratedID;
return this.sanitizer.bypassSecurityTrustResourceUrl(embedUrl);
}
}
}
}
он будет разделен "vedioId". Вы должны получить идентификатор видео, а затем установить URL как встроенный. В Html
<div>
<iframe width="100%" height="300" [src]="video.url | safe"></iframe>
</div>
угловая 2/5 спасибо снова.
есть решение, которое сработало для меня, ссылаясь на родителя. После получения url-адреса, который перенаправит на страницу аутентификации google, вы можете попробовать следующий код:
var loc = redirect_location;
window.parent.location.replace(loc);