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

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扩展程序中而支持它。

一些说明：

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

我的清单文件是这样的：

    {
      "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>运行脚本，并且表现得好像它的来源是http://example.com ，仅此而已。 它不会将该原点扩展为包含页面的原点。 如果不存在allow-same-origin令牌，则iframe的行为就好像它的起源类似于fooscheme://someTotallyUniqueOriginThatWillNeverMatchAnythingElse027365012536.yeahWeReallyMeanItWillNeverMatch （即保证永远不会匹配任何其他东西的原点，甚至本身）。

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

使用allow-same-origin令牌允许iframe中的代码使用诸如cookie， DOM存储（例如localStorage ）， IndexedDB等之类的东西，就像它从原始源加载时一样。 包含allow-same-origin令牌将是许多网页必须接近正常操作所必需的。

我发现MDN关于allow-same-origin 的陈述：

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

对此有所帮助。 博客文章“ 在沙盒IFrame中安全地玩 ”有点帮助。 W3c HTML 5.2规范中的声明也很有用[强调我的]：

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

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

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

并且来自W3C HTML 5.2规范的附加信息（沙箱源浏览上下文标志将被设置，除非存在allow-same-origin令牌）：

沙盒源浏览上下文标志

此标志强制内容成为唯一的来源，从而阻止其访问来自同一来源的其他内容。

此标志还可以防止脚本读取或写入document.cookie IDL属性，并阻止访问localStorage 。 WEBSTORAGE

MDN关于同源政策的页面也很有意思。

Answer 2

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

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

问题描述

2 个解决方案

解决方案1
9 已采纳 2016-12-12 06:37:00

解决方案2
0 2016-12-11 12:02:07

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

问题描述

2 个解决方案

解决方案1 9 已采纳 2016-12-12 06:37:00

解决方案2 0 2016-12-11 12:02:07

解决方案1
9 已采纳 2016-12-12 06:37:00

解决方案2
0 2016-12-11 12:02:07