web-dev-qa-db-fra.com

Intégration YouTube: tentative JavaScript non sécurisée pour accéder au cadre

Nous avons une application Wicket avec une page qui comprend une vidéo Youtube intégrée. La vidéo s'intègre et joue correctement, mais apparemment, le reste de la page ne s'affiche pas - il semble que les éléments DOM qui viennent après l'incorporation n'apparaissent tout simplement pas sur la page, malgré être dans le balisage.

En regardant la console d'erreur dans Chrome révèle:

Tentative JavaScript non sécurisée d'accéder au cadre avec l'URL http://example.com/detail/COMMUNICATION/search/com-sonyericsson-hanashi à partir du cadre avec l'URL http://www.youtube. com/embed/eJY7_De5opI? enablejsapi = 1 & autohide = 1 & showinfo = 1 . Les domaines, protocoles et ports doivent correspondre.

J'ai googlé cela pas mal, et les gens semblent dire que c'est inoffensif et l'ignorer. Cela semble tout simplement faux, et dans notre cas, cela brise la page.

Si nous changeons notre application pour que la vidéo soit intégrée dynamiquement via un rappel ajax (l'utilisateur clique sur un Wicket AjaxLink), nous obtenons toujours l'erreur dans la console, mais au moins la page s'affiche entièrement. Malheureusement, cela ne fonctionnera pas pour nous, car nous avons besoin que la vidéo soit chargée par défaut lorsque l'utilisateur accède à la page pour la première fois.

Edit : Je dois ajouter que bien que le message d'erreur ait été tiré de la console Chrome Chrome, le bug semble affecter tous les navigateur que j'ai essayé: Chrome, Safari et Firefox.

javascriptiframeyoutubewicket
55
George Armhold

Il est peu probable que l'erreur de sécurité casse votre page. Il semble que l'erreur se produise à partir du cadre YouTube, ce qui signifie que dans le pire des cas, le contenu du cadre sera foiré.

Un cadre/iframe d'une page externe ne peut en aucun cas affecter le contenu du document parent à moins qu'ils ne proviennent du même domaine et du même numéro de port. C'est l'une des règles strictes de la sécurité des navigateurs.

L'erreur doit être ailleurs dans votre balisage. Une chance de voir un exemple de balisage?

[modifier]

L'erreur pourrait également être dans le balisage du code d'intégration. Ou, si des balises de script sont incluses directement sur la page (pas dans l'iframe), elles pourraient être là.

Habituellement, lorsque des problèmes comme celui-ci se produisent, c'est à cause d'une balise non fermée quelque part, mais cela peut également être Javascript.

24
Andrew Curioso

Si vous rencontrez un problème pour résoudre cette erreur JavaScript, vous pouvez essayer d'utiliser l'ancien code d'intégration de YouTube. C'est une option sur chaque vidéo YouTube une fois que vous cliquez sur intégrer. Vous n'aurez pas cette erreur car il n'utilise pas d'iframes. Le code ressemblerait à ceci:

<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>

J'espère que cela t'aides.

7
Jonathan Torres

J'ai voté pour la réponse de Jonathan Torres, car son code a arrêté les avertissements Javascript. Cependant, j'ai ensuite découvert des erreurs lors de la validation du code.

Donc ma réponse est la suivante ...

Cochez la case "Utiliser l'ancien code d'intégration" lorsque vous utilisez le code d'intégration de YouTube afin de ne pas utiliser l'iframe.

Pour valider le code, vous devez ajouter ....

type="movie"

et

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

au OBJET élément. Faites ensuite le PARAM éléments à fermeture automatique (mais pas EMBED élément).

Cela devrait donner à votre code YouTube l'apparence suivante ...

<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>

Vous ne devriez alors recevoir aucun avertissement Javascript et votre code devrait être validé.

5
adriandhart

L'erreur JavaScript non sécurisé pour accéder au cadre n'a rien à voir avec le fait que votre page ne s'affiche pas. Un balisage cassé (par exemple un </iframe> Manquant) est la raison la plus probable.

Quant à l'erreur JavaScript non sécurisé pour accéder au cadre, vous avez quelques options:

  1. La solution la plus simple consiste à utiliser l'API IFrame Player au lieu d'ajouter manuellement des balises iframe. L'API est un morceau de JavaScript qui génère la balise iframe pour vous et ajoute les paramètres qui élimineront (ou devraient éliminer) l'erreur d'accès au cadre. Voici les instructions d'utilisation de IFrame Player API pour charger un lecteur .

  2. La solution manuelle consiste à créer les balises <iframe> Et à ajouter le paramètre &Origin=http://example.com Aux URL. Citation:

Par mesure de sécurité supplémentaire, vous devez également inclure le paramètre Origin dans l'URL, en spécifiant le schéma d'URL (http: // ou https: //) et le domaine complet de votre page hôte comme valeur de paramètre. Bien qu'Origin soit facultatif, il protège notamment contre l'injection de code JavaScript tiers malveillant dans votre page et le piratage du contrôle de votre lecteur YouTube.

2
Salman A

pour moi, cela a fonctionné en utilisant le code ici: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

les lignes que j'ai fixées voient les mots marché avec 2 astérisques ** code :

à partir de ceci: 

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

      }

à ceci: 

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

  }
0
pachermann