Iframe in Chrome Fehler: Failed to read 'localStorage' vom 'Fenster': Zugriff verweigert für dieses Dokument
Ich habe eine web-app, die verwendet localStorage. Jetzt wollen wir das einbetten dieses web app auf andere (Dritte) Seiten via iframe. Wir wollen damit einen iframe einbetten, ähnlich wie bei youtube, so dass andere websites einbetten können unsere web-app in einem iframe. Funktional ist es das gleiche, als wenn, es würde nicht eingebettet werden. Aber es funktioniert nicht. Chrome druckt die Fehlermeldung:
Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
Ich habe gerade die folgende check (im iframe):
if (typeof window.localStorage !== 'undefined') {
//SETUP SESSION, AUHT, LOCALE, SETTINGS ETC
} else {
//PROVIDE FEEDBACK TO THE USER
}
Ich habe meine Sicherheitseinstellungen in Chrome wie beschrieben in ein weiterer Stackoverflow-Thread aber es funktioniert nicht. Gibt es eine änderung zu machen-Einbettung möglich, ohne die Notwendigkeit der Anpassung (Standard) Sicherheits-Einstellungen der meisten modernen Browsern?
Geben, mehr Informationen, wir verwenden Ember-CLI für unsere web-app und stellte sich auf CSP (mehr Infos über die Ember-CLI-CSP). Könnte CSP dazu führen, dass unsere web-app zu werfen, Sicherheits-Fehler?
- Ihr Titel erwähnt einen
iframe
? ist etwas in das iframe versuchen, auf den lokalen Speicher? das klingt wie könnte es auslösen, eine Sicherheitswarnung? - Ich also meine erste Frage. Wir wollen nur, dass andere websites die Möglichkeit zum einbetten von unserer web-app über
iframe
. Also diewindow.localStorage
Anruf in unserem web-app-code und somit in dieiframe
. Wir wollen nicht zu tun, keine Lust auf cross-domain-Sache. Gerade unsere web-app per iframe. Hoffe, das klärt das problem. - wenn die web-app nutzt den lokalen Speicher, dann läuft es in einem iframe wird die Ursache von cross-domain-Problem, weil die Fenster ist global... es wird versuchen, auf den lokalen client-Fenster."localstorage" .. erinnern locastorage ist eine client-browser-Sache.. nicht ein hosted - /server Sache.. deine app hat keine Kenntnis, wenn es Ihnen von überall
- So gibt es keine chance es zum laufen zu bringen? Wir haben nicht das design unserer app für diese, aber viele Kunden verlangten diese Funktion, daher müssen wir eine Lösung. Ich weiß, dass localStorage-keine server-Ding. Aber ich dachte, die Einträge werden durch die Domäne. Ich möchte nicht etwas für eine andere domain, die nur für die Domäne, die angegeben ist in dem src-Attribut des iframe. Gibt es eine Möglichkeit, die Fenster umgehen und nur schreiben, um unsere "domain-Eintrag" von der "localStorage"?
- nicht mit "localStorage". wenn Sie möchten, lagern Sie nur Dinge auf Ihrer domain, müssen Sie einem back-end für die Persistenz der Daten zu nutzen... ember-data oder so.
- Vielleicht verwenden Sie ein localstorage-polyfill. Helfen könnte. code.google.com/p/chromium/issues/detail?id=357625
- ein pollyfill arbeiten könnte, wenn das Problem liegt allein in der client kein "localstorage" - Fähigkeit.. aber das Endergebnis wäre immer noch, dass Kunden wäre die Speicherung von Daten auf Ihre eigenen lokalen Browser... das wird ein problem, wenn die Daten benötigt werden, übergeben hin und her durch den iframe
- Vielleicht ein polyfill ist eine gute Lösung. In Bezug auf unsere Verwendung von localStorage: wir speichern keine Daten, wir wollen anhalten, um unsere back-end gibt. Wir speichern Sie einfach die Einstellungen, wie Gebietsschema, eigentliche access token etc. Wenn der Benutzer löscht die "localStorage" es ist völlig in Ordnung, Sie/er braucht einfach zu set locale wieder und wieder anmelden. Wir ember-simple-auth die sich auf "localStorage". Ich hoffe es ist nicht allzu schmerzhaft zu integrieren polyfill oder etwas ähnliches...
- doch Daten, die lokal gespeichert ist, wird nicht verfügbar sein für die app gehostet, die in den iframe.. das ist, warum Sie immer die original-Fehler, die Sie gestellt ist.. nicht in der Lage zu Lesen-Eigenschaften aus dem lokalen Speicher
- okay ich sehe. So kann ein Benutzer nicht anmelden, um unsere app, wenn es gehostet wird, in einem iframe, weil ich nicht schreiben können Sie die Anmeldeinformationen für den localStorage. Hm... das ist nicht gut. Irgendeine Idee, wie man dieses Problem beheben? Ist der polyfill die einzige realistische option?
- das einzige, was ich vorschlagen kann, ist auf der Suche in CSP: content-security-policy.com es sollte eine Möglichkeit zum Affen mit es zu ermöglichen cross-origin-cmmunication auf iframes.. (siehe: sandbox).. aber die Erklärung, dass es riskant ist und es kann sein, Schwachstellen...
- auch.. Sie könnten auch die Speicherung von session-Informationen in einer Steuerung oder service anstelle des lokalen Speichers... nur den lokalen Speicher verwenden, als back-up, wenn Benutzer sich zuvor aktualisieren.
- Ich hatte noch nicht Zeit, zu untersuchen, in dieser Ausgabe mehr. Habe es gerade erneut versucht und hat nicht einbetten iframe in einer html-Datei dienen, aus einer Datei-system. Stattdessen habe ich eine Datei auf einem webserver bereitgestellt. Magisch alles funktioniert jetzt (getestet in Chrome, Firefox, IE11 und Safari). Vielleicht erklärte ich meine Frage nicht in der rechten Weise, aber es scheint zu funktionieren, wie ich erwartet hatte, als ich zum ersten mal versucht es.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Unter Chrome-Einstellungen > Datenschutz - > Content-Einstellungen, müssen Sie die cookie Einstellung auf "Block sites from setting any data"
Diese checkbox ist, was die Ursache der Ausnahme.
Nach dieser
localStorage
ist pro domain, pro-Protokoll. Wenn Sie versuchen, Zugriff auflocalStorage
aus einer eigenständigen Datei, D. H. mitfile:///
Protokoll, es ist keine Domäne per se. Daher Browsern derzeit würden sich beschweren, dass Ihr Dokument nicht zugreifenlocalStorage
. Wenn Sie Ihre Datei in einem web-server (z.B. bereitstellen von Tomcat) und greifen Sie vonlocalhost
Sie werden in der Lage sein, um ZugrifflocalStorage
.Ein sicherer Weg, dies zu tun, in Chrom wäre, dass nur die Website(s), denen Sie Vertrauen:
Auf die folgende URL:
chrome://settings/content/cookies
deaktivieren Sie die Option "cookies von Drittanbietern Sperren".Um loszuwerden, diese Warnung unter Chrome-Einstellungen -> Datenschutz -> Content-Einstellungen, müssen Sie deaktivieren Sie das Blockieren von Drittanbieter-cookies und Website-Daten" - option
Als wurde darauf hingewiesen, in den Kommentaren, "localstorage" ist single-origin-nur-die Entstehung der Seite. Versuch auf der Seite "localstorage" aus einem iframe geladen von einer anderen Quelle, führt zu einem Fehler.
Das beste, was Sie tun können, ist, es zu hacken mit XDM über die postMessage-API. Diese Bibliothek vorgibt zu tun, die schweres heben für Sie, aber ich habe es nicht ausprobiert. Allerdings würde ich sicherstellen, dass Sie wissen, IE ist furchtbar Unterstützung für XDM vor dem Abstieg auf dieser route.
imho hat es nichts zu tun mit CSP-Einstellungen auf Ihrem ember cli app aber zu tun mit browser-Einstellungen.
Einige Browser (Chrome) block localStorage-Inhalt in ein iframe geladen.
Auch wir stehen vor einer ähnlichen situation für unsere Ember App waren,haben wir ein ember app und ein plugin, welches Lasten auf 3rd-party-websites, die Benutzer-token geladen in den iframe bekommt in Chrom,Experimentieren wir mit einigen Lösungen, halten in diesem thread gepostet, wie es geht.