Відмовляється відображатись у кадрі, оскільки він встановив "Параметри X-Frame" на "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'.

На сьогоднішній день я не використовую жодних кадрів у своїх HTML-файлах.

Я погукав, але жодної відповіді не вдалося вирішити.

Я знайшов краще рішення, можливо, це може допомогти комусь замінити "watch?v=", "v/"і воно спрацює

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

Гаразд, витративши більше часу на це за допомогою цієї публікації SO

Подолання "Дисплей заборонений параметрами X-Frame"

Мені вдалося вирішити проблему, додавши &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, тоді у файлі 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" облікових даних OAuth 2.

Трохи пізно, але ця помилка також може бути спричинена, якщо ви використовуєте native application Client IDзамість web application Client ID.

У мене був той самий випуск, що реалізується в куті 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);

Дякую за запитання. Для 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 ще раз дякую.

додайте нижче за допомогою 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 = value ... Можливо, є ваша змінна, яка відсутня, щоб сказати, куди слід вставляти ваш 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 =", іншому ні