JavaScript는 현재 브라우저가 헤드리스 브라우저인지 어떻게 감지합니까?

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

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

for"헤드리스" 브라우저란 무엇입니까?

"헤드리스"라는 단어는 원래 "헤드리스 컴퓨터"에서 유래되었습니다. "헤드리스 컴퓨터"에 대한 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"

따라서 다음과 같이 헤드리스 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”——它是没有使用任何 window 系统的渲染技术的名称，和 “Brian Paul” ——开源 Mesa 图形库的最初的程序。

 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里唯一的区别是，无头模式下没有 hairline 特征，它是用来检测是否支持 hidpi/retina hairlines的

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

加载失败的图片

最后，我发现的最后一个方法，也是看起来最有效的方法，切入点是检查浏览器里不能正常加载的图片的高和宽。

在正常的Chrome里，未成功加载的图片的大小跟浏览器的zoom有关，但肯定不是零。而在无头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");
  }
 }

这就是检测无头浏览器的详细步骤

推荐教程：《JS教程》

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