Youtube: Dangereux JavaScript tentative d'accès à une image

Question

Nous avons un Guichet application avec une page qui contient un dérivé incorporé vidéo Youtube. La vidéo prend en charge et joue très bien, mais apparemment, il entraîne le reste de la page ne soit pas rendu -, il semble que les éléments du DOM à venir après l'intégrer simplement ne pas apparaître sur la page, en dépit d'être dans le balisage.

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

Dangereux JavaScript tentative d'accès à image avec l'URL http://example.com/detail/COMMUNICATION/search/com-sonyericsson-hanashi à partir de l'image avec l'URL http://www.youtube.com/embed/eJY7_De5opI?enablejsapi=1&autohide=1&showinfo=1. Les domaines, les protocoles et les ports doivent match.

J'ai googlé ce une bonne quantité, et les gens semblent dire que c'est innofensif et pour l'ignorer. Semble tout simplement faux, et dans notre cas, il fait des sauts de page.

Si nous changeons notre application de sorte que la vidéo est intégrée de manière dynamique via une requête ajax de rappel (utilisateur clique sur un Guichet AjaxLink) nous obtenons toujours le message d'erreur dans la console, mais au moins, la page s'affiche entièrement. Malheureusement, cela ne fonctionne pas pour nous, car nous avons besoin de la vidéo pour être chargé par défaut lorsque l'utilisateur frappe d'abord la page.

Edit: je dois ajouter que, même si le message d'erreur a été prise à partir de la console Chromée, le bug semble affecter tous les navigateurs que j'ai essayé: Chrome, Safari et Firefox.

Answer 1

La sécurité d'erreur est peu probable que la rupture de votre page. Il ressemble à l'erreur qui se passe à l'intérieur de la YouTube image, ce qui signifie que, dans le pire des cas, le contenu de l'image sera foiré.

Une frame/iframe à partir d'une page externe ne peut, en aucun cas effectuer le contenu du document parent, sauf s'ils sont du même domaine et le numéro de port. Il est l'un des dur règles de sécurité du navigateur.

L'erreur doit être ailleurs, dans votre balise. Aucune chance de voir quelques exemple de balisage?

[modifier]

L'erreur peut aussi être dans le code d'intégration de balisage. Ou, si aucune des balises de script sont inclus directement sur la page (pas dans l'iframe) ce pourrait être là.

Habituellement, lorsque des problèmes, comme cela arrive, c'est en raison d'une balise non fermée quelque part, mais il pourrait être du Javascript.

Answer 2

Si vous rencontrez un problème dans la résolution de cette erreur de JavaScript, vous pouvez essayer d'utiliser YouTube de l'ancien code d'intégration. C'est une option sur toutes les vidéo de YouTube, une fois que vous cliquez sur embed. Vous n'aurez pas cette erreur car il n'utilise pas les iframes. Le code devrait ressembler à quelque chose comme 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>

Espérons que cette aide.

Answer 3

J'ai voté pour Jonathan Torres réponse, parce que son code de l'arrêté du Javascript avertissements. Cependant j'ai alors découvert des erreurs lorsque j'ai validé le code.

Donc, ma réponse est celle-ci...

Cochez la case "Utiliser l'ancien code d'intégration" case à cocher lors de l'utilisation de YouTube embed code de sorte que vous n'êtes pas à l'aide de l'iframe.

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

type="movie"

et

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

l' OBJET de l'élément. Ensuite, faire le PARAM éléments de fermeture automatique (mais pas l' INCORPORER l' élément).

Cela devrait rendre votre YouTube code ressemble à ceci...

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

Ensuite, vous devriez obtenir des pas de Javascript mises en garde et votre code doit valider.

Answer 4

Le Dangereux JavaScript tentative d'accès au cadre d'erreur n'a rien à voir avec votre page n'est pas rendu. Brisé de balisage (par exemple, un manquant de </iframe>) est la raison la plus probable.

Comme pour le JavaScript risquée tentative d'accès au cadre d'erreur, vous avez plusieurs options:

1. Solution la plus simple est d'utiliser l' IFrame Joueur de l'API au lieu de les ajouter manuellement les balises iframe. L'API est un morceau de code JavaScript qui génère la balise iframe pour vous et ajoute les paramètres de ce que sera (ou devrait être) éliminer l'image erreur d'accès. Voici les instructions pour l'utilisation d' IFrame Player API pour charger un joueur.

2. Le manuel de la solution est de construire l' <iframe> balises et ajouter l' &origin=http://example.com paramètre de l'Url. Citation:

Comme une mesure de sécurité supplémentaire, vous devez également indiquer l'origine paramètre de l'URL, en précisant le schéma d'URL (http:// ou https://) et de domaine complet de votre page d'accueil comme valeur de paramètre. Alors que l'origine est facultative, dont il protège contre les tiers JavaScript étant injecté dans votre page et de détournement de contrôle de votre Lecteur YouTube.

Answer 5

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

les lignes que je fixe voir les mots de marché avec 2 asterix ** 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
                }
            }));
        }

      }

pour cela:

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

  }