在JavaScript扩展程序中加载沙盒iframe的JavaScript错误(localstorage,cookie)

Question

在JavaScript扩展程序中加载沙盒iframe的JavaScript错误(localstorage,cookie)

fst*_*str 4 javascript cookies iframe google-chrome google-chrome-extension

我正在编写一个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."

Run Code Online (Sandbox Code Playgroud)

如何安全地回避这些错误,以便大多数页面按预期呈现？它们实际上不需要将数据保存到本地存储或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'"
    }

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

codepen URL的底部将在常规选项卡中呈现页面,但在iframe中,由于帖子开头提到的错误,它将是空白的.

Answer 1

Mak*_*yen 11

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

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

什么是allow-same-origin令牌做是允许的iframe里面的页面保留其原来它作为具有从它来自URL加载结果的由来.这意味着像iframe一样<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.cookieIDL属性,并阻止访问localStorage.WEBSTORAGE

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

归档时间：	8 年，9 月前
查看次数：	4779 次
最近记录：	8 年，9 月前