Question

我正在编写一个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扩展程序中

一些注意事项：

我的理解是启用“允许同源”＆＃39; flag会带来巨大的安全风险，因为它会让iframe访问Chrome扩展程序的上下文，所以我不想这样做。启用此标志确实可以解决问题。（编辑：我认为现在这实际上可能是安全的。鉴于我的背景，这是真的吗？）
在Chrome设置中，您可以阻止本地存储和Cookie，这可能会导致其他地方出现类似错误。这些设置对此没有影响。
我尝试在Chrome扩展程序页面中的另一个iframe中加载带有iframe的目标网页，并出现同样的错误。
是否可以将JavaScript注入iframe，以实现虚拟版本的＆＃39; localStorage＆＃39;和＆＃39; cookie＆＃39;？我查看了内容脚本，但在页面脚本运行之前找不到改变这些全局对象的方法。有可能吗？

我的清单文件是这样的：

    {
      "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中，由于帖子开头提到的错误，它将为空白。

Answer 1

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

由于此权限使用的名称，您已经开始担心了。在我看来，这个令牌的名称是不合适的。名称allow-same-origin表示它正在授予将其加入的权限，以及其他某些来源可用的权限（嵌入iframe的页面中的权限是最强烈隐含的）。不是这种情况。该令牌可能更恰当地称为allow-keep-original-origin或类似的东西。

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

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

使用allow-same-origin令牌可以让iframe中的代码使用Cookie，DOM storage（例如localStorage），IndexedDB等内容，就像通常一样装载自其原始来源。包含allow-same-origin令牌对于许多网页都必须具有接近正常操作的功能。

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

允许将内容视为来自其正常来源。如果未使用此关键字，则嵌入的内容将被视为来自唯一来源。

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

allow-same-origin关键字适用于两种情况。

首先，它可用于允许来自同一站点的内容进行沙盒化以禁用脚本，同时仍允许访问沙盒内容的DOM。

其次，它可用于嵌入来自第三方网站的内容，沙盒以防止该网站打开弹出窗口等，而不会阻止嵌入式网页进行通信返回其原始站点，使用数据库API存储数据等

附加信息from the W3C HTML 5.2 specification（除非allow-same-origin令牌存在，否则将设置沙盒原始浏览上下文标记）：

沙盒来源浏览上下文标记



此标记forces content into a unique origin，从而阻止其访问来自同一origin的其他内容。



此标记也为prevents script from reading from or writing to the document.cookie IDL attribute，并阻止访问localStorage。 WEBSTORAGE

MDN在Same-origin policy上的页面也很有意思。

Answer 2

要解决问题，请转到设置＆gt;隐私＆gt;内容设置将Cookie设置更改为允许设置本地数据

在JavaScript扩展程序中加载沙盒iframe的JavaScript错误（localstorage，cookie）

2 个答案: