在重定向到新的 SPA 页面时在标头中传递身份验证令牌

Question

假设这些：

       A -----------------------> B
(Sender website)          (Angular website)

我们实现了一个普通的 Angular SPA (B) ，它的 index.html 和其他资源简单地托管在 IIS 中，并且有一个简单的重写规则来处理 Angular 中的路由。 Angular 中的用户需要登录，他们会获得一个 JWT 令牌，并将其存储在浏览器存储中。

有一个网站(A)想要将用户重定向到 Angular 网站，但我们也想将 JWT 令牌从 A 传递到 B，因为令牌是相同的，我们希望阻止用户再次登录。

网站 A 可以在重定向到 B 时在post 请求标头中发送令牌。问题是 JS (Angular) 无法直接获取标头参数，因为它们正在发送到 IIS。

问题：

在 IIS 中有没有办法，我们可以从请求中获取令牌并在检索 index.html 时将其设置为 html 属性？ 因此，JS 可以检查它的 html 元素并找到令牌。
上述技术正确吗？ 如果没有，你能给出你的建议吗？

Answer 1

我对此的思考过程是使用查询参数或路由参数将用户重定向到角度页面。 它同样安全/不安全，因为任何人都可以看到标头值（如果您担心将 JWT 暴露给最终用户。

我会让您的登录页面接受 JWT（或您被重定向到的任何页面）

所以，假设你做https://myangularsite.com/login?jwt=JWTTOKEN

然后，在您的登录页面中，您可以从 url 中获取该 JWT 令牌

const jwt = ActivatedRoute.snapshot.queryParamMap.get('jwt');

现在，您可以将该值放入localStorage ：

localStorage.setItem('jwt', jwt);

然后，在 Angular 中，只需创建一个HttpInterceptor从 localStorage 中获取 JWT 令牌并将其应用于每个请求的标头：

const jwt = localStorage.getItem('jwt');
const request = req.clone({ withCredentials: true, headers: jwt });

您可以将其视为与您注册某些服务时相同的事情，他们会通过电子邮件向您发送一个链接以确认您的电子邮件。 您单击的那个链接会将您带回他们的网站，并带有电子邮件确认令牌。 当您使用该令牌访问该站点时，它会通过该令牌知道您是谁。

例如：http://facebook.com/confirm?token= emailconfirmtoken

Answer 2

上面的答案是不正确的，“因为任何人都可以看到标头值，所以它同样安全/不安全”。 标头值在传输中使用 TLS 加密； 而 URL 查询参数在请求的整个路由中都是可读的。 如果安全性是最重要的问题，则不要将任何可能被视为敏感的内容作为查询参数。

Answer 3

我们不能仅通过 IIS 来实现这一目标，最后我们编写了一个简单的 Node.js 应用程序作为后端，当您调用它时，它会加载 Angular 文件。

站点 A 通过 Post 请求将令牌发送到标头中的站点 B（托管 Node.js 后端）。 然后节点应用程序在 cookie 中返回令牌。因此，当 Angular 应用程序加载时，它会从 cookie 中读取令牌。

最后，我们将 Node 应用程序放入 IIS。

希望它可以帮助其他人。