在 Chrome 扩展中加载沙盒 iframe 的 JavaScript 错误(localstorage、cookie)-6ren

在 Chrome 扩展中加载沙盒 iframe 的 JavaScript 错误(localstorage、cookie)

转载作者：搜寻专家更新时间：2023-11-01 04:56:18

我正在编写一个 Chrome 扩展，它显示用户在沙盒 iframe 中选择的网站的预览。我发现很多页面无法在 iframe 中正确呈现，因为它们会出现 JavaScript 错误，这些错误会破坏对呈现页面很重要的脚本(例如隐藏加载对话框):

"Uncaught DOMException: Failed to read the 'localStorage' property from 'Window':
The document is sandboxed and lacks the 'allow-same-origin' flag."

"Uncaught DOMException: Failed to read the 'cookie' property from 'Document':
The document is sandboxed and lacks the 'allow-same-origin' flag."

我如何才能安全地避免这些错误，以便大多数页面都能按预期呈现？他们实际上不需要能够将数据保存到本地存储或 cookie，只需正确呈现即可。我已经确认，如果您将沙盒化的 iframe 放在常规网站上，也会发生同样的错误，所以这不是 Chrome 扩展程序的问题，但我可能会避开它，因为它在 Chrome 扩展程序中。

一些注意事项:

我的理解是启用“allow-same-origin”标志会带来巨大的安全风险，因为它会让 iframe 访问 Chrome 扩展程序的上下文，所以我不想这样做。启用此标志确实可以解决问题。 (编辑:我认为现在这实际上可能是安全的。考虑到我的情况，这是真的吗？)
在 Chrome 设置中，您可以阻止 localstorage 和 cookie，它们可能会在其他地方导致类似的错误。这些设置在这里没有影响。
我尝试在我的 Chrome 扩展页面内的另一个 iframe 中使用一个 iframe 加载我的目标页面，但遇到了同样的错误。
是否可以将 JavaScript 注入(inject) iframe 以实现“localStorage”和“cookie”的虚拟版本？我查看了内容脚本，但找不到在页面脚本运行之前更改这些全局对象的方法。可能吗？

我的 list 文件是这样的:

    {
      "name": "test",
      "version": "0.0.1",
      "manifest_version": 2,
      "description": "",
      "icons": {
        "128": "assets/app-icon/app-icon-128x128.png"
      },
      "default_locale": "en",
      "background": {
        "scripts": [
          "scripts/background.js"
        ]
      },
      "permissions": [
        "clipboardWrite",
        "tabs",
        "storage",
        "webRequest",
        "webRequestBlocking",
        "unlimitedStorage",
        "<all_urls>"
      ],
      "browser_action": {
        "default_icon": {
          "128": "assets/app-icon/app-icon-128x128.png"
        }
      },
      "content_security_policy": "script-src 'self'; object-src 'self'"
    }

我的 background.js 文件是这样的:

  chrome.browserAction.onClicked.addListener(function(tab) {
    var url = chrome.extension.getURL('app.html');
    chrome.tabs.create({url: url});
  });

我的 app.html 文件是这样的:

   <html><body>
   <iframe src="https://codepen.io/TrentWalton/pen/eyaDr" sandbox="allow-scripts"></iframe>
    </body></html>

codepen URL 的底部将在常规选项卡中呈现一个页面，但在 iframe 中它将是空白的，因为帖子开头提到的错误。

最佳答案

使用 allow-same-origin很好。它不授予内容访问 Chrome 扩展上下文的权限。除了让 iframe 保留其原始来源外，它不会授予任何其他权利。

您因为用于此权限的名称而变得担心。在我看来，这个 token 的名称是不合适的。姓名allow-same-origin暗示它正在授予将其与其他来源可用的权限结合起来的权限(最强烈暗示嵌入 iframe 的页面的权限)。不是这种情况。将 token 称为 allow-keep-original-origin 会更合适，或类似的东西。

什么 allow-same-origin token 的作用是允许 iframe 中的页面保留其最初具有的来源，这是从它来自的 URL 加载的结果。这意味着像 <iframe src="http://example.com/" sandbox="allow-same-origin allow-scripts"></iframe> 这样的 iframe允许运行脚本并表现得好像它的来源是 http://example.com ，仅此而已。它不会将该原点扩展到包含页面的原点。如果allow-same-origin token 不存在，则 iframe 的行为就好像其来源类似于 fooscheme://someTotallyUniqueOriginThatWillNeverMatchAnythingElse027365012536.yeahWeReallyMeanItWillNeverMatch (即保证永远不会匹配其他任何东西的来源，甚至是它自己)。

因此，尽管名称为 allow-same-origin token ，它不会授予 iframe 不具备的任何其他特殊功能，除非它保留其原始来源。

使用 allow-same-origin token 允许 iframe 中的代码使用 cookie 之类的东西，DOM storage (例如 localStorage )，IndexedDB等，就像它通常从其原始来源加载时一样。包括 allow-same-origin token 将是许多网页所必需的，以使其具有接近正常操作的功能。

我找到了 MDN's statement在 allow-same-origin :

Allows the content to be treated as being from its normal origin. If this keyword is not used, the embedded content is treated as being from a unique origin.

对理解这一点有所帮助。博文“Play safely in sandboxed IFrames”有点帮助。 statement in the W3c HTML 5.2 specification也很有帮助[强调我的]:

The allow-same-origin keyword is intended for two cases.

First, it can be used to allow content from the same site to be sandboxed to disable scripting, while still allowing access to the DOM of the sandboxed content.

Second, it can be used to embed content from a third-party site, sandboxed to prevent that site from opening pop-up windows, etc, without preventing the embedded page from communicating back to its originating site, using the database APIs to store data, etc.

和附加信息from the W3C HTML 5.2 specification (除非存在 allow-same-origin token ，否则将设置沙盒源浏览上下文标志):

The sandboxed origin browsing context flag

This flag forces content into a unique origin, thus preventing it from accessing other content from the same origin.

This flag also prevents script from reading from or writing to the document.cookie IDL attribute, and blocks access to localStorage. WEBSTORAGE

MDN 页面 Same-origin policy也很有趣。

关于在 Chrome 扩展中加载沙盒 iframe 的 JavaScript 错误(localstorage、cookie)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41067069/

文章推荐： ios - 上传的视频没有显示在 vine 应用程序上

文章推荐： javascript - RxJS:如何导入 Just

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

在 Chrome 扩展中加载沙盒 iframe 的 JavaScript 错误(localstorage、cookie)