Отказался отображать в кадре, потому что он установил "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-файлах.

я погуглил вокруг, но никакого ответа не получил, чтобы исправить проблему.

219
angularjs asp.net-web-api google-oauth

11 ответов

Я нашел лучшее решение, это может помочь кому-то заменить "watch?v=" by "v/" и это будет работать

var url = url.replace("watch?v=", "v/");
155

O. K. потратив больше времени на это с помощью этого so post

преодоление "отображение запрещено X-Frame-Options"

мне удалось решить проблему путем добавления &output=embed до конца url-адреса перед отправкой на URL-адрес google:

var url = data.url + "&output=embed";
window.location.replace(url);
75

в этом случае они установили заголовок в SAMEORIGIN, что означает, что они запретили загрузку ресурса в iframe вне своего домена. Так этот iframe не способен отображать домен крест

enter image description here

для этого вам нужно соответствовать местоположению в вашем 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>
25

попробуйте использовать

https://www.youtube.com/embed/YOUR_VIDEO_CODE

вы можете найти весь встроенный код в разделе "встроенный код", и это выглядит так

<iframe width="560" height="315"  src="https://www.youtube.com/embed/YOUR_VIDEO_CODE" frameborder="0" allowfullscreen></iframe>
25

Если вы используете iframe для vimeo, измените url-адрес:

https://vimeo.com/63534746

в:

http://player.vimeo.com/video/63534746

Это работает для меня.

16

для встраивания видео 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>
11

Я сделал следующие изменения и отлично работает для меня.

просто добавьте атрибут <iframe src="URL" target="_parent" />

_parent: это откроет встроенную страницу в том же окне.

_blank: в другой вкладке

4

для меня исправление должно было войти в console.developer.google.com и добавьте домен приложения в раздел "JavaScript Origins"учетных данных OAuth 2.

3

немного поздно, но эта ошибка также может быть вызвана, если вы используете native application Client ID вместо web application Client ID.

2

Спасибо за вопрос. Для 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 спасибо снова.

2

есть решение, которое сработало для меня, ссылаясь на родителя. После получения url-адреса, который перенаправит на страницу аутентификации google, вы можете попробовать следующий код:

var loc = redirect_location;      
window.parent.location.replace(loc);
0