올바른 리다이렉트 URI 검증:

// 서버 측 코드 (Node.js 예시)
const allowedRedirectUris = ['https://app.example.com/callback', 'https://app.example.com/auth/callback'];

function validateRedirectUri(uri) {
  return allowedRedirectUris.includes(uri);
}

// 검증 사용
if (!validateRedirectUri(req.query.redirect_uri)) {
  return res.status(400).send('Invalid redirect URI');
}

state 파라미터 구현:

// 클라이언트 측 코드
// 1. 인증 요청 전 state 생성 및 저장
const state = generateRandomString(32);
sessionStorage.setItem('oauth_state', state);

// 2. 인증 요청에 state 포함
const authUrl = `https://auth-server.com/authorize?
  client_id=${clientId}&
  redirect_uri=${encodeURIComponent(redirectUri)}&
  response_type=code&
  state=${state}`;

// 3. 콜백에서 state 검증
function handleCallback() {
  const urlParams = new URLSearchParams(window.location.search);
  const receivedState = urlParams.get('state');
  const storedState = sessionStorage.getItem('oauth_state');
  
  if (!receivedState || receivedState !== storedState) {
    // CSRF 공격 가능성 - 요청 거부
    return handleError('Security error: state mismatch');
  }
  
  // state 검증 성공, 인증 코드 처리 계속
  const code = urlParams.get('code');
  // ...
}

안전한 토큰 사용:

// 토큰 전송 (좋은 예시)
fetch('https://api.example.com/resource', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${accessToken}`
  }
});

// 토큰 저장 (브라우저)
// localStorage 대신 httpOnly 쿠키 사용 권장
// 또는 인메모리 저장 (React 예시)
function TokenProvider({ children }) {
  const [tokens, setTokens] = useState(null);
  
  // 토큰은 상태로만 유지되고 영속적으로 저장되지 않음
  // ...
}

안전한 JWT 검증:

// Node.js 예시
const jwt = require('jsonwebtoken');

try {
  // 알고리즘을 명시적으로 지정
  const payload = jwt.verify(token, publicKey, {
    algorithms: ['RS256'], // 허용된 알고리즘만 명시
    issuer: 'https://auth-server.com',
    audience: 'client-id'
  });
  
  // 추가 검증
  if (payload.exp < Math.floor(Date.now() / 1000)) {
    throw new Error('Token expired');
  }
  
  // 토큰 사용
  // ...
} catch (err) {
  // 검증 실패 처리
  console.error('Token validation failed:', err.message);
}

PKCE 구현:

// 1. 코드 검증기(code verifier) 생성
function generateCodeVerifier() {
  const array = new Uint8Array(32);
  window.crypto.getRandomValues(array);
  return base64UrlEncode(array);
}

// 2. 코드 챌린지(code challenge) 생성
async function generateCodeChallenge(codeVerifier) {
  const encoder = new TextEncoder();
  const data = encoder.encode(codeVerifier);
  const digest = await window.crypto.subtle.digest('SHA-256', data);
  return base64UrlEncode(new Uint8Array(digest));
}

// 3. 인증 요청에 code_challenge 포함
async function initiateAuth() {
  const codeVerifier = generateCodeVerifier();
  sessionStorage.setItem('code_verifier', codeVerifier);
  
  const codeChallenge = await generateCodeChallenge(codeVerifier);
  
  const authUrl = `https://auth-server.com/authorize?
    client_id=${clientId}&
    redirect_uri=${encodeURIComponent(redirectUri)}&
    response_type=code&
    code_challenge=${codeChallenge}&
    code_challenge_method=S256&
    state=${state}`;
    
  window.location.href = authUrl;
}

// 4. 토큰 교환 시 code_verifier 포함
async function exchangeCodeForToken(code) {
  const codeVerifier = sessionStorage.getItem('code_verifier');
  
  const response = await fetch('https://auth-server.com/token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({
      'grant_type': 'authorization_code',
      'client_id': clientId,
      'code': code,
      'redirect_uri': redirectUri,
      'code_verifier': codeVerifier
    })
  });
  
  return await response.json();
}

안전한 아키텍처 예시:

// 프론트엔드에서는 인증 코드만 받아서 백엔드로 전달
// 프론트엔드 코드
async function handleCallback() {
  const urlParams = new URLSearchParams(window.location.search);
  const code = urlParams.get('code');
  const state = urlParams.get('state');
  
  // state 검증 (생략)
  
  // 인증 코드를 백엔드로 전달
  const response = await fetch('/api/auth/callback', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ code })
  });
  
  const tokens = await response.json();
  // 토큰 처리
}

// 백엔드 코드 (Node.js 예시)
app.post('/api/auth/callback', async (req, res) => {
  const { code } = req.body;
  
  // 백엔드에서 client_secret 사용
  const tokenResponse = await fetch('https://auth-server.com/token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({
      'grant_type': 'authorization_code',
      'client_id': process.env.CLIENT_ID,
      'client_secret': process.env.CLIENT_SECRET, // 환경 변수에서 안전하게 가져옴
      'code': code,
      'redirect_uri': process.env.REDIRECT_URI
    })
  });
  
  const tokens = await tokenResponse.json();
  // 토큰 처리 및 응답
});

스코프 검증 예시:

// Express.js 미들웨어 예시
function requireScope(requiredScope) {
  return (req, res, next) => {
    const token = extractTokenFromRequest(req);
    
    try {
      const payload = verifyToken(token);
      const tokenScopes = payload.scope.split(' ');
      
      if (!tokenScopes.includes(requiredScope)) {
        return res.status(403).json({
          error: 'insufficient_scope',
          error_description: `Required scope: ${requiredScope}`
        });
      }
      
      next();
    } catch (err) {
      return res.status(401).json({
        error: 'invalid_token',
        error_description: err.message
      });
    }
  };
}

// API 라우트에 적용
app.get('/api/user/profile', requireScope('profile'), (req, res) => {
  // 프로필 정보 반환
});

app.post('/api/user/settings', requireScope('settings:write'), (req, res) => {
  // 설정 업데이트
});