HTTP でドメイン間で Cookie とヘッダーを使用してリダイレクトするにはどうすればよいですか?

あるドメインから別のドメインへのリダイレクトと、他のドメインの Cookie またはヘッダーの設定

課題

カスタム ヘッダーを使用したあるドメインから別のドメインへのリダイレクトまたは、HTTP プロトコルの制限により、応答に設定された Cookie は使用できません。リダイレクトは基本的に応答に関連付けられたヘッダー (場所) で構成され、ターゲットの場所にヘッダーを追加することは許可されません。

異なるドメインに Cookie を設定することも許可されません。重大なセキュリティリスクを引き起こします。ブラウザは、Set-Cookie ヘッダーを使用した応答とともにサーバーから送信された Cookie を保存し、その後、同じドメイン内の同じサーバーに対して行われたリクエストに対して、Cookie をサーバーに送り返します。 Cookie は別のドメインには送信されません。

解決策 1: ターゲット ドメインのクエリ パラメータと Cookie 設定を使用してリダイレクトする

1 つの方法は、ソース ドメインでユーザーをターゲット ドメインにリダイレクトすることです。クエリパラメータとして渡されるアクセストークン。その後、ターゲット ドメインはトークンを読み取り、独自の Cookie を設定できます。ブラウザはそれを保存し、後続のリクエストのために送信します。

ソース ドメイン (appA.py)

<code class="python">from fastapi import FastAPI, Response
from fastapi.responses import RedirectResponse, HTMLResponse

app = FastAPI()

@app.get('/', response_class=HTMLResponse)
def home():
    return '''
    
    
       
          <h2 id="Click-the-submit-button-to-be-redirected-to-domain-B">Click the "submit" button to be redirected to domain B</h2>
          <form method="POST" action="/submit">
             <input type="submit" value="Submit">
          </form>
       
    
    '''

@app.post('/submit')
def submit():
    token = 'MTQ0NjJkZmQ5OTM2NDE1ZTZjNGZmZjI3'
    redirect_url = f'http://example.test:8001/submit?token={token}'
    response = RedirectResponse(redirect_url)
    response.set_cookie(key='access-token', value=token, httponly=True)
    return response</code>

ターゲット ドメイン (appB.py)

<code class="python">from fastapi import FastAPI, Request, status
from fastapi.responses import RedirectResponse, HTMLResponse

app = FastAPI()

@app.get('/', response_class=HTMLResponse)
def home():
    token = request.cookies.get('access-token')
    print(token)
    return 'You have been successfully redirected to domain B!' \
           f' Your access token ends with: {token[-4:]}'

@app.post('/submit')
def submit(request: Request, token: str):
    redirect_url = request.url_for('home')
    response = RedirectResponse(redirect_url, status_code=status.HTTP_303_SEE_OTHER)
    response.set_cookie(key='access-token', value=token, httponly=True)
    return response</code>

解決策 2: Window.postMessage() を使用したクロスオリジン通信

もう 1 つのアプローチには、Window の使用が含まれます。 postMessage() クロスオリジン通信用。ソース ドメインはトークンをターゲット ドメインに送信し、ターゲット ドメインはそれを localStorage に保存し、Cookie を設定します。欠点としては、ブラウザーの互換性と機密データの localStorage への保存が挙げられます。

解決策 3: StackExchange ユニバーサル ログイン アプローチ

StackExchange では、異なるサイト間の自動ログインのために、より堅牢なソリューションが使用されます。これには、画像の src 属性を介して認証トークンを送信することが含まれます。これにより、サーバー応答がトリガーされ、ターゲット サイトに Cookie が設定されます。

これには、ブラウザーによるサードパーティ Cookie の受け入れと、ターゲット サーバーでの CORS 構成が必要です。また、クエリ文字列でトークンを送信するため、潜在的なセキュリティ リスクが生じます。

ソース ドメイン (appA.py)

<code class="python">from fastapi import FastAPI, Response
from fastapi.responses import HTMLResponse

app = FastAPI()

@app.get('/', response_class=HTMLResponse)
def home():
    return '''
    
    
       
          <h2 id="Click-the-submit-button-to-be-redirected-to-domain-B">Click the "submit" button to be redirected to domain B</h2>
          <input type="button" value="Submit" onclick="submit()">
          <script>
             function submit() {
                fetch('/submit', {
                     method: 'POST',
                  })
                  .then(res => {
                     authHeader = res.headers.get('Authorization');
                     if (authHeader.startsWith("Bearer "))
                        token = authHeader.substring(7, authHeader.length);
                     return res.text();
                  })
                  .then(data => {
                     var url = 'http://example.test:8001/submit?token=' + encodeURIComponent(token);
                     var img = document.createElement('img');
                     img.style = 'display:none';
                     img.crossOrigin = 'use-credentials';
                     img.onerror = function(){
                        window.location.href = 'http://example.test:8001/';
                     }
                     img.src = url;
                  })
                  .catch(error => {
                     console.error(error);
                  });
             }
          </script>
       
    
    '''

@app.post('/submit')
def submit():
    token = 'MTQ0NjJkZmQ5OTM2NDE1ZTZjNGZmZjI3'
    headers = {'Authorization': f'Bearer {token}'}
    response = Response('success', headers=headers)
    response.set_cookie(key='access-token', value=token, httponly=True)
    return response</code>

ターゲット ドメイン (appB) .py)

<code class="python">from fastapi import FastAPI, Request, Response
from fastapi.responses import RedirectResponse
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = ['http://localhost:8000', 'http://127.0.0.1:8000',
           'https://localhost:8000', 'https://127.0.0.1:8000'] 

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get('/')
def home(request: Request):
    token = request.cookies.get('access-token')
    print(token)
    return 'You have been successfully redirected to domain B!' \
           f' Your access token ends with: {token[-4:]}'
 
@app.get('/submit')
def submit(request: Request, token: str):
    response = Response('success')
    response.set_cookie(key='access-token', value=token, samesite='none', secure=True, httponly=True) 
    return response</code>

セキュリティに関する考慮事項

ドメイン間でトークンを転送したり Cookie を設定したりする場合、セキュリティへの影響を考慮することが重要です。傍受または侵害される可能性があるため、クエリ文字列で機密データを送信しないでください。安全なデータ転送には HTTPS 接続を使用します。クロスサイト アクセス保護のために、SameSite フラグを「None」に設定し、Secure フラグを設定します。

以上がHTTP でドメイン間で Cookie とヘッダーを使用してリダイレクトするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。