web-dev-qa-db-fra.com

Iframe in Chrome error: Impossible de lire 'localStorage' à partir de 'Window': Accès refusé pour ce document

J'ai une application Web qui utilise localStorage. Nous souhaitons maintenant intégrer cette application Web à d'autres sites (tiers) via iframe. Nous souhaitons fournir une intégration iframe similaire à youtube afin que d'autres sites Web puissent intégrer notre application Web dans un iframe. Fonctionnellement, c'est la même chose que si elle ne serait pas intégrée. Mais ça ne marche pas. Chrome imprime le message d'erreur: 

Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

Je viens de faire le contrôle suivant (dans l'iframe): 

if (typeof window.localStorage !== 'undefined') {
    // SETUP SESSION, AUHT, LOCALE, SETTINGS ETC
} else {
    // PROVIDE FEEDBACK TO THE USER
}

J'ai vérifié mes paramètres de sécurité dans Chrome comme décrit dans un autre thread Stackoverflow mais cela ne fonctionne pas. Existe-t-il un changement permettant une intégration sans qu'il soit nécessaire d'ajuster les paramètres de sécurité (par défaut) de la plupart des navigateurs modernes? 

Pour donner plus d'informations, nous utilisons Ember-CLI pour notre application Web et avons activé CSP ( plus d'informations sur le CSP Ember-CLI ). CSP pourrait-il amener notre application Web à générer des erreurs de sécurité?

google-chromeiframeember.jsember-clicontent-security-policy
17
tschoartschi

Dans Paramètres> Confidentialité> Paramètres de contenu de Chrome, le paramètre de cookie est défini sur "Empêcher les sites de définir des données".

Cette case à cocher est ce qui cause l'exception. 

19
Paul Irish

Selon ce

Cette exception est levée lorsque la case à cocher "Bloquer les cookies tiers et les données du site" est activée dans les paramètres de contenu.
Pour rechercher le paramètre, ouvrez Paramètres, entrez "troisième" dans la zone de recherche, cliquez sur le bouton Paramètres de contenu et affichez le quatrième élément sous Cookies.

 enter image description here

11
AvrilAlejandro

Pour ce faire, une solution plus sécurisée dans Chrome consiste à n'autoriser que le ou les sites auxquels vous faites confiance:

Chrome
  -> "Settings"
    -> "Show advanced settings..."
      -> "Privacy"
        -> "Content settings..."
          -> "Manage exceptions..."
            -> (add a pattern such as [*.]Microsoft.com)
            -> be sure to hit enter
            -> "Done"
          -> "Done"
3
GaTechThomas

Sur l'URL suivante: chrome://settings/content/cookies décochez "Bloquer les cookies tiers".

2
e18r

localStorage est par domaine, par protocole. Si vous essayez d’accéder à localStorage à partir d’un fichier autonome, c’est-à-dire avec le protocole file:///, il n’existe aucun domaine en soi. Par conséquent, les navigateurs se plaignent actuellement que votre document n’a pas accès à localStorage. Si vous placez votre fichier sur un serveur Web (par exemple, déployez dans Tomcat) et y accédez à partir de localhost, vous pourrez accéder à localStorage.

2
Somu

Pour vous débarrasser de cet avertissement - sous Paramètres -> Confidentialité -> Paramètres de contenu de Chrome, vous devez désélectionner l'option "Bloquer les cookies tiers et les données du site".

1
Picard

Comme il a été souligné dans les commentaires, le stockage local est une seule origine - l’origine de la page. Toute tentative d'accès au stockage local de la page à partir d'une iframe chargée à partir d'une autre origine entraînera une erreur.

Le mieux que vous puissiez faire est de le pirater avec XDM via l’API postMessage. Cette bibliothèque prétend faire le gros du travail pour vous, mais je ne l'ai pas essayé. Cependant, je voudrais m'assurer que vous êtes au courant de le support terrible d'IE pour XDM avant de suivre cette voie.

1
Mike Post

À mon humble avis, cela n’a rien à voir avec les paramètres CSP de votre application ember cli, mais avec les paramètres de navigateur . Certains navigateurs (Chrome) bloquent le contenu localStorage chargé dans un iframe . Si nous avions une application ember et un plugin qui se charge sur des sites Web tiers, le jeton d'utilisateur chargé dans l'iframe est bloqué dans Chrom. Nous expérimentons quelques solutions. Nous garderons ce fil commenté.

0
Mad Scientist