我有一个使用 localStorage 的网络应用程序。现在我们想通过 iframe 将此 Web 应用程序嵌入到其他(第三方)网站上。我们希望提供类似于 youtube 的 iframe 嵌入,以便其他网站可以将我们的 Web 应用程序嵌入到 iframe 中。从功能上讲,它与未嵌入的情况相同。但这不起作用。 Chrome 打印错误消息:
Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
我只是做了以下检查(在 iframe 中):
if (typeof window.localStorage !== 'undefined') {
// SETUP SESSION, AUHT, LOCALE, SETTINGS ETC
} else {
// PROVIDE FEEDBACK TO THE USER
}
我检查了 Chrome 中的安全设置,如 另一个 Stackoverflow 线程 中所述,但它不起作用。是否有任何更改可以使嵌入成为可能,而无需调整大多数现代浏览器的(默认)安全设置?
为了提供更多信息,我们在 Web 应用程序中使用 Ember-CLI 并打开 CSP(有关 Ember-CLI CSP 的更多信息)。 CSP 会导致我们的 Web 应用程序抛出安全错误吗?
在 Chrome 的设置 > 隐私 > 内容设置下,您将 cookie 设置设置为“阻止网站设置任何数据”。
此复选框是导致异常的原因。
在内容设置中设置“阻止第三方 cookie 和站点数据”复选框时会引发此异常。
要查找该设置,请打开 Chrome 设置,在搜索框中输入“third”,单击“内容设置”按钮,然后查看 Cookie 下的第四项。
在以下 URL 上:
chrome://settings/content/cookies
取消选中“阻止第三方 cookie”。
localStorage
是每个域、每个协议。如果您尝试从独立文件(即使用 localStorage
协议)访问 file:///
,则本身没有域。因此,浏览器目前会抱怨您的文档无法访问 localStorage
。如果您将文件放在 Web 服务器中(例如部署在 Tomcat 中)并从 localhost
访问它,您将能够访问 localStorage
。
如果禁用阻止第三方 cookie 不是一个选项,您可以使用 try...catch:
try {
// SETUP SESSION, AUHT, LOCALE, SETTINGS ETC
} catch(err) {
// PROVIDE FEEDBACK TO THE USER
}
在 Chrome 中执行此操作的更安全方法是仅允许您信任的网站:
Chrome
-> "Settings"
-> "Show advanced settings..."
-> "Privacy"
-> "Content settings..."
-> "Manage exceptions..."
-> (add a pattern such as [*.]microsoft.com)
-> be sure to hit enter
-> "Done"
-> "Done"
正如评论中所指出的,本地存储只是单一来源——页面的来源。尝试从从不同来源加载的 iframe 访问页面的本地存储将导致错误。
您能做的最好的事情就是通过 postMessage API 使用 XDM 破解它。 这个库声称可以为您完成繁重的工作,但我还没有尝试过。不过,在走这条路之前,我会确保您了解 IE 对 XDM 的糟糕支持。
Chrome->设置->隐私和政策->永远不能使用cookie的站点依次删除本地存储的cookie。
区别在于:只有前者影响 localStorage 访问。看起来这个问题应该不会再发生了。