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

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

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

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

Хорошо, потратив больше времени на это с помощью этого поста

Преодоление «Отображение запрещено X-Frame-Options»

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

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

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

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>

В этом случае они установили заголовок 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 для vimeo, измените URL с:

https://vimeo.com/63534746

чтобы:

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

Меня устраивает.

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

У меня была та же проблема, реализованная в Angular 9. Вот два шага, которые я сделал:

1. Измените URL своего YouTube с https://youtube.com/your_codeна https://youtube.com/embed/your_code.

2. А затем передать URL через DomSanitizerAngular.

   import { Component, OnInit } from "@angular/core";
   import { DomSanitizer } from '@angular/platform-browser';
   
   @Component({
     selector: "app-help",
     templateUrl: "./help.component.html",
     styleUrls: ["./help.component.scss"],
   })
   export class HelpComponent implements OnInit {
   
     youtubeVideoLink: any = 'https://youtube.com/embed/your_code'
   
     constructor(public sanitizer: DomSanitizer) {
       this.sanitizer = sanitizer;   
     }
   
     ngOnInit(): void {}
   
     getLink(){
       return this.sanitizer.bypassSecurityTrustResourceUrl(this.youtubeVideoLink);
     }
   
   }

   <iframe width="420" height="315" [src]="getLink()" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

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

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

Спасибо за вопрос. Для iframe YouTube первой проблемой является указанный вами 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>

Angular 2/5 еще раз спасибо.

добавить ниже с URL суффикс

/override-http-headers-default-settings-x-frame-options

У меня была похожая проблема с чатом на YouTube, и я понял это. Может быть, есть аналогичное решение для аналогичной проблемы.

Refused to display 'https://www.youtube.com/live_chat?v=yDc9BonIXXI&embed_domain=your.domain.web' in a frame because it set 'X-Frame-Options' to 'sameorigin'

Моя веб-страница работает с www и без него. Поэтому, чтобы это работало, вам нужно убедиться, что вы загрузили тот, который указан в значении embed_domain = ... Возможно, вам не хватает переменной, чтобы указать, куда вставлять ваш iframe. Чтобы решить мою проблему, пришлось написать скрипт для определения правильной веб-страницы и выполнения правильного встроенного доменного имени в iframe.

<iframe src='https://www.youtube.com/live_chat?v=yDc9BonIXXI&embed_domain=your.domain.web' width="100%" height="600" frameborder='no' scrolling='no'></iframe>

или

<iframe src='https://www.youtube.com/live_chat?v=yDc9BonIXXI&embed_domain=www.your.domain.web' width="100%" height="600" frameborder='no' scrolling='no'></iframe>

Поймите, что вы не используете iframes, но все же может быть некоторая переменная, которую вам нужно добавить в свой синтаксис, чтобы указать, где будет использоваться скрипт.

С подобной проблемой столкнулся при использовании 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);
});

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 =", другой нет