问题标签 [cross-origin-embedder-policy]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
384 浏览

iframe - iframe - 使用 iframe 执行 SSO 并访问身份验证墙后面的页面

我有 2 个域,一个托管我的应用程序 - myapp,另一个托管 gooddata 仪表板 - analytics.myapp。我想在我的应用程序的页面中嵌入一个gooddata仪表板。我已将 frame-src 设置为允许来自仪表板所在域的请求:

我还在CORS主机analytics.myapp上设置了允许来自myapp域的请求:

我想将包含来自域的内容的 iframe 嵌入到域analytics.myapp上的页面中,只有在您通过身份验证后才能看到myapp。现在,当我加载内容时,iframe 正在显示登录页面,如果我尝试通过 iframe 登录,则会收到错误消息:

如果我analytics.myapp在另一个不起作用的选项卡中使用用户登录,因为 cookie 不会发送到myapp域。我看到可以通过他们文档中的 api 进行身份验证。他们也有关于如何嵌入仪表板的文档,但是为了查看嵌入式仪表板文档说:

用户必须是工作区成员才能查看嵌入式仪表板。

我还没有实现 SSO(单点登录),但我想知道一旦我实现它,CORS 还会有问题吗?我想,一旦我实现了这个,并且来自myapp域的用户转到我有一个带有嵌入式仪表板的 iframe 的页面analytics.myapp,他们将被重定向到一个身份验证端点,在该端点上myapp,用户将通过 SSO 进行身份验证analytics.myapp并重定向回来与analytics.myapp用户数据。

现在是正确的流程,并且可以与 iframe 一起使用,是否有任何 CORS 问题,可以这样实现吗?

0 投票
0 回答
182 浏览

google-chrome - chrome升级到83后浏览器屏蔽了服务端界面的响应

铬 81

服务器配置了响应头 'Cross-Origin-Opener-Policy':'same-origin', 'Cross-Origin-Embedder-Policy':'require-corp',

浏览器访问服务器界面没有问题

铬 83

服务器配置了响应头 'Cross-Origin-Opener-Policy':'same-origin', 'Cross-Origin-Embedder-Policy':'require-corp',

我的浏览器访问服务器接口返回错误:加载资源失败:net::ERR_BLOCKED_BY_RESPONSE

将响应头添加到服务器接口后,该接口就可以正常访问了。“跨域资源策略”:“跨域”

我们的一些接口需要第三方接口,例如 AWS 上传。我们无法为这些接口配置'Cross-Origin-Resource-Policy':'cross-origin' 这将导致使用 AWS 上传失败。这种情况有什么解决办法吗?

0 投票
3 回答
12502 浏览

javascript - React 错误:Firefox 中的“SharedArrayBuffer 未定义”

我有一个使用“create-react-app”创建的 React 应用程序(我也使用 jsdom NPM 包),由于某种原因,该应用程序在加载时仅在 Firefox 中引发错误(在 Chrome 和 Edge 中运行良好)。
这是错误:

经过一番谷歌搜索后,我发现:
“要在 Firefox 中启用 SharedArrayBuffer,请转到 about:config 并将 javascript.options.shared_memory 首选项设置为 true” (https://github.com/ggerganov/kbd-audio/issues/9
问题是它已经启用为true。

以前有人遇到过这个问题吗?谢谢。

更新:

试图转换为:

仍然得到相同的错误(与 SharedArrayBuffer 对象不同的行)。

0 投票
1 回答
414 浏览

firefox - crossOriginIsolated 在非本地主机地址处为假。我该如何解决?

我想在 Firefox 上使用 SharedArrayBuffer。所以我让我的网络服务器根据文档在响应头中添加 Cross-Origin-Opener-Policy 和 Cross-Origin-Embedder-Policy 。

当您以 localhost 访问服务器时它工作正常,但当您以 IP 地址访问服务器时它不起作用。我该如何解决?

Firefox 的版本是 83.0。

谢谢。

0 投票
1 回答
557 浏览

iframe - 来自同一来源的 iframe 不会使用 Cross-Origin-Embedder-Policy 加载:require-corp

我有一个里面有 iframe 的网页:

它在 Firefox 中运行良好。

如果我添加

Firefox 不显示 iframe 内容。错误:

我需要两个标题才能启用crossOriginIsolated.

iframe和主页面同源,为什么firefox添加第二个header后不显示iframe内容?

0 投票
0 回答
705 浏览

amazon-web-services - https://example.com/ 上对 SharedArrayBuffers 的新要求

今天我收到了一封来自谷歌的邮件:

https://example.com/上对 SharedArrayBuffers 的新要求

Google 系统最近检测到在https://example.com/上使用了SharedArrayBuffers (SAB) ,但不提供COOP和/或COEP标头。

出于网络兼容性的原因,Chrome 计划从 Chrome 91 (2021-25-05) 开始要求 COOP/COEP 才能使用 SAB。请在您的网站上实施“跨域隔离”行为。

今天下午我一直在读这个,但我完全迷路了!

我在我的网站上大量使用了以下内容:

  1. 来自 Freestar.io 的广告
  2. 托管在 AWS 存储桶中的静态内容(JS、CSS 和一些图像)
  3. iframe 中来自 Youtube 和 Vimeo 的内容
  4. 从各种 CDN 引导 CSS、JS 和 jQuery

我已经检查了来自 CDN 的标头,并且可以看到cross-origin-resource-policy设置为cross-origin,因此,如果我在我的网站上设置这些标头:

Cross-Origin-Embedder-Policy=require-corp

Cross-Origin-Opener-Policy=same-origin

cross-origin-resource-policy: cross-origin然后,只要我在crossorigin此处包含选项,就可以显示来自 CDN 的内容,其中提供的内容的标题包含标题:

但是,我查看了其他各种站点,但它们没有这些标题。这些网站包括以下内容:

  1. AWS
  2. Freestar.io 广告
  3. Youtube 和 Vimeo

我的问题是:

  1. 有谁知道是否可以配置 AWS 存储桶,以便存储桶提供的内容包含cross-origin-resource-policy标头?我已经搜索但找不到任何东西来解释如何做到这一点。
  2. 一旦 Chrome 更改为实施,广告和视频将不再显示require COOP/COEP for the use of SABs,如果是这样,这只是我被困住并且无能为力的事情,因为我无法让外部网站在他们的内容中包含该标题服务?
0 投票
1 回答
1698 浏览

google-chrome - 添加 COOP COEP HTTP 标头会导致第三方脚本停止在 Chrome 上运行

我们收到来自 Google 的消息,说我们需要添加 COOP 和/或 COEP 标头

https://example.com/上对SharedArrayBuffers的新要求Google 系统最近检测到在https://example.com/ 上使用了 SharedArrayBuffers (SAB) ,但不提供COOP和/或COEP标头。出于 Web 兼容性原因,Chrome 计划从 Chrome 91 (2021-05-25) 开始要求 COOP/COEP 才能使用 SAB。请在您的网站上实施“跨域隔离”行为。

我们相应地添加了这些标题。

并为所有外部资源添加crossorigin属性

然而,

第三方外部脚本加载的其他资源不会加载,会ERR_BLOCKED_BY_RESPONSE报错。

这不是在添加 COOP 和 COEP 标头后唯一被破坏的第 3 方脚本。Google Recaptcha v2 也坏了。

这发生在 Chrome 版本 89.0.4389.90

有谁知道如何在不要求每个第三方为我们更改其 CORS 标头的情况下解决此问题?

0 投票
1 回答
481 浏览

javascript - Access-Control-Allow-Origin: 同源 & recaptcha & YouTube-视频

我的网站有问题。我使用了需要 SharedArrayBuffers 的 ffmpeg.wasm。这要求我包含作为标题 Access-Control-Allow-Origin: same-origin。问题是这会阻止我的 YouTube 视频和我的库(如 recaptcha)。我完全不知道如何使用两者。有人对此有任何提示吗?无法从文档中弄清楚。

感谢所有的答案。

即使在我的网站上有推荐的标题,我也会从我的 js 中收到我正在使用 SAB 的消息。 在此处输入图像描述

在此处输入图像描述

0 投票
1 回答
532 浏览

javascript - 如何使我的网站与即将到来的 SharedArrayBuffer 跨域隔离更改兼容

因此,我读到 Chrome 即将进行更改,以启用 SharedArrayBuffer 的使用,特别是“使您的网站“跨域隔离””。我的站点使用了不符合此要求的外部 API。所以我所做的是,使用子域将使用 SharedArrayBuffer 的代码卸载到 iframe 中,并将所需的标头添加到该页面。现在阅读更多内容,似乎我仍然需要为顶级文档提供所需的标题,否则我仍然会在控制台中收到警告。

澄清一下,我的网站现在使用以下结构:

  • app.website.com-> 包含完整的应用程序功能
  • service.website.com-> 包含使用 SharedArrayBuffer 的功能

我以为我可以简单地添加所需的标题service.website.com,一切都会正常工作,但我仍然收到跨源警告。有任何想法吗?

0 投票
2 回答
2211 浏览

node.js - 在 nodejs 中设置 Cross-origin-Embedder-Policy 和 Cross-origin-Opener-Policy 标头

我一直在开发一个网站,使用 express(NodeJS) 作为后端,使用 React 作为前端。由于此错误“ReferenceError:SharedArrayBuffer 未定义”,我遇到了我的应用程序无法在 Firefox 上运行的问题。在网上搜索了一下之后,它似乎与CORS有关。我看到在 Chrome 上也有关于使用 SharedArrayBuffer 的警告。

所以我读到我需要设置这些标题 ̀Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp

但我不确定如何做到这一点。在我的后端,我一直在使用 cors 包来设置我的 cors 标头和选项

我也尝试过使用这种方法,但它似乎也不起作用:

我完全错过了什么/误解吗?这是我第一次开发 Web 应用程序,此时我有点迷失了。任何帮助将不胜感激。

谢谢