JavaScript를 사용하여 현재 브라우저가 헤드리스 브라우저인지 감지

헤드리스 브라우저란 무엇인가요?

헤드리스 브라우저는 그래픽 인터페이스로 실행할 수 있는 브라우저를 의미합니다. 테스트 수행, 웹 페이지 스크린샷 찍기 등 프로그래밍을 통해 다양한 작업을 자동으로 수행하도록 헤드리스 브라우저를 제어할 수 있습니다.

왜 "헤드리스" 브라우저라고 불리나요?

"헤드리스"라는 단어는 원래 "헤드리스 컴퓨터"에서 유래되었습니다. "헤드리스 컴퓨터"에 대한 Wikipedia 항목:

헤드리스 시스템은 모니터(예: "헤드"), 키보드 및 마우스 없이 작동하도록 구성된 컴퓨터 시스템 또는 장치를 의미합니다. 헤드리스 시스템은 일반적으로 네트워크 연결을 통해 제어되지만 일부 헤드리스 시스템 장치는 RS-232 직렬 연결을 통한 장치 관리가 필요합니다. 서버는 일반적으로 운영 비용을 줄이기 위해 헤드리스 모드를 사용합니다.

헤드리스 브라우저를 감지하는 이유는 무엇입니까?

앞서 언급한 두 가지 무해한 사용 사례 외에도 헤드리스 브라우저를 사용하여 악성 작업을 자동화할 수 있습니다. 가장 일반적인 형태는 웹을 크롤링하거나, 트래픽을 가짜로 만들거나, 웹사이트 취약점을 탐지하는 것입니다.

가장 인기 있는 헤드리스 브라우저는 PhantomJS입니다. Qt 프레임워크를 기반으로 하기 때문에 일반적인 브라우저에 비해 다양한 기능을 가지고 있으므로 식별할 수 있는 방법이 많습니다.

그러나 구글은 크롬 59부터 헤드리스 구글 크롬을 출시했습니다. 다른 프레임워크가 아닌 정통 구글 크롬을 기반으로 개발돼 프로그램이 일반 브라우저인지 헤드리스 브라우저인지 구별하기 어렵다는 점에서 PhantomJS와 다르다.

아래에서는 프로그램이 일반 브라우저에서 실행되고 있는지 헤드리스 브라우저에서 실행되고 있는지 확인하는 몇 가지 방법을 소개합니다.

헤드리스 브라우저 감지

참고: 이 방법은 4개의 장치(Linux 2개, Mac 2개)에서만 테스트되었습니다. 즉, 헤드리스 브라우저를 감지하는 다른 방법이 많이 있어야 한다는 의미입니다.

사용자 에이전트

먼저 브라우저 유형을 결정하는 가장 일반적인 방법인 사용자 에이전트를 확인하는 방법을 소개합니다. Linux 컴퓨터에서 Chrome 버전 59 헤드리스 브라우저의 사용자 에이전트 값은 다음과 같습니다.

"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/59.0.3071.115 Safari/537.36"

So , 다음과 같이 헤드리스 Chrome 브라우저인지 여부를 감지할 수 있습니다.

if (/HeadlessChrome/.test(window.navigator.userAgent)) {
    console.log("Chrome headless detected");
}

사용자 에이전트는 HTTP 헤더에서도 얻을 수 있습니다. 그러나 두 경우 모두 쉽게 위조됩니다.

Plugins

navigator.plugins는 현재 브라우저의 플러그인 정보가 포함된 배열을 반환합니다. 일반적으로 일반 Chrome 브라우저에는 Chrome PDF 뷰어 또는 Google Native Client와 같은 기본 플러그인이 있습니다. 대조적으로, 헤드리스 모드에서는 플러그인이 없으며 빈 배열이 반환됩니다.

if(navigator.plugins.length == 0) {
    console.log("It may be Chrome headless");
}

Language

Google Chrome에는 현재 브라우저의 언어 설정을 가져올 수 있는 두 가지 JavaScript 속성인 navigator.언어와 navigator.언어가 있습니다. 첫 번째는 브라우저 인터페이스의 언어를 나타내고, 후자는 브라우저 사용자가 두 번째로 선택한 언어를 모두 저장하는 배열을 반환합니다. 그러나 헤드리스 모드에서는 navigator.언어가 빈 문자열을 반환합니다.

if(navigator.languages == "") {
    console.log("Chrome headless detected");
}

WebGL

WebGL은 HTML 캔버스에서 3D 렌더링을 수행할 수 있는 API 세트를 제공합니다. 이러한 API를 통해 그래픽 드라이버 공급업체와 렌더러에 쿼리할 수 있습니다.

Linux의 일반 Google Chrome에서 우리가 얻는 렌더러 및 공급업체 값은 "Google SwiftShader" 및 "Google Inc."입니다.

헤드리스 모드에서 우리가 얻는 것은 윈도우 시스템을 사용하지 않는 렌더링 기술의 이름인 "Mesa OffScreen"과 오픈 소스 Mesa 그래픽 라이브러리의 원본 프로그램인 "Brian Paul"입니다.

var canvas = document.createElement('canvas');
var gl = canvas.getContext('webgl');

var debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
var vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
var renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);

if(vendor == "Brian Paul" && renderer == "Mesa OffScreen") {
    console.log("Chrome headless detected");
}

헤드리스 브라우저의 모든 버전이 동일한 두 값을 갖는 것은 아닙니다. 그러나 현재 헤드리스 브라우저에는 "Mesa Offscreen"과 "Brian Paul"이라는 두 가지 값이 있습니다.

브라우저 기능

Modernizr는 HTML 및 CSS의 다양한 기능에 대한 현재 브라우저의 지원을 감지할 수 있습니다. 일반 Chrome과 헤드리스 Chrome의 유일한 차이점은 헤드리스 모드에서는 헤어라인 기능이 없다는 점입니다. hidpi/retina 헤어라인 지원 여부를 감지하는 데 사용됩니다.

if(!Modernizr["hairline"]) {
    console.log("It may be Chrome headless");
}

로드에 실패한 사진

마지막으로 무엇입니까? 찾아낸 방법 중 가장 효과적인 방법은 브라우저에서 정상적으로 불러올 수 없는 이미지의 높이와 너비를 확인하는 것이었습니다.

일반 크롬에서 로딩에 실패한 이미지의 크기는 브라우저의 확대/축소와 관련이 있지만 절대 0은 아닙니다. 헤드리스 Chrome 브라우저에서 이 이미지의 너비와 높이는 모두 0입니다.

var body = document.getElementsByTagName("body")[0];
var image = document.createElement("img");
image.src = "http://iloveponeydotcom32188.jg";
image.setAttribute("id", "fakeimage");
body.appendChild(image);
image.onerror = function(){
    if(image.width == 0 && image.height == 0) {
        console.log("Chrome headless detected");
    }
}

추천 튜토리얼: "javascript 비디오 튜토리얼"

위 내용은 JavaScript를 사용하여 현재 브라우저가 헤드리스 브라우저인지 감지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!