如何在 JSDOM 中解决“localStorage 不可用于不透明来源”错误？

javascript

2024-03-01 14:04:43

在 JSDOM 中解决“localStorage 不可用于不透明来源”错误

背景

使用 JSDOM 在 Node.js 环境中加载包含 localStorage 的网页时，你可能会遇到一个常见错误：“localStorage 不可用于不透明来源”。这种错误发生在 JSDOM 无法识别网页来源时，导致的安全限制。

解决方案

要解决此问题，有两种有效的方法：

解决方案 1：使用本机文件系统

通过使用本机文件系统加载网页，可以解决此错误。这样做允许 JSDOM 访问所需的源文件，从而启用 localStorage。

读取 HTML 文件： 使用 fs 模块读取包含 localStorage 数据的 HTML 文件。
使用 JSDOM 加载网页： 使用 JSDOM 加载 HTML，同时指定文件 URL 作为配置选项。

解决方案 2：覆盖 document.origin

另一个解决方案是覆盖 document.origin 属性。这会欺骗 JSDOM，使其相信网页来自正确的源。

创建 DOM： 使用 JSDOM 创建一个 DOM。
设置 document.origin： 将 dom.window.document.origin 设置为预期的源。

代码示例

解决方案 1：使用本机文件系统

const fs = require("fs");
const { JSDOM } = require("jsdom");

const html = fs.readFileSync("path/to/index.html", "utf-8");

const dom = new JSDOM(html, {
  url: "file://path/to/index.html",
});

解决方案 2：覆盖 document.origin

const { JSDOM } = require("jsdom");

const dom = new JSDOM(`<html><body></body></html>`, {
  url: "https://www.example.com",
});

dom.window.document.origin = "https://www.example.com";

结论

通过实现这些解决方案，你可以成功解决“localStorage 不可用于不透明来源”错误，并启用 localStorage，以在 Node.js 环境中正确加载和处理包含 localStorage 的网页。

常见问题解答

为什么会出现“localStorage 不可用于不透明来源”错误？
当 JSDOM 无法识别网页来源时，就会出现此错误。
如何使用本机文件系统解决此错误？
通过使用 fs 模块读取 HTML 文件，并使用 JSDOM 加载它，同时指定文件 URL 作为配置选项。
如何覆盖 document.origin 来解决此错误？
使用 JSDOM 创建 DOM，并设置 dom.window.document.origin 为预期的源。
这些解决方案会影响 SEO 吗？
这些解决方案不会影响 SEO。
哪种解决方案更适合我的特定用例？
如果可能，使用本机文件系统通常是更可取的解决方案。