跨域重定向设置Cookie/Header的解决方案

2024-11-16 16:52:58

跨域重定向与Cookie/Header设置

在Web开发中，经常需要将用户从一个域名重定向到另一个域名，并同时设置Cookie或Header。然而，由于浏览器的同源策略限制，直接在重定向响应中设置其他域的Cookie或自定义Header通常是无效的。本文将探讨这个问题的根本原因并提供几种有效的解决方案。

问题根源：同源策略

浏览器为了安全起见，实施了同源策略。这意味着只有当请求的来源（协议、域名和端口）与目标网站完全匹配时，浏览器才会允许脚本操作Cookie和部分Header。跨域重定向本质上是从一个源跳转到另一个源，因此直接设置目标域的Cookie和自定义Header会被浏览器阻止。

解决方案一：利用目标域名设置

最可靠的解决方案是让目标域名（http://192.168.10.1/app/callback）负责设置Cookie和Header。这可以通过以下几种方式实现：

后端API接口： 在目标域名的 /app/callback 路径上创建一个API接口，该接口接收必要的参数（例如 token），并负责设置Cookie和Header，最后将用户重定向到最终页面。

源域名重定向代码（例如 FastAPI）：

from fastapi import FastAPI, Request, RedirectResponse

app = FastAPI()

@app.post("/callback")
async def sso_callback(request: Request):
    jwt_token = generate_token(request)
    redirect_url = f"http://192.168.10.1/app/callback?token={jwt_token}"
    return RedirectResponse(url=redirect_url, status_code=303)

目标域名 /app/callback 接口代码（例如 Node.js with Express）：

const express = require('express');
const app = express();

app.get('/app/callback', (req, res) => {
    const token = req.query.token;
    res.cookie('accessToken', token, { httpOnly: true });
    res.setHeader('Authorization', token);
    res.redirect('/final-destination'); // 重定向到最终页面
});

目标域名服务器配置： 如果目标域名使用Nginx或Apache等Web服务器，可以直接在服务器配置中进行重定向和设置Cookie/Header。这种方法无需编写后端代码。例如，使用Nginx：

location /app/callback {
    if ($arg_token) {
        add_header Set-Cookie "accessToken=$arg_token; HttpOnly; Path=/;";
        add_header Authorization $arg_token;
        return 302 /final-destination;
    }
    return 400; # 处理没有 token 的情况
}

解决方案二：使用JWT的客户端存储方案 (不推荐用于敏感信息)

对于一些非敏感数据，可以将JWT存储在localStorage或sessionStorage中，并在重定向后由目标域名的JavaScript代码读取并使用。 需要注意，这种方法安全性较低，不适用于存储敏感信息。

源域名重定向代码 (例如 FastAPI):

from fastapi import FastAPI, Request, Response

app = FastAPI()

@app.post("/callback")
async def sso_callback(request: Request):
    jwt_token = generate_token(request)
    html_content = f"""
    <html>
    <head>
        <script>
            localStorage.setItem('accessToken', '{jwt_token}');
            window.location.href = 'http://192.168.10.1/app/callback';
        </script>
    </head>
    <body></body>
    </html>
    """
    return Response(content=html_content, media_type="text/html")

目标域名 JavaScript 代码:

const token = localStorage.getItem('accessToken');
if (token) {
    // 使用 token，例如设置到 Authorization header
    fetch('/api/data', {
        headers: {
            'Authorization': token
        }
    });
    localStorage.removeItem('accessToken'); // 使用后移除token，提高安全性
}