Youtube embed: Unsafe JavaScript attempt to access frame

Question

We have a Wicket app with a page that includes an embedded Youtube video. The video embeds and plays fine, but apparently it causes the rest of the page to not render- it seems that the DOM elements coming after the embed simply don't show up on the page, despite being in the markup.

Looking at the error console in Chrome reveals:

Unsafe JavaScript attempt to access frame with URL http://example.com/detail/COMMUNICATION/search/com-sonyericsson-hanashi from frame with URL http://www.youtube.com/embed/eJY7_De5opI?enablejsapi=1&autohide=1&showinfo=1. Domains, protocols and ports must match.

I've googled this a fair amount, and people seem to be saying that it's innocuous and to ignore it. That just seems wrong, and in our case it actually breaks the page.

If we change our app so that the video is embedded dynamically via an ajax callback (user clicks a Wicket AjaxLink) we still get the error in the console, but at least the page renders fully. Unfortunately this won't work for us, as we need the video to be loaded by default when the user first hits the page.

Edit: I should add that although the error message was taken from the Chrome console, the bug seems to affect every browser I've tried: Chrome, Safari and Firefox.

Dissert

I know this is an old item but have you checked out how Facebook does it? They do not get errors every time. They use the old <embed> tag but they do it within a facebook iFrame (i believe i have this all correct). – Proofread

Didn't seem innocuous to me. My JavaScript API calls didn't work until I switched from the <iframe> to the <embed> code. – Kierstenkieselguhr

Answer 1

The security error is unlikely to break your page. It looks like the error is happening from within the YouTube frame, which means that in the worst case the content of the frame will be messed up.

A frame/iframe from an external page cannot, under any circumstances effect the content of the parent document unless they are from the same domain and port number. It is one of the hard rules of browser security.

The error must be elsewhere in your markup. Any chance of seeing some example markup?

[edit]

The error could also be in the embed code markup. Or, if any script tags are included directly on the page (not in the iframe) it could be there.

Usually when problems like this happens it is because of an unclosed tag somewhere but it could be Javascript as well.

Namecalling

This is going to sound terrible because it is so non-intuitive. But, iframes cannot be closed inline and still be compatible with most browsers. So instead of using /> you need to use ></iframe> – Namecalling

Wow, I cannot believe that was it. I should know better: I wrote this a few days back, and it's essentially the same issue: #6207809. Many thanks, Andrew. – Dissert

You're welcome. I never understood why <iframe> can't be closed inline :) it is one of my pet peeves. – Namecalling

iframes don't self close because they can contain content to display for browsers that can't render iframes, equivalent to a noscript tag. Self-closing tags are prominent in xhtml, but caveat emptor - xhtml does not rely on the doctype, but on the content-type. If your headers are set to deliver text/html, the browser interprets it as html, not xhtml and can cause rendering errors such as these. – Nude

Also, don't create your iframe with Javascript (such as $.html('<iframe...') but in HTML and use $('IFRAME').attr('src', ....) to play with it ! – Beavers

Sorry - but with the youtube API, you specify the ID of a DOM element, and it replaces that element with a script tag, so how can you solve the iframe closing / not declaring with script issues mentioned above? – Leandra

But the Android 4.0 default Browser and Chrome on Android won't have this problem. How do they solve this? – Eudo

proper iFrame closing does not fix anything – Phillipp

Modern browsers seem to be a lot more tolerant of not closing the iframe. two years ago when this question was posted that was not the case. The question here was why the page no longer rendered after the embedded video. It just stopped. The unsafe Javascript attempt was evidence of what might be part of the problem. In this case it was not part of the problem. My answer addresses the rendering issue not the Javascript access attempt. I did, however, in my post touch on why that error cannot effect the rendering of your page outside of the frame. – Namecalling

Mine script: String html = "<iframe class=\"youtube-player\" style=\"border: 0; width: 100%; height: 95%; padding:0px; margin:0px\" id=\"ytplayer\" type=\"text/html\" src=\"youtube.com/embed/1J0aXDbjiUE?autoplay=1" + "?fs=0\" frameborder=\"0\">\n" + "</iframe>"; mWebView.loadData(html, "text/html", null); I still got the "Unsafe javascript ..." error – Taperecord

Answer 2

If you are having an issue resolving that JavaScript error, you can try using YouTube's old embed code. It's an option on every YouTube video once you click on embed. You will not have that error because it does not use iframes. The code would look something like this:

<object width="560" height="315">
    <param name="movie" value="http://www.youtube.com/v/9DXL9vIUbWg?version=3&amp;hl=en_US&amp;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&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

Hope this helps.

Disobedience

This doesn't always play well with responsive design on mobile browsers. – Untimely

plus with <object> approch, you are getting a lot of: .PPAPIContext: GL ERROR :GL_INVALID_VALUE : glTexSubImage2D: bad dimensions. errors – Phillipp

Answer 3

I voted for Jonathan Torres' answer, because his code stopped the Javascript warnings. However I then discovered errors when I validated the code.

So my answer is this...

Tick the "Use old embed code" checkbox when using YouTube's embed code so you're not using the iframe.

To make the code validate you need to add....

type="movie"

and

data="http://SAME YOUTUBE URL USED IN THE FIRST PARAM ELEMENT/"

to the OBJECT element. Then make the PARAM elements self-closing (but not the EMBED element).

This should make your YouTube code look like this...

<object width="560" height="315" type="movie" data="http://www.youtube.com/v/9DXL9vIUbWg?version=3&amp;hl=en_US&amp;rel=0">
<param name="movie" value="http://www.youtube.com/v/9DXL9vIUbWg?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/9DXL9vIUbWg?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

You then ought to get no Javascript warnings and your code should validate.

Mawson

Thank you for taking the time to figure this out and post! Worked for me. – Agglutinative

Answer 4

The Unsafe JavaScript attempt to access frame error has nothing to do with your page not rendering. Broken markup (e.g. a missing </iframe>) is the most probable reason.

As for the Unsafe JavaScript attempt to access frame error, you have a few options:

1. Easiest solution is to use the IFrame Player API instead of manually adding iframe tags. The API is a piece of JavaScript that generates the iframe tag for you and adds the parameters that will (or should) eliminate the frame access error. Here are the instructions for using IFrame Player API to load a player.

2. The manual solution is to build the <iframe> tags and append the &origin=http://example.com parameter to the URLs. Quote:

As an extra security measure, you should also include the origin parameter to the URL, specifying the URL scheme (http:// or https://) and full domain of your host page as the parameter value. While origin is optional, including it protects against malicious third-party JavaScript being injected into your page and hijacking control of your YouTube player.

Gradualism

Tried the second approach but it was no good. Still received the console warning. Thanks. – Abject

No this still causes problem.s – Quaker

Answer 5

for me it worked by using the code here: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

the lines i fixed see the words market with 2 asterix ** code:

from this:

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
                }
            }));
        }

      }

to this:

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
            }
        }));
    }

  }

Bellabelladonna

I think you are on to something here, but.. I thought (don't know why) that their code should remain intact. Meaning, with no changes. Can we change the code they give as an example?. Oh... and now I see this solution from 2013. I think you'll get the "TrustedSites" issue today. – Demy