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


272

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

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


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

Ответы:


171

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

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

51
Вы также можете изменить это, чтобы использовать «embed /» вместо «v /», чтобы полный URL стал:<iframe width='1080' height='760' src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
backwardm

1
я предлагаю изменить этот ответ на «вставлять /», потому что «v /» больше не работает
tm81

88

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

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

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

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

1
на самом деле это для OAUTH, как я уже говорил в моем первоначальном посте. и до сих пор в OAUTH 2.0. Тем не менее, Google изменил свои настройки, чтобы использовать службу, поэтому теперь вам необходимо изменить некоторые свойства, чтобы использовать OAUTH 2.0, как это имеет место в промежуточном программном обеспечении OWIN 3.0. Обратитесь по этой ссылке, если вы получаете сообщение об ошибке «access_denied». blogs.msdn.com/b/webdev/archive/2014/07/02/…
Али Хмер

1
@AliHmer Большое спасибо, приятель. Вы спасли мой день :) & output = embed работал как очарование для меня .. :)
Sahil Manchanda

1
Также не работает для iframe Google-календаря в веб-просмотре приложения.
NoBugs


35

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

2
Что такое your_relative_path?
Грин,

2
Что это ваш_относительный_путь?
Собиоголик


11

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


7

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

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

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

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


1
Я не знаю, насколько уместен этот ответ на исходный вопрос, но в моем случае, в другом контексте, он дал решение
Эрик Виала

4

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


2

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


Что вы имеете в виду? Я также заметил, что фрейм работает в окне Safari, но не в фрейме веб-просмотра приложения, но как это изменить?
NoBugs

У меня была похожая проблема: при создании идентификатора клиента веб-приложения я не включал Uris своего веб-сайта в два раздела, которые вы помещали в него при создании идентификатора клиента в консоли разработчиков Google
Phylliida

2

У меня была та же проблема, реализованная в 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>

1

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

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

0

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


0

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

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

0

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


-1

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


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.