从浏览器将 Auth 标头注入跨域请求

Question

我有一个用 javascript 和 C# 编写的网络应用程序。该 Web 应用程序的其中一个页面中包含一个 iframe。我需要将一个外部网站（由客户端控制，并受 API 密钥保护）嵌入到此 iframe 中。

在我选择将此标记为可行之前，我做了一个测试，下载 requestly chrome 扩展，并在 chrome 向外部网站发出跨源请求时将 API 密钥注入授权标头。该网站已完美加载到 iframe 中。无并发症。我也用 Fiddler 做了这个实验。 Cross-Origin-Request是由chrome制作的，然后Fiddler拦截请求，注入Auth header和viola，iframe无缝加载网站！

请注意，外部 URL 不是返回数据的端点，而是显示仪表板的简单网页。该网页由 API 密钥保护，该密钥只能通过授权标头传入。所以这让它变得有点棘手。

鉴于上述情况，我们不能期望每个客户端都请求下载和配置，或者 Fiddler，并在更新 API 密钥时更新它们。这对我们来说绝对是不行的。所以我需要在我们的代码（javascript 或 C#）中完成此操作，所以我尝试过：

• Service Workers（但这对于跨源请求是不允许的）
• 我考虑过在 IIS 中创建 URL 重写规则，但被困在这里并花了很多时间在这上面，所以我认为这也不起作用
• 创建一个简单的 javascript fetch 语句我认为也不起作用，因为这会像静态一样从外部站点获取内容，除了不加载样式等之外，还会破坏站点的可导航性。通过邮递员进行操作时您可以看到这一点。
• 我尝试过InterceptRequestsJS，但这似乎不起作用。为了确定起见，我会再看一次。

所以这几乎是一项不可能完成的任务。这是可行的吗？当我启用请求并查看网络流量时，对网站的第一次调用会发出一个 307 重定向，其中包含看起来像 Auth cookie 的内容。然后，Auth cookie 会存储在外部网站域下的浏览器中，然后对 307 重定向的“Location”响应标头进行第二次调用，然后再次调用该网站，但这一次，浏览器会说：“嘿，这是饼干，把它寄过来”和中提琴！网站加载。

鉴于上述情况，我需要通过以下方式模仿：

• 使用 javascript fetch 语句（但目前正在努力解决 CORS 错误），然后希望 cookie 被 chrome 消耗。
• 或者使用某人编写的一个很好的工具，它可以为我完成所有这一切，几乎就像一个用于 javascript 的“迷你”请求包，我已经搜索过它，但很难找到有效的东西。 （会继续寻找...）

有人有同样的要求吗？我更愿意使用 C# 作为代理类型，这样我就不会在前端公开 API 密钥。然而，javascript 可能也是一个选择。

任何帮助将不胜感激。即使只是一个提示或尝试一下

谢谢

Answer 1

嗯......所以看起来我设法解决这个问题的唯一方法是实际重新审视整个反向代理的想法，而不是网址重写。

我尝试使用 nginx 作为快速启动。很容易尽快运行，然后只需谷歌如何使用 nginx 创建反向代理，然后在代理完成时注入标头值。因此，nginx 基本上会将您提供的任何 url 模式映射到目标 url（在我的例子中是外部网站），并且还允许您沿途注入标头，因此是 Auth 标头！

因此，如果我打开自己的 nginx 站点，例如mysite.com，配置为使用 externalsite.com 进行反向代理，然后 externalsite.com 已打开，并且自动注入了 Auth 标头。然后页面就会按预期加载。

我的下一个冒险是弄清楚如何在代理发生时提取 url 查询参数并将其注入标头值。

祝我好运！