Client Hints로 클린 하게 브라우저 분기하기
더넥스트웹리서치랩
Client Hints로 클린 하게 브라우저 분기하기
👉User-Agent의 문제점
User-Agent는 브라우저를 구분할 때 사용하곤 합니다. 하지만 아래와 같이 Chromium 기반 브라우저에서 window.navigator.userAgent로 User-Agent를 조회하면 동일한 문자열을 볼 수 있습니다.
----------
// Chrome
Mozilla/5.0 (X11; Linux x86_64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/51.0.2704.103
Safari/537.36
// Opera
Mozilla/5.0 (X11; Linux x86_64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/51.0.2704.106
Safari/537.36
OPR/38.0.2220.41
// Edge
Mozilla/5.0 (Windows NT 10.0; Win64; x64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/91.0.4472.124
Safari/537.36
Edg/91.0.864.59
----------
User-Agent에서 Chrome 브라우저를 구분하려면 어떻게 해야 할까요? OPR, Edg가 포함되지 않으면 Chrome으로 구분 가능할 것 같지만 Chromium 기반의 다른 브라우저에서 접근하면 이 방식은 버그를 유발할 수 있습니다.
----------
const userAgent = window.navigator.userAgent;
const isEdge = userAgent.includes("Edg");
const isOpera = userAgent.includes("OPR");
// Chrome이 아닌 Edge, Opara 이외 Chromium 기반 브라우저에서 항상 true
const isChrome = userAgent.includes("Chrome") && !isEdge && !isOpera;
----------
👉Client Hints 사용하기
Chromium 기반의 브라우저를 명확히 구분하기 위해서는 Client Hints을 활용해야 합니다. Client Hints는 User-Agent의 오용을 방지하기 위해 만들어졌고, 브라우저에서 문자열을 전달합니다.
Client Hints는 window.navigator.userAgentData.brands를 사용해서 조회할 수 있습니다. Chromium 기반 브라우저에서 Client Hints를 조회하면 브라우저별로 다른 문자열이 포함된 것을 확인할 수 있습니다.
----------
// Chrome
[
{
"brand": "Not/A)Brand",
"version": "99"
},
{
"brand": "Google Chrome",
"version": "115"
},
{
"brand": "Chromium",
"version": "115"
}
]
// Opera
[
{
"brand": "Not/A)Brand",
"version": "99"
},
{
"brand": "Opera",
"version": "101"
},
{
"brand": "Chromium",
"version": "115"
}
]
// Edge
[
{
"brand": "Not/A)Brand",
"version": "99"
},
{
"brand": "Microsoft Edge",
"version": "115"
},
{
"brand": "Chromium",
"version": "115"
}
]
----------
위와 같이 브라우저의 문자열을 명확히 구분할 수 있습니다. 때문에 User-Agent와 다르게 아래와 같이 버그 없는 코드를 작성할 수 있습니다.
----------
const userAgentBrands = window.navigator
.userAgentData.brands.map(({brand}) => brand);
const isEdge = userAgentBrands.includes("Microsoft Edge");
const isOpera = userAgentBrands.includes("Opera");
const isChrome = userAgentBrands.includes("Google Chrome");
----------
https://the-next-web-research-lab.github.io/essay/client-hints.html
다음 내용이 궁금하다면?
이미 회원이신가요?
2023년 8월 9일 오전 11:18
댓글 0
함께 읽은 게시물
혹시 Cursor 채팅만 사용하시나요? Agent 쓰는 방법!
Cursor와 함께라면, 더이상 에디터는 단순한 입력 도구가 아닌
... 더 보기Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자로" 강의를
... 더 보기
공식적으로 뭐하는 회사인지는 모르지만 일단 100억달러 기업가치
... 더 보기코루틴 Q&A
코루틴에 대해 알아보아요
Q. 코루틴에 대해 쉽게 설명해주세요.
A. 코루틴은 실행을 일시 중지하고 상태를 잃지 않고 호출자에게 다시 제어권을 양보할 수 있는 함수입니다. 이렇게 하면 기능이 나중에 재개되어 중단된 위치에서 다시 시작할 수 있습니다. 코루틴은 단일 스레드에서 여러 작업을 동시에 수행할 수 있도록 프로그래밍에 자주 사용됩니다.
Q. 스레드와 비교해서 설명해주세요.
A. 스레드는 다른 스레드와 동시에 실행할 수 있는 별도의 실행 경로입니다. 프로그램이 새 스레드를 생성할 때 일반적으로 별도의 스택 및 레지스터 세트가 제공되며 운영 체제는 스레드가 하나 이상의 CPU 코어에서 실행되도록 예약합니다. 이를 통해 여러 스레드가 동시에 실행될 수 있으므로 한 번에 둘 이상의 작업을 수행할 수 있으므로 프로그램의 성능이 향상될 수 있습니다.
대조적으로, 코루틴은 실행을 일시 중지하고 상태를 잃지 않고 호출자에게 제어권을 다시 양보할 수 있는 함수입니다. 이렇게 하면 기능이 나중에 재개되어 중단된 위치에서 다시 시작할 수 있습니다. 스레드와 달리 코루틴은 일반적으로 단일 스레드에서 실행되며 동일한 스택 및 ... 더 보기
