Iframe in Chrome Fehler: Fehler beim Lesen von "localStorage" von "Window": Zugriff für dieses Dokument verweigert

Question

Ich habe eine Webanwendung, die localStorage verwendet. Jetzt möchten wir diese Web-App über iframe auf anderen (Drittanbieter-) Websites einbetten. Wir möchten einen Iframe einbetten, der youtube ähnlich ist, damit andere Webseiten unsere Web-App in einen iFrame einbetten können. Funktional ist es genauso, als wäre es nicht eingebettet. Aber es funktioniert nicht. Chrome gibt die Fehlermeldung:

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

ich nur die folgende Prüfung (in der iframe):

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

ich meine Sicherheitseinstellungen in Chrome überprüft wie in another Stackoverflow Thread beschrieben, aber es funktioniert nicht. Gibt es eine Änderung, um die Einbettung zu ermöglichen, ohne die (Standard) Sicherheitseinstellungen der meisten modernen Browser anpassen zu müssen?

Um weitere Informationen zu geben, verwenden wir Ember-CLI für unsere Web-App und eingeschaltet CSP (more info about the Ember-CLI CSP). Könnte CSP dazu führen, dass unsere Webanwendung Sicherheitsfehler verursacht?

Answer 1

Wie bereits in den Kommentaren erwähnt, ist localstorage nur ein einziger Ursprung - der Ursprung der Seite. Der Versuch, über einen Iframe, der von einem anderen Ursprung geladen wurde, auf den lokalen Speicher der Seite zuzugreifen, führt zu einem Fehler.

Das Beste, was Sie tun können, ist es mit XDM über die PostMessage API zu hacken. This library vorgibt, das schwere Heben für Sie zu tun, aber ich habe es nicht versucht. Allerdings würde ich sicherstellen, dass Sie sich der IE's terrible support for XDM bewusst, bevor Sie diese Route gehen.

Answer 2

imho es hat nichts mit CSP-Einstellungen auf Ihrer Ember CLI App zu tun, sondern mit Browsereinstellungen zu tun. Einige Browser (Chrome) blockieren localStorage-Inhalte, die in einen Iframe geladen werden. Auch wir stehen vor einer ähnlichen Situation für unsere Ember App, wenn wir eine Ember App und ein Plugin haben, das auf Webseiten von Drittanbietern lädt, wird das in den Iframe geladene User Token in Chrom blockiert, wir experimentieren mit einigen Lösungen, die wir behalten Dieser Thread geschrieben, wie es geht.

Answer 3

Unter Chrome Einstellungen> Datenschutz> Inhaltseinstellungen haben Sie die Set-Cookie-Einstellung auf „Block Webseiten, die auf Daten für alle“

Diese Checkbox ist das, was die Ausnahme verursacht.

Answer 4

Um diese Warnung loszuwerden - unter Einstellungen von Chrome -> Datenschutz -> Inhaltseinstellungen, müssen Sie den „Block Cookies von Drittanbietern und Standortdaten“ Option

Answer 5

Ein sicherer Weg, löschen, dies zu tun in Chrome würde nur die Website zu ermöglichen, sein (e), die Sie vertrauen:

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

Answer 6

According to this

This exception is thrown when the "Block third-party cookies and site data" checkbox is set in Content Settings.
To find the setting, open Chrome settings, type "third" in the search box, click the Content Settings button, and view the fourth item under Cookies.

Answer 7

localStorage ist pro Domäne pro Protokoll. Wenn Sie versuchen, auf localStorage von einer eigenständigen Datei zuzugreifen, d. H. Mit file:/// Protokoll, gibt es keine Domäne per se. Daher würden Browser derzeit beschweren, dass Ihr Dokument keinen Zugriff auf localStorage hat. Wenn Sie Ihre Datei auf einen Webserver stellen (z. B. in Tomcat bereitstellen) und von localhost darauf zugreifen, können Sie auf localStorage zugreifen.