Youtube 삽입 : 프레임에 액세스하려는 안전하지 않은 JavaScript 시도
YouTube 동영상이 포함 된 페이지가있는 Wicket 앱이 있습니다. 동영상이 제대로 삽입되고 재생되지만 페이지의 나머지 부분이 렌더링되지 않는 것 같습니다 . 삽입 이후 에 오는 DOM 요소가 마크 업에 있음에도 불구하고 페이지에 표시되지 않는 것 같습니다 .
Chrome의 오류 콘솔을 보면 다음과 같은 사실을 알 수 있습니다.
안전하지 않은 자바 스크립트 가 URL http://www.youtube.com/embed/eJY7_De5opI?enablejsapi=1&autohide=1&showinfo가있는 프레임에서 URL http://example.com/detail/COMMUNICATION/search/com-sonyericsson-hanashi 로 프레임 에 액세스하려고합니다 . = 1 . 도메인, 프로토콜 및 포트가 일치해야합니다.
나는 이것을 꽤 많이 봤고 사람들은 그것이 무해 하다고 말하고 그것을 무시하는 것 같습니다. 그것은 잘못된 것처럼 보이며 우리의 경우 실제로 페이지를 깨뜨립니다.
비디오가 ajax 콜백을 통해 동적으로 삽입되도록 앱을 변경하면 (사용자가 Wicket AjaxLink를 클릭 함) 콘솔에 여전히 오류가 발생하지만 적어도 페이지는 완전히 렌더링됩니다. 안타깝게도 사용자가 페이지를 처음 방문 할 때 기본적으로 동영상을로드해야하므로이 방법은 작동하지 않습니다.
편집 : Chrome 콘솔에서 오류 메시지를 가져 왔지만 버그는 Chrome, Safari 및 Firefox와 같은 모든 브라우저에 영향을 미치는 것으로 보입니다.
보안 오류로 인해 페이지가 손상되지는 않습니다. YouTube 프레임 내에서 오류가 발생한 것 같습니다. 즉, 최악의 경우 프레임의 내용이 엉망이됩니다.
외부 페이지의 프레임 / iframe은 동일한 도메인 및 포트 번호에 속하지 않는 한 어떤 상황에서도 상위 문서의 내용에 영향을 줄 수 없습니다. 이것은 브라우저 보안의 엄격한 규칙 중 하나입니다.
오류는 마크 업의 다른 곳에 있어야합니다. 예제 마크 업을 볼 수 있습니까?
[편집하다]
소스 코드 마크 업에 오류가있을 수도 있습니다. 또는 iframe이 아닌 페이지에 직접 포함 된 스크립트 태그가있을 수 있습니다.
일반적으로 이와 같은 문제가 발생하면 어딘가에 닫히지 않은 태그 때문이지만 Javascript 일 수도 있습니다.
JavaScript 오류를 해결하는 데 문제가있는 경우 YouTube의 이전 소스 코드를 사용해 볼 수 있습니다. 퍼가기를 클릭하면 모든 YouTube 동영상에 대한 옵션입니다. iframe을 사용하지 않기 때문에 오류가 발생하지 않습니다. 코드는 다음과 같습니다.
<object width="560" height="315">
<param name="movie" value="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
도움이 되었기를 바랍니다.
그의 코드가 Javascript 경고를 중지했기 때문에 Jonathan Torres의 답변에 투표했습니다. 그러나 코드의 유효성을 검사 할 때 오류를 발견했습니다.
그래서 제 대답은 ...
YouTube의 소스 코드를 사용할 때 "이전 소스 코드 사용"체크 박스를 선택하면 iframe을 사용하지 않습니다.
코드의 유효성을 검사하려면 추가해야합니다 ....
type="movie"
과
data="http://SAME YOUTUBE URL USED IN THE FIRST PARAM ELEMENT/"
받는 사람 OBJECT의 요소입니다. 그런 다음 PARAM 요소를 자동으로 닫습니다 ( EMBED 요소는 아님).
이렇게하면 YouTube 코드가 다음과 같이 보일 것입니다.
<object width="560" height="315" type="movie" data="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0">
<param name="movie" value="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
그런 다음 Javascript 경고가 표시되지 않아야하며 코드의 유효성을 검사해야합니다.
액세스 프레임에 안전하지 않은 자바 스크립트 시도 오류 페이지가 렌더링되지 함께 할 수 없다. 깨진 마크 업 (예 : 누락 된 </iframe>)이 가장 가능성있는 이유입니다.
에 관해서는 액세스 프레임에 안전하지 않은 자바 스크립트 시도 오류, 당신은 몇 가지 옵션이 있습니다 :
가장 쉬운 해결책은 iframe 태그를 수동으로 추가하는 대신 IFrame Player API 를 사용하는 것입니다. API는 iframe 태그를 생성 하고 프레임 액세스 오류를 제거 할 (또는 제거해야하는) 매개 변수를 추가하는 JavaScript의 한 부분입니다 . 다음은 IFrame Player API를 사용하여 플레이어를로드하는 방법입니다 .
수동 솔루션은
<iframe>태그&origin=http://example.com를 작성하고 URL에 매개 변수를 추가하는 것 입니다. 인용문:
추가 보안 조치로 URL 스키마 (http : // 또는 https : //)와 호스트 페이지의 전체 도메인을 매개 변수 값으로 지정하여 URL에 origin 매개 변수도 포함해야합니다. origin은 선택 사항이지만이를 포함하면 악성 타사 JavaScript가 페이지에 삽입되고 YouTube 플레이어의 제어를 가로채는 것을 방지 할 수 있습니다.
나를 위해 https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player 코드를 사용하여 작동했습니다.
내가 고친 줄은 2 개의 별표 ** 코드로 단어 시장을 참조하십시오 .
이것으로부터:
var tag = document.createElement('script');
tag.src = "**http://www.youtube.com/player_api**";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = new Array();
function **onYouTubePlayerAPIReady()** {
var ids = $('div.video div');
for(var i=0; i < ids.length; i++) {
players.push(new YT.Player('**yt**'+i, {
height: '400',
width: '596',
videoId: $(ids[i]).attr('rel'),
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
}));
}
}
이에:
var tag = document.createElement('script');
tag.src = "**https://www.youtube.com/iframe_api**";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = new Array();
function **onYouTubeIframeAPIReady()** {
var ids = $('div.video div');
for(var i=0; i < ids.length; i++) {
players.push(new YT.Player('**player**'+i, {
height: '400',
width: '596',
videoId: $(ids[i]).attr('rel'),
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
}));
}
}
ReferenceURL : https://stackoverflow.com/questions/6346176/youtube-embed-unsafe-javascript-attempt-to-access-frame
'development' 카테고리의 다른 글
| DataTables 고정 헤더가 와이드 테이블의 열과 잘못 정렬 됨 (0) | 2021.01.08 |
|---|---|
| PHP가 배열 키에 문자열을 사용하도록하려면 어떻게해야합니까? (0) | 2021.01.08 |
| 초기 거부 후 getUserMedia ()로 권한을 다시 요청합니다. (0) | 2021.01.08 |
| x86, arm, GCC 및 icc에서 작동하는 Linux에서 원자 연산을 수행하는 방법은 무엇입니까? (0) | 2021.01.08 |
| Google App Engine에서 스테이징 환경을 설정하는 방법 (0) | 2021.01.08 |