Jest SecurityError：localStorage 不适用于不透明来源

编程代码

1个回答

写回答

13478878105

2025-09-16 22:15

+ 关注

服务器

的文章：

在开发Web应用程序时，我们经常需要使用本地存储来保存一些重要的数据，以便在用户关闭浏览器后仍然可以访问。localStorage是一个非常常用的机制，它允许我们在浏览器中存储键值对。然而，在使用localStorage时，我们可能会遇到一个安全错误：SecurityError：localStorage不适用于不透明来源。

什么是不透明来源

在谈论不透明来源之前，我们先来了解一下什么是来源。来源是指加载Web页面的源头，也就是页面所在的域名。当一个页面从一个域名加载时，它被认为是透明来源，因为浏览器可以信任这个域名，并允许对localStorage进行读写操作。然而，当一个页面从一个不同的域名加载时，它被认为是不透明来源，因为浏览器无法确定该来源的可信度。

为什么localStorage不适用于不透明来源

考虑到安全性的角度，浏览器限制了在不透明来源中对localStorage的访问。这是为了防止恶意网站访问用户的敏感数据。如果浏览器允许不透明来源访问localStorage，那么一个恶意的网站就可以通过加载一个看似无害的页面来获取用户的localStorage数据，从而对用户的隐私造成威胁。

如何解决SecurityError: localStorage不适用于不透明来源错误

要解决这个错误，我们需要确保页面是从一个透明来源加载的。这可以通过以下几种方式来实现：

1. 使用iframe加载页面：在透明来源的页面中，我们可以使用iframe标签来加载不透明来源的页面。由于透明来源的页面可以信任，它可以通过postMessage等机制与iframe中的页面进行通信，从而实现对localStorage的访问。

2. 使用后端代理：我们可以在透明来源的服务器上设置一个后端代理，该代理可以将用户的请求转发到不透明来源的服务器上，并将响应返回给用户。通过这种方式，用户实际上是在透明来源的页面上进行操作，而无需直接与不透明来源进行交互，从而避免了SecurityError。

下面是一个使用iframe加载页面的示例代码：

html
<!DOCTYPE html>
<html>
<head>
    <title>透明来源页面</title>
</head>
<body>
    <h1>透明来源页面</h1>
    <iframe src="https://不透明来源.com" width="800" height="600"></iframe>
</body>
</html>

在上面的示例中，我们在透明来源的页面中使用了一个iframe标签来加载不透明来源的页面。通过这种方式，透明来源的页面可以与不透明来源的页面进行通信，并实现对localStorage的访问。

在开发Web应用程序时，我们需要注意localStorage不适用于不透明来源的安全错误。为了解决这个错误，我们可以使用iframe加载页面或使用后端代理来确保页面是从透明来源加载的。这样可以保护用户的隐私数据，并提高Web应用程序的安全性。

举报有用（4）分享收藏

Jest SecurityError：localStorage 不适用于不透明来源

1个回答

13478878105

热门话题

相关问题