JavaScript错误（localstorage，cookie）在Chrome扩展程序中加载沙箱化的iframe [英] JavaScript errors (localstorage, cookie) loading sandboxed iframe within Chrome Extension

问题描述

我正在撰写一个Chrome扩展程序，显示用户在沙箱化iframe中选择的网站预览。我发现很多页面在iframe中无法正确呈现，因为它们会出现JavaScript错误，例如，打破对呈现页面很重要的脚本（如隐藏加载对话框）：

 未被捕获的DOMException：无法从'Window'读取'localStorage'属性：
文档被沙箱化，并且缺少'allow-same-origin'标志。 
 
未被捕获DOMException：未能从'Document'中读取'cookie'属性：
文档被沙盒化，并且没有'allow-same-origin'标志。 
  

我该如何安全地回避这些错误，以便大多数页面能够按预期呈现？他们不需要真正能够将数据保存到本地存储或cookie，只需正确渲染即可。我已经确认，如果您在常规网站上放置沙箱化iframe，则会发生同样的错误，因此这不是Chrome扩展程序问题，但我可能会因为它位于Chrome扩展程序中而支持它。

一些说明：

• 我的理解是允许'allow-same-origin'标志是一个巨大的安全风险，因为它会让iframe访问Chrome扩展的上下文，所以我不想那样做。启用这个标志确实解决了这个问题。 （编辑：我认为现在可能实际上是安全的，这是否符合我的上下文？） 在Chrome设置中，您可以阻止本地存储和cookie在其他地方导致类似的错误。这些设置在这里没有任何影响。

我尝试加载我的目标页面与iframe内部的另一个iframe在我的Chrome扩展页面内并获得相同的错误。 p>


• 是否可以将JavaScript注入到将实现localStorage和cookie虚拟版本的iframe中？我查看了内容脚本，但找不到在页面脚本运行之前更改这些全局对象的方法。是否有可能？

我的清单文件如下所示：

  {
name：test，
version：0.0.1，
manifest_version：2，
description：，
图标：{
128：assets / app-icon / app-icon-128x128.png
}，
default_locale：en，
background：{
scripts：[
scripts / background.js
] 
}， 
权限：[
clipboardWrite，
标签，
存储，
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/eyaDrsandbox =allow-scripts>< / iframe> 
< / body>< / html> 
  

codepen URL的底部将在常规选项卡中呈现页面，但在iframe中，由于在文章开头提到的错误，我会保持空白。

使用 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中的代码使用诸如cookies之类的东西， DOM存储区（例如 localStorage ）， IndexedDB 等，就像通常从原始来源加载时一样。包含 allow-same-origin 令牌对于许多网页来说有必要接近正常操作。

我在 MDN的声明上找到 allow-same-origin ：

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

有助于理解此内容。博客文章在沙盒式IFrame中安全地玩游戏有所帮助。 [W3C HTML 5.2规范中的声明也很有帮助[重点mine]：

allow-same-origin 关键字适用于两种情况。首先，它可以用来允许来自同一站点的内容被沙箱化，以禁用脚本，同时允许访问沙箱内容的DOM。

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

以及来自W3C HTML 5.2规范的附加信息 （沙箱o除非 allow-same-origin 标记存在）：

沙盒原始浏览上下文标志

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




• 此标志也会阻止脚本读取或写入 document.cookie IDL属性，并阻止对 localStorage 的访问。 WEBSTORAGE


ul>

MDN页面位于同源政策也值得关注。

I'm writing a Chrome Extension that shows a preview of a website of a user's choosing in a sandboxed iframe. I'm finding that a lot of pages do not render properly in the iframe because they get JavaScript errors such which breaks scripts that are important to rendering the page (like hiding a loading dialog):

"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."

How can I safely sidestep these errors so that most pages will render as intended? They don't need to actually be able to save data to local storage or cookies, just render correctly. I've confirmed the same error happens if you put a sandboxed iframe on a regular website so it's not a Chrome Extension issue but I might be able to side step it because it's within a Chrome Extension.

Some notes:

• My understanding is enabling the 'allow-same-origin' flag would be a huge security risk as it would give the iframe access to the context of the Chrome extension so I don't want to do that. Enabling this flag does fix the issue though. (Edit: I think this might actually be safe now. Is this true given my context?)

• In Chrome settings you can block localstorage and cookies which can cause similar errors elsewhere. These settings have no impact here.

• I tried loading my target page with an iframe inside another iframe inside my Chrome Extension page and got the same errors.

• Is it possible to inject JavaScript into the iframe that would implement dummy versions of 'localStorage' and 'cookie'? I looked into content scripts but couldn't find a way to alter these global objects before the page's scripts ran. Is it possible?

My manifest file is like this:

    {
      "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'"
    }

My background.js file is this:

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

My app.html file is this:

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

The bottom part of the codepen URL will render a page in a regular tab but in the iframe it'll be blank because of the errors mentioned at the start of the post.

解决方案

Using allow-same-origin is fine. It does not give the content access to the Chrome extension context. It does not grant anything beyond letting the iframe retain its original origin.

You have become concerned because of the name used for this permission. In my opinion, the name of this token is inappropriate. The name allow-same-origin implies that it is giving permissions that join it with the permissions available to some other origin (those of the page in which the iframe is embedded being the most strongly implied). This is not the case. The token would have been more appropriately called allow-keep-original-origin, or something similar.

What the allow-same-origin token does is permit the page inside the iframe to retain the origin which it originally has as a result of being loaded from the URL it came from. That means that an iframe like <iframe src="http://example.com/" sandbox="allow-same-origin allow-scripts"></iframe> is permitted to run scripts and behave as if it's origin is http://example.com, nothing more than that. It does not expand that origin to that of the containing page. If the allow-same-origin token was not present, then the iframe would behave as if its origin was something like fooscheme://someTotallyUniqueOriginThatWillNeverMatchAnythingElse027365012536.yeahWeReallyMeanItWillNeverMatch (i.e. an origin that is guaranteed to never match anything else, even itself).

So, despite the name of the allow-same-origin token, it does not grant any additional special capabilities which the iframe would not otherwise have, except that it gets to retain its original origin.

Using the allow-same-origin token permits the code in the iframe to use things like cookies, DOM storage (e.g. localStorage), IndexedDB, etc. like it normally would when loaded from its original origin. Including the allow-same-origin token will be necessary for many web pages to have something close to normal operation.

I found MDN's statement on 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.

to be somewhat helpful in understanding this. The blog post "Play safely in sandboxed IFrames" helped a bit. The statement in the W3c HTML 5.2 specification was also helpful [emphasis mine]:

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.

And the additional information from the W3C HTML 5.2 specification (the sandboxed origin browsing context flag will be set unless the allow-same-origin token is present):

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's page on Same-origin policy was also of interest.

这篇关于JavaScript错误（localstorage，cookie）在Chrome扩展程序中加载沙箱化的iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！