Отказано для отображения в кадре, потому что он установил 'X-Frame-Options' в 'SAMEORIGIN'

Я разрабатываю веб-сайт, который должен быть отзывчивым, чтобы люди могли получить к нему доступ со своих телефонов. На сайте есть некоторые защищенные части, которые могут быть зарегистрированы в Google, Facebook,... и т.д. (OAuth).

Бэкэнд сервера разработан с использованием ASP.Net Web API 2, а передний конец - в основном AngularJS с некоторыми Razor.

Для части аутентификации все работает нормально во всех браузерах, включая 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 файлах.

Я googled вокруг, но никакой ответ не заставил меня решить проблему.

Ответ 1

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

Преодоление "Отображение запрещено с помощью X-Frame-Options"

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

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

Ответ 2

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

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

Ответ 3

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

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>

Ответ 4

В этом случае они устанавливают заголовок 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>

Ответ 5

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

https://vimeo.com/63534746

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

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

Ответ 6

Для встраивания видео youtube в вашу страницу с угловыми углами вы можете просто использовать следующий фильтр для своего видео

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>

Ответ 7

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

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

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

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

Ответ 8

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

Ответ 9

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

Ответ 10

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

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

Ответ 11

Спасибо за вопрос. Для YouTube iframe первая проблема - это URL, который вы указали, это встроенный URL-адрес или URL-адрес из адресной строки. эту ошибку для не вставляемого URL-адреса, но если вы хотите указать не внедряемый 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 еще раз спасибо.

Ответ 12

эта ссылка решит вашу проблему, если вы используете браузер Google:https://support.google.com/youtube/answer/171780?hl=en

Ответ 13

С подобной проблемой столкнулся при использовании iframe для выхода из под-сайтов с разными доменами. Решением, которое я использовал, было сначала загрузить iframe, а затем обновить источник после загрузки кадра.

var frame = document.createElement('iframe');
frame.style.display = 'none';
frame.setAttribute('src', 'about:blank');
document.body.appendChild(frame);
frame.addEventListener('load', () => {
  frame.setAttribute('src', url);
});

Ответ 14

YouTube/Embed, два вкуса:

https://www.youtube.com/embed/watch?v=eAxV4uO8oTU&list=RDeAxV4uO8oTU&start_radio=1 https://www.youtube.com/embed/CNG7yrHHJ5A

вставьте в браузер и увидите

оригинал:

https://www.youtube.com/watch?v=eAxV4uO8oTU&list=RDeAxV4uO8oTU&start_radio=1 https://www.youtube.com/watch?v=CNG7yrHHJ5A

один должен держать "смотреть? V =", другой нет

Ответ 15

Простое решение - добавить расширение "Игнорировать заголовки X-кадра" в свой хром.