'X-Frame-Options'를 'SAMEORIGIN'으로 설정하여 프레임에 표시하지 않습니다.

사람들이 휴대 전화에서 웹 사이트에 액세스 할 수 있도록 반응 형 웹 사이트를 개발 중입니다. 이 사이트에는 Google, Facebook 등 ... (OAuth)을 사용하여 로그인 할 수있는 보안 부분이 있습니다.

서버 백엔드는 ASP.Net Web API 2를 사용하여 개발되었으며 프론트 엔드는 주로 일부 Razor가있는 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'.

지금까지는 HTML 파일에 iframe을 사용하지 않는 것이 좋습니다.

나는 주변을 둘러 보았지만 아무런 문제도 해결하지 못했습니다.

나는 어쩌면 누군가가 대신 할 수 있습니다, 더 나은 솔루션을 발견 "watch?v="하여 "v/"그것을 작동합니다

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

이 SO 포스트의 도움으로 이것에 더 많은 시간을 보낸 후 OK

"X-Frame-Options에 의해 금지 된 디스플레이"극복

&output=embedGoogle URL에 게시하기 전에 URL 끝에 추가하여 문제를 해결했습니다 .

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은 교차 도메인을 표시 할 수 없습니다

이를 위해서는 아파치 또는 사용중인 다른 서비스의 위치와 일치해야합니다.

아파치를 사용하는 경우 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>

vimeo에 iframe을 사용하는 경우 URL을 다음에서 변경하십시오.

https://vimeo.com/63534746

에:

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

그것은 나를 위해 작동합니다.

angularjs 페이지에 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>

아래 변경 사항을 수행하고 잘 작동합니다.

속성을 추가하십시오 <iframe src="URL" target="_parent" />

_parent: 이것은 같은 창에 포함 된 페이지를 엽니 다.

_blank: 다른 탭에서

나를 위해 수정은 console.developer.google.com으로 이동하여 OAuth 2 자격 증명의 "자바 스크립트 출처"섹션에 애플리케이션 도메인을 추가했습니다.

조금 늦었지만을 native application Client ID대신 사용하면이 오류가 발생할 수도 있습니다 web application Client ID.

Angular 9에서 구현하는 것과 동일한 문제가 발생했습니다.이 두 단계는 다음과 같습니다.

1. YouTube URL을에서 (으) https://youtube.com/your_code로 변경하십시오 https://youtube.com/embed/your_code.

2. 그런 다음 DomSanitizerAngular를 통해 URL을 전달하십시오 .

   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>

부모를 참조하여 나를 위해 일한 해결책이 있습니다. Google 인증 페이지로 리디렉션되는 URL을 얻은 후 다음 코드를 시도 할 수 있습니다.

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"를 분리합니다. 비디오 ID를 가져 와서 포함 된 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

유튜브 채팅을 포함시키는 비슷한 문제가 있었고 알아 냈습니다. 비슷한 문제에 대한 비슷한 해결책이있을 수 있습니다.

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>

iframe을 사용하고 있지는 않지만 스크립트를 사용할 위치를 알려주기 위해 구문에 추가해야 할 변수가있을 수 있습니다.

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

하나는 "watch? V ="를 유지해야하고 다른 하나는 그렇지 않아야합니다.