レスポンスヘッダーのAngular JSアプリにベアラトークンを渡すことはできますか？

Question

さまざまな理由から、私はAngular JSアプリケーションをレンダリングするためにサーバーテクノロジ、この場合はASP.Netを使用する必要があります。したがって、ユーザーが索引ページを要求すると、要求はASP.Netパイプラインを通過し、アプリケーションのスクリプトやビューなどを提供します。

さまざまなWeb APIサービスを呼び出すことができるように、アプリケーションにベアラトークンを取得する必要があります。

レスポンスヘッダーのベアラトークンをユーザーのブラウザに渡すことはセキュリティの観点から許容されますか？その後、Angular JSアプリケーションが起動すると、ヘッダーから値を読み取り、それを後続のAPI要求のためにローカルストレージに格納します。彼は/彼女が認証されていないところ

ユーザフロー...

1. ユーザーはmembers.domain.comに行きます。
2. OAuthプロバイダにリダイレクトされたユーザー。
3. ユーザーはプロバイダで認証されます。
4. その後、ユーザーはmembers.domain.comにリダイレクトされます。ユーザーは認証され、クッキーがあります。
5. 最初のアプリケーションページは、MVCパイプラインを通じてレンダリングされます。クレームは調査され、UIはユーザーのクレーム（例：ロール= "募集者"など）ごとにメニューオプションなどで表示されます。

これは、ユーザーのブラウザに表示される初期アプリケーションを取得し、メニューオプションはユーザーの主張に基づいて作成されます。

欠けている部分は、ブラウザにさまざまなAPIを呼び出すために使用できるベアラトークンを取得することです。

Answer 1

更新日：更新された質問に基づいて回答が完全に変更されています。

あなたがしようとしていることは、実際にはうまく聞こえます。クライアント側のベアラトークンとしてJWTを検査するように思えます。

これを行うには、次の2つのいずれかを実行する必要があります：あなたはクッキーを使用することによって、より「安全な」アプリケーションを維持したい場合は、上のルートを作成することができ、

1. をごバックエンド（/meまたは同様のもの）。リクエストされたときに、現在ログインしているユーザーの個人データ（クレーム、UIのレンダリングに必要なもの）がすべて返されます。 Angularアプリケーションが起動すると、このページにリクエストを行い、すでに設定されているCookieによって認証され、レンダリングを行うためにフロントエンドに必要なデータを返します。

2. 純粋なJSのすべてをXSS攻撃の影響を受けやすい状態で実行したい場合は、ユーザーのベアラートークンをクッキーに保存する代わりに、HTML5ローカルストレージに保存することができます。こうすることで、AngularアプリはブラウザでJavascriptを使用してトークンに直接アクセスしてページをレンダリングできます。これにより、パフォーマンスが向上する可能性がありますが、ドメイン上で悪意のあるJSを実行できるユーザーは、ユーザーのベアラトークン（LocalStorageから）を読み取って問題を引き起こす可能性があります。

最後に：あなたはのlocalStorageルートを行く、そしてあなたがあなたのバックエンドにあなたの角度APIリクエストを認証するために何ができるかよりも、のlocalStorageでベアラトークンを保存する場合です：

1. グラブベアラートークンLocalStorageの外に出ます。
2. バックエンドにAPIリクエストを行い、ベアラトークンをHTTP Authorizationヘッダーに入れます。
3. バックエンドで、HTTP Authorizationヘッダーを解析し、トークンを取得します。
4. JWTが有効かどうかを確認するトークンを有効にする/など
5. それです！

APIリクエストの認証に使用される標準のHTTPヘッダーはHTTP認証であるため、（LocalStorageを使用して）記述しているフローを実行したい場合は、トークンをHTTP認証に入れてください。行く。ほとんどのWebフレームワークはこのヘッダーの解析を自動的に処理し、送信するトークンのような証明書を探します。あなたはこのコードを使用することができます

Answer 2

...