투케이2K

551. (javaScript) [간단 소스] 자바스크립트 navigator.userAgentData 사용해 상향 된 User-Agent Client 정보 확인 수행 본문

JavaScript

551. (javaScript) [간단 소스] 자바스크립트 navigator.userAgentData 사용해 상향 된 User-Agent Client 정보 확인 수행

투케이2K 2026. 6. 13. 14:01
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : 자바스크립트 / navigator.userAgentData


- 사전) 👉 navigator.userAgentData 간단 설명 : 

  >> navigator.userAgentData 는 Chrome 이 새롭게 도입한 User-Agent Client Hints (UA-CH) API 입니다.

  >> navigator.userAgentData 의 장점 : 

    - 문자열 파싱 불필요
    - 구조화된 데이터 제공
    - 개인정보 보호 강화
    - Chrome이 권장하는 방식

  >> navigator.userAgentData 는 User-Agent Client Hints (UA-CH) 표준의 일부로, 현재 모든 브라우저에서 지원되는 기능은 아닙니다. 특히 Chromium 계열 브라우저 중심으로 지원되고 있습니다.

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화 -->
    <meta name="google" content="notranslate">

    <!-- 내부 CSS 스타일 지정 -->
    <style>

      html, body {
        width: 100%;
        height: 100%;
        margin : 0 auto;
        padding : 0;
        border : none;
        background-color: #666;
      } 

    </style>





    <!-- [CDN 주소 설정] --> 
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">    


      // -----------------------------------------------------------------
      // ✅ [Window.onload 웹 브라우저 로드 완료]
      // -----------------------------------------------------------------
      window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {

          // -----------------------------------------------
          // ✅ navigator.userAgentData 간략 설명
          // -----------------------------------------------
          /*
          1. navigator.userAgentData 는 Chrome 이 새롭게 도입한 User-Agent Client Hints (UA-CH) API 입니다.
          2. navigator.userAgentData 의 장점 : 
            >> 문자열 파싱 불필요
            >> 구조화된 데이터 제공
            >> 개인정보 보호 강화
            >> Chrome이 권장하는 방식
          3. navigator.userAgentData 는 User-Agent Client Hints (UA-CH) 표준의 일부로, 현재 모든 브라우저에서 지원되는 기능은 아닙니다. 특히 Chromium 계열 브라우저 중심으로 지원되고 있습니다.

          | 브라우저            | 지원 여부 | 비고               |
          | ----------------- | -----  | ----------------  |
          | Google Chrome     | 지원    | Chrome 89 이상     |
          | Microsoft Edge    | 지원    | Chromium 기반 Edge |
          | Opera             | 지원    | Chromium 기반      |
          | Samsung Internet  | 지원    | Chromium 엔진 기반  |
          | Brave             | 지원    | Chromium 기반      |
          | Vivaldi           | 지원    | Chromium 기반      |
          | Safari            | 미지원   | UA-CH 미지원       |
          | Firefox           | 미지원   | UA-CH 미지원       |
          | Internet Explorer | 미지원   | 지원 종료           |
          */
          // ----------------------------------------------- 


          // -----------------------------------------------
          // ✅ navigator.userAgentData 지원 여부 확인 수행
          // -----------------------------------------------
          if (navigator.userAgentData) {
            console.log('navigator.userAgentData Supported : ', JSON.stringify(navigator.userAgentData));

            // {"brands":[{"brand":"Google Chrome","version":"149"},{"brand":"Chromium","version":"149"},{"brand":"Not)A;Brand","version":"24"}],"mobile":false,"platform":"macOS"}
            // {"brands":[{"brand":"Google Chrome","version":"149"},{"brand":"Chromium","version":"149"},{"brand":"Not)A;Brand","version":"24"}],"mobile":true,"platform":"Android"}

            console.log('navigator.userAgentData : brands : ', navigator.userAgentData.brands);
            console.log('navigator.userAgentData : mobile : ', navigator.userAgentData.mobile);
            console.log('navigator.userAgentData : platform : ', navigator.userAgentData.platform);

            const highEntropyValues = await navigator.userAgentData.getHighEntropyValues([ // ✅ High Entropy Values 더 자세한 정보는 비동기 API를 통해 가져옵니다.
                "architecture",
                "model",
                "platformVersion",
                "uaFullVersion",
                "fullVersionList"
            ]);


            /* 
            {
              "architecture": "x86",
              "brands": [
                {
                  "brand": "Google Chrome",
                  "version": "149"
                },
                {
                  "brand": "Chromium",
                  "version": "149"
                },
                {
                  "brand": "Not)A;Brand",
                  "version": "24"
                }
              ],
              "fullVersionList": [
                {
                  "brand": "Google Chrome",
                  "version": "149.0.7827.53"
                },
                {
                  "brand": "Chromium",
                  "version": "149.0.7827.53"
                },
                {
                  "brand": "Not)A;Brand",
                  "version": "24.0.0.0"
                }
              ],
              "mobile": false,
              "model": "",
              "platform": "macOS",
              "platformVersion": "13.7.1",
              "uaFullVersion": "149.0.7827.53"
            }
            */
            console.log('navigator.userAgentData highEntropyValues : ', JSON.stringify(highEntropyValues));

          } else {
            console.error('navigator.userAgentData Not Supported');
          } 

        }
        catch (exception) {
          console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);

        }

      };
      

    </script>


</head>


<body>


</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ [간단 소스] 자바스크립트 navigator.userAgent 사용해 접속한 브라우저 엣시 Edge 인지 확인 수행 - isEdge

https://kkh0977.tistory.com/8890

https://blog.naver.com/kkh0977/224306758434


▶️ [간단 소스] 자바스크립트 접속 한 브라우저 환경이 윈도우 환경 인지 확인 - is windows browser

https://kkh0977.tistory.com/8846

https://blog.naver.com/kkh0977/224294530021


▶️ [간단 소스] 자바스크립트 navigator.userAgent 사용해 접속한 브라우저 크롬 chrome 인지 확인 수행 - isChrome

https://kkh0977.tistory.com/8735

https://blog.naver.com/kkh0977/224238606185


▶️ [navigator (네비게이터) 사용해 브라우저 정보 확인 실시 - userAgent , cookieEnabled]

https://kkh0977.tistory.com/853

https://blog.naver.com/kkh0977/222393616945?trackingCode=blog_bloghome_searchlist


▶️ [navigator platform 사용해 pc 및 모바일 접속 확인, navigator userAgent 사용해 접속한 모바일 종류 확인]

https://kkh0977.tistory.com/873

https://blog.naver.com/kkh0977/222399340657?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

553. (javaScript) [간단 소스] 자바스크립트 실무 에러 발생 및 크래시 감지 이벤트 리스너 등록 - error , unhandledrejection , console  (0) 2026.06.14
552. (javaScript) [간단 소스] 자바스크립트 window.screen 사용해 브라우저 화면 가로 , 세로 모드 확인 및 change 화면 회전 감지 이벤트 확인  (0) 2026.06.14
550. (javaScript) [간단 소스] 자바스크립트 window.visualViewport.resize 사용해 사용자 눈에 실제 보이는 영역 화면 변경 이벤트 감지 수행  (0) 2026.06.10
549. (javaScript) 자바스크립트 node-forge 라이브러리 사용해 X.509 인증서 식별 정보 확인 - getSha256Fingerprint  (0) 2026.06.06
548. (javaScript) 자바스크립트 node-forge 라이브러리 사용해 X.509 인증서 만료 기간 유효성 검증 수행  (0) 2026.06.05
'JavaScript' Related Articles more
Comments