Azure Static Web Apps: x-ms-client-principalで安全なロールベース制御

//staticwebapp.config.json
{
  "auth": {
    "rolesSource": "/api/assignRoles",
    "identityProviders": {
      "google": {
        "registration": {
          "clientIdSettingName": "GOOGLE_CLIENT_ID",
          "clientSecretSettingName": "GOOGLE_PROVIDER_AUTHENTICATION_SECRET"
        }
      }
    }
  },
  "routes": [
    {
      "route": "/admin/",
      "allowedRoles": ["admin"]
    },
    {
      "route": "/",
      "allowedRoles": ["authenticated"]
    }
   ],
  "responseOverrides": {
    "404": {
      "rewrite": "/404/index.html",
      "statusCode": 404
    },
    "401": {
      "statusCode": 302,
      "redirect": "/.auth/login/google"
    }
  }
}

// 仮のJSON
{
  "identityProvider": "aad",
  "userId": "00aa00aa-bb11-cc22-dd33-44ee44ee44ee",
  "userDetails": "ellen@contoso.com",
  "claims": [
      {
          "typ": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
          "val": "ellen@contoso.com"
      },
      {
          "typ": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/surname",
          "val": "Contoso"
      },
      {
          "typ": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/givenname",
          "val": "Ellen"
      },
      {
          "typ": "name",
          "val": "Ellen Contoso"
      },
      {
          "typ": "http://schemas.microsoft.com/identity/claims/objectidentifier",
          "val": "7da753ff-1c8e-4b5e-affe-d89e5a57fe2f"
      },
      {
          "typ": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier",
          "val": "00aa00aa-bb11-cc22-dd33-44ee44ee44ee"
      },
      {
          "typ": "http://schemas.microsoft.com/identity/claims/tenantid",
          "val": "3856f5f5-4bae-464a-9044-b72dc2dcde26"
      },
      {
          "typ": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
          "val": "ellen@contoso.com"
      },
      {
          "typ": "ver",
          "val": "1.0"
      }
  ]
}

{ roles: string[] }

import { Body, Controller, Get, Post } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  // https://learn.microsoft.com/ja-jp/azure/static-web-apps/authentication-custom?tabs=google%2Cfunction
  @Post('/api/assignRoles')
  async postHello(@Body() req: { userId: string; userDetails: string }): Promise<{ roles: string[] }> {
    // proiderがgoogleの場合はuserDetailsはメールアドレス情報になっている
    // 不安な場合は/.auth/meのエンドポイントを確認
    // 受け取った情報をもとにrolesを割り当てて返信する
    // 何もrolesがない場合はから配列を返答する
    
    // 検証のためメールアドレスによる判定を行う
    const roles = await this.appService.assignRoles(req.userDetails);
    
    
    return { roles: roles };
  }
}

type clientPrincipal = {
  userId: string;             // ユーザーID
  userRoles: string[];        // ユーザーロール
  identityProvider: string;   // 認証プロバイダー
  userDetails: string;        // ユーザー情報 Googleが認証プロバイダーの場合はメールアドレス
};

import { CanActivate, ExecutionContext, Injectable, UnauthorizedException } from '@nestjs/common';
import { Observable } from 'rxjs';
import  as base64 from 'base-64';
import  as utf8 from 'utf8';

type clientPrincipal = {
  userId: string;
  userRoles: string[];
  identityProvider: string;
  userDetails: string;
};
// このガードは、Azure Static Web Apps (SWA) の認証ヘッダーを検証するために使用されます。
// SWAは、認証されたユーザーの情報を 'x-ms-client-principal' ヘッダーに含めて送信します。
// このガードは、ヘッダーが存在し、正しい形式であることを確認し、
// ユーザー情報をリクエストオブジェクトに追加します。
// 認証されていない場合は、UnauthorizedExceptionをスローします。
// 参考: https://learn.microsoft.com/ja-jp/azure/static-web-apps/user-information?tabs=javascript
@Injectable()
export class AuthGuardToSwaGuard implements CanActivate {
  canActivate(context: ExecutionContext): boolean | Promise<boolean> | Observable<boolean> {
    const request = context.switchToHttp().getRequest();
    const clientPrincipalEncoded = request.headers['x-ms-client-principal'] as string;

    if (!clientPrincipalEncoded) {
      // 認証情報ヘッダーがない場合、認証されていないとしてスロー
      throw new UnauthorizedException('X-MS-CLIENT-PRINCIPAL header not found. User is not authenticated.');
    }

    try {
      // Base64 デコードと UTF-8 デコード
      const decoded = utf8.decode(base64.decode(clientPrincipalEncoded));
      console.log(JSON.parse(decoded));

      const clientPrincipal: clientPrincipal = JSON.parse(decoded);

      request.user = clientPrincipal.userId;
      request.userRoles = clientPrincipal.userRoles;

      return true; // 認証成功
    } catch (error) {
      console.error('Failed to decode or parse x-ms-client-principal:', error);
      // デコードやパースに失敗した場合、不正なヘッダーとしてスロー
      throw new UnauthorizedException('Invalid X-MS-CLIENT-PRINCIPAL header format.');
    }
  }
}

import { Body, Controller, Get, Post, Req, UseGuards } from '@nestjs/common';
import { AppService } from './app.service';
import { AuthGuardToSwaGuard } from './common/guard/auth-guard-to-swa/auth-guard-to-swa.guard';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}
  
  // SWAの認証情報が必要
  @UseGuards(AuthGuardToSwaGuard)
  @Get('/api/hello')
  async getHello(@Req() req): Promise<string> {
    console.log('getHello called with user:', req.user);
    console.log('getHello called with userRoles:', req.userRoles);
    
    return "hello";
  }
}