[Core] Migrate to HttpOnly cookie-based authentication for enhanced security (ray-project#58591)

Migrates Ray dashboard authentication from JavaScript-managed cookies to
server-side HttpOnly cookies to enhance security against XSS attacks.
This addresses code review feedback to improve the authentication
implementation (ray-project#58368)

main changes:
- authentication middleware first looks for `Authorization` header, if
not found it then looks at cookies to look for the auth token
- new `api/authenticate` endpoint for verifying token and setting the
auth token cookie (with `HttpOnly=true`, `SameSite=Strict` and
`secure=true` (when using https))
- removed javascript based cookie manipulation utils and axios
interceptors (were previously responsible for setting cookies)
- cookies are deleted when connecting to a cluster with
`AUTH_MODE=disabled`. connecting to a different ray cluster (with
different auth token) using the same endpoint (eg due to port-forwarding
or local testing) will reshow the popup and ask users to input the right
token.

---------

Signed-off-by: sampan <sampan@anyscale.com>
Co-authored-by: sampan <sampan@anyscale.com>

Author: 2 people

python/ray/_private/authentication/authentication_constants.py

@@ -23,3 +23,7 @@
 )
 
 AUTHORIZATION_HEADER_NAME = "authorization"
+AUTHORIZATION_BEARER_PREFIX = "Bearer "
+
+AUTHENTICATION_TOKEN_COOKIE_NAME = "ray-authentication-token"
+AUTHENTICATION_TOKEN_COOKIE_MAX_AGE = 30 * 24 * 60 * 60  # 30 days

python/ray/_private/authentication/http_token_authentication.py

@@ -43,9 +43,22 @@ async def token_auth_middleware(request, handler):
         ):
             return await handler(request)
 
+        # Check Authorization header first (for API clients)
         auth_header = request.headers.get(
             authentication_constants.AUTHORIZATION_HEADER_NAME, ""
         )
+
+        # If no Authorization header, check cookie (for web dashboard)
+        if not auth_header:
+            token = request.cookies.get(
+                authentication_constants.AUTHENTICATION_TOKEN_COOKIE_NAME
+            )
+            if token:
+                # Format as Bearer token for validation
+                auth_header = (
+                    authentication_constants.AUTHORIZATION_BEARER_PREFIX + token
+                )
+
         if not auth_header:
             return aiohttp_module.web.Response(
                 status=401, text="Unauthorized: Missing authentication token"

python/ray/dashboard/client/src/App.tsx

@@ -5,15 +5,10 @@ import duration from "dayjs/plugin/duration";
 import React, { Suspense, useEffect, useState } from "react";
 import { HashRouter, Navigate, Route, Routes } from "react-router-dom";
 import {
+  authenticateWithToken,
   getAuthenticationMode,
-  testTokenValidity,
 } from "./authentication/authentication";
 import { AUTHENTICATION_ERROR_EVENT } from "./authentication/constants";
-import {
-  clearAuthenticationToken,
-  getAuthenticationToken,
-  setAuthenticationToken,
-} from "./authentication/cookies";
 import TokenAuthenticationDialog from "./authentication/TokenAuthenticationDialog";
 import ActorDetailPage, { ActorDetailLayout } from "./pages/actor/ActorDetail";
 import { ActorLayout } from "./pages/actor/ActorLayout";
@@ -245,20 +240,11 @@ const App = () => {
 
         if (authentication_mode === "token") {
           // Token authentication is enabled
-          const existingToken = getAuthenticationToken();
-
-          if (!existingToken) {
-            // No token found - show dialog immediately
-            setAuthenticationDialogOpen(true);
-          }
-          // If token exists, let it be used by interceptor
-          // If invalid, interceptor will trigger dialog via 401/403
+          // The HttpOnly cookie will be sent automatically with requests
+          // If no valid cookie exists, the first request will trigger 401/403
+          // and the response interceptor will show the authentication dialog
         } else {
-          // Auth mode is disabled - clear any existing token from cookie
-          const existingToken = getAuthenticationToken();
-          if (existingToken) {
-            clearAuthenticationToken();
-          }
+          // Auth mode is disabled
         }
       } catch (error) {
         console.error("Failed to check authentication mode:", error);
@@ -294,12 +280,12 @@ const App = () => {
   // Handle token submission from dialog
   const handleTokenSubmit = async (token: string) => {
     try {
-      // Test if token is valid
-      const isValid = await testTokenValidity(token);
+      // Authenticate with the server - this will validate the token
+      // and set an HttpOnly cookie if valid
+      const isValid = await authenticateWithToken(token);
 
       if (isValid) {
-        // Save token to cookie
-        setAuthenticationToken(token);
+        // Token is valid and server has set HttpOnly cookie
         setHasAttemptedAuthentication(true);
         setAuthenticationDialogOpen(false);
         setAuthenticationError(undefined);
@@ -314,9 +300,9 @@ const App = () => {
         );
       }
     } catch (error) {
-      console.error("Failed to validate token:", error);
+      console.error("Failed to authenticate:", error);
       setAuthenticationError(
-        "Failed to validate token. Please check your connection and try again.",
+        "Failed to authenticate. Please check your connection and try again.",
       );
     }
   };

…ation/TokenAuthenticationDialog.test.tsx …nAuthenticationDialog.component.test.tsxpython/ray/dashboard/client/src/authentication/TokenAuthenticationDialog.test.tsx renamed to python/ray/dashboard/client/src/authentication/TokenAuthenticationDialog.component.test.tsx python/ray/dashboard/client/src/authentication/TokenAuthenticationDialog.test.tsx renamed to python/ray/dashboard/client/src/authentication/TokenAuthenticationDialog.component.test.tsx

@@ -1,6 +1,6 @@
 /**
  * Authentication service for Ray dashboard.
- * Provides functions to check authentication mode and validate tokens when token auth is enabled.
+ * Provides functions to check authentication mode and authenticate with tokens.
  */
 
 import axios from "axios";
@@ -28,22 +28,24 @@ export const getAuthenticationMode =
   };
 
 /**
- * Test if a token is valid by making a request to the /api/version endpoint
- * which is fast and reliable.
+ * Authenticate with the server using a token.
+ * If the token is valid, the server will set an HttpOnly cookie that will be
+ * automatically included in all subsequent requests.
  *
- * Note: This uses plain axios (not axiosInstance) to avoid the request interceptor
- * that would add the token from cookies, since we want to test the specific token
- * passed as a parameter. It also avoids the response interceptor that would dispatch
- * global authentication error events, since we handle 401/403 errors locally.
- *
- * @param token - The authentication token to test
- * @returns Promise resolving to true if token is valid, false otherwise
+ * @param token - The authentication token to validate and use
+ * @returns Promise resolving to true if authentication succeeded, false otherwise
  */
-export const testTokenValidity = async (token: string): Promise<boolean> => {
+export const authenticateWithToken = async (
+  token: string,
+): Promise<boolean> => {
   try {
-    await axios.get(formatUrl("/api/version"), {
-      headers: { Authorization: `Bearer ${token}` },
-    });
+    await axios.post(
+      formatUrl("/api/authenticate"),
+      {},
+      {
+        headers: { Authorization: `Bearer ${token}` },
+      },
+    );
     return true;
   } catch (error: any) {
     // 401 (Unauthorized) or 403 (Forbidden) means invalid token

python/ray/dashboard/client/src/authentication/authentication.ts

@@ -10,7 +10,6 @@
 
 import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
 import { AUTHENTICATION_ERROR_EVENT } from "../authentication/constants";
-import { getAuthenticationToken } from "../authentication/cookies";
 
 /**
  * This function formats URLs such that the user's browser
@@ -34,20 +33,6 @@ const axiosInstance = axios.create();
 // Export the configured axios instance for direct use when needed
 export { axiosInstance };
 
-// Request interceptor: Add authentication token if available
-axiosInstance.interceptors.request.use(
-  (config) => {
-    const token = getAuthenticationToken();
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`;
-    }
-    return config;
-  },
-  (error) => {
-    return Promise.reject(error);
-  },
-);
-
 // Response interceptor: Handle 401/403 errors
 axiosInstance.interceptors.response.use(
   (response) => {
@@ -57,10 +42,10 @@ axiosInstance.interceptors.response.use(
     // If we get 401 (Unauthorized) or 403 (Forbidden), dispatch an event
     // so the App component can show the authentication dialog
     if (error.response?.status === 401 || error.response?.status === 403) {
-      // Check if there was a token in the request
-      const hadToken = !!getAuthenticationToken();
-
       // Dispatch custom event for authentication error
+      // 401 means no token was provided, 403 means the token was invalid.
+      // This distinction is used to show a more specific message in the dialog.
+      const hadToken = error.response.status === 403;
       window.dispatchEvent(
         new CustomEvent(AUTHENTICATION_ERROR_EVENT, {
           detail: { hadToken },