HTTP Header를 이용한 클라이언트 타입 확인 방법

인증 및 보안을 할 때는,

디바이스의 특징에 따라서 다른 접근이 필요한 경우가 발생합니다.

이럴 대, HTTP Header를 사용해서 클라이언트, 즉 디바이스의 타입을 구별할 수 있는데요.

오늘은 HTTP Header를 이용한 클라이언트 타입 확인 방법을 알아보겠습니다.

 

1. User-Agent 헤더 활용하기

User-Agent 헤더는 클라이언트의 브라우저, 운영 체제, 디바이스 등의 정보를 포함하기 때문에,

이를 활용해서 클라이언트의 타입을 확인할 수 있습니다.

 

const userAgent = req.headers['user-agent'];

if (userAgent.includes('Mobile')) {
  // 모바일 디바이스
} else if (userAgent.includes('Tablet')) {
  // 태블릿 디바이스
} else {
  // 데스크톱 또는 기타
}

 

 

다만, 이 방법은, 클라이언트에 의해 쉽게 조작될 수 있으므로,

완전히 신뢰할 수 있는 방법은 아닙니다.

보안이 중요하다면, 아래에서 소개하는 Custom헤더를 사용하는 것이 좋습니다.

 

2. Custom 헤더 사용

2-1. Custom 헤더 사용

아래 코드와 같이 Custom 하게 특정한 헤더이름을 정해서,

거기에 들어오는 값을 가지고 판별할 수 있습니다.

필요에 따라서,

모바일앱인지만 구별할 수도 있고요.

좀 더 상세하게 안드로이드앱인지,

ios앱인지도 구별할 수 있겠지요.

 

const clientType = req.headers['x-client-type'];

if (clientType === 'mobile-app') {
  // 모바일 앱
} else if (clientType === 'web-browser') {
  // 웹 브라우저
}

 

 

 

위에서 사용된 'x-client-type' 이라는 헤더이름은,

일반적인 HTTP 헤더 네이밍 컨벤션을 따르는 사용자 정의 헤더인데요.

과거에 비표준 또는 사용자 정의 헤더를 나타내기 위해 'x-'를 붙여서 이름을 지어 사용했기 때문에,

이런 식으로 사용되었습니다.

 

이렇게 'x-'를 붙이는 컨벤션은 2012년 6월부터 공식적으로 폐기되었는데요.

여전히 널리 사용되고 있기는 합니다.

x- 접두사 없이 'client-type'과 같이 사용하거나,

더 명확한 구분을 위해 myapp-client-type과 같이 애플리케이션 이름을 접두사로 사용하는 것도 방법입니다.

 

2-2. 헤더 네이밍 규칙

참고로, HTTP 헤더 이름을 정할 때는 일반적으로 다음과 같은 규칙을 따릅니다.

• 소문자로 작성: 대소문자를 구분하지 않지만, 일반적으로 소문자로 작성함.
• 하이픈으로 단어 구분: 여러 단어로 구성된 헤더 이름은 하이픈(-)으로 구분합니다.
• 설명적인 이름 사용하기: 헤더의 목적을 명확히 나타내는 이름을 사용합니다. 

 

3. Accept 헤더 확인

또 다른 방법이 있을 수 있는데요.

클라이언트가 처리할 수 있는 컨텐츠 타입을 나타내는 Accept 헤더를 사용하는 방법입니다.

JSON을 필요로 하는 클라이언트와 HTML을 처리할 수 있는 웹브라우저 같은 클라이언트의 구분이 가능하겠지요.

 

const accept = req.headers['accept'];

if (accept.includes('application/json')) {
  // JSON을 처리할 수 있는 클라이언트
} else if (accept.includes('text/html')) {
  // HTML을 처리할 수 있는 클라이언트
}

 

 

이상으로 HTTP Header를 이용해서 클라이언트 타입을 확인하는 방법들에 대해서 알아보았습니다.