JS逆向之怎么补浏览器环境

发布时间：2023-03-01 13:43:31 作者：iii
来源：亿速云阅读：185

JS逆向之怎么补浏览器环境

引言

在JS逆向工程中，补浏览器环境是一个非常重要的环节。很多网站会通过检测浏览器的环境来判断请求是否来自真实的浏览器，从而防止爬虫和自动化工具的访问。因此，了解如何补浏览器环境是进行JS逆向的基础之一。

本文将详细介绍什么是浏览器环境，为什么需要补浏览器环境，常见的浏览器环境检测手段，以及如何补浏览器环境。最后，我们还会通过几个实战案例来加深理解。

什么是浏览器环境

浏览器环境指的是浏览器在运行JavaScript代码时所提供的各种API和对象。这些API和对象包括但不限于：

navigator 对象：包含有关浏览器的信息，如User-Agent、语言、插件等。
window 对象：表示浏览器窗口，包含各种属性和方法，如screen、location等。
document 对象：表示当前加载的网页文档，包含DOM操作相关的API。
performance 对象：提供浏览器性能相关的信息。

这些对象和API共同构成了浏览器的运行环境，JavaScript代码通过这些API与浏览器进行交互。

为什么需要补浏览器环境

在进行JS逆向时，我们通常会使用一些自动化工具（如Puppeteer、Selenium等）来模拟浏览器的行为。然而，这些工具并不能完全模拟真实浏览器的环境，因此容易被网站检测到。

网站通常会通过以下几种方式来检测浏览器环境：

User-Agent检测：通过navigator.userAgent来检测浏览器的类型和版本。
浏览器特性检测：通过检测浏览器是否支持某些特性（如WebGL、Canvas等）来判断是否为真实浏览器。
插件和扩展检测：通过navigator.plugins和navigator.mimeTypes来检测浏览器是否安装了某些插件或扩展。
屏幕分辨率检测：通过window.screen来检测屏幕的分辨率和颜色深度。
时区和语言检测：通过navigator.language和Intl.DateTimeFormat来检测浏览器的语言和时区设置。

如果这些检测手段发现环境异常，网站可能会拒绝请求或返回错误页面。因此，补浏览器环境是为了让自动化工具能够更好地模拟真实浏览器的行为，从而绕过这些检测。

常见的浏览器环境检测手段

4.1 User-Agent检测

User-Agent是浏览器在发送HTTP请求时附带的一个字符串，用于标识浏览器的类型、版本、操作系统等信息。网站可以通过navigator.userAgent来获取这个字符串，并根据其内容来判断请求是否来自真实的浏览器。

例如，Chrome浏览器的User-Agent可能如下所示：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

如果自动化工具没有正确设置User-Agent，网站可能会检测到异常并拒绝请求。

4.2 浏览器特性检测

浏览器特性检测是指通过检测浏览器是否支持某些特定的API或功能来判断是否为真实浏览器。常见的检测手段包括：

WebGL检测：通过WebGLRenderingContext来检测浏览器是否支持WebGL。
Canvas检测：通过HTMLCanvasElement和CanvasRenderingContext2D来检测浏览器是否支持Canvas绘图。
AudioContext检测：通过AudioContext来检测浏览器是否支持Web Audio API。

如果自动化工具没有正确模拟这些特性，网站可能会检测到异常并拒绝请求。

4.3 插件和扩展检测

插件和扩展检测是指通过navigator.plugins和navigator.mimeTypes来检测浏览器是否安装了某些插件或扩展。常见的插件包括Flash、PDF Viewer等。

例如，Chrome浏览器通常会安装一些默认的插件，如Chrome PDF Viewer。如果自动化工具没有正确模拟这些插件，网站可能会检测到异常并拒绝请求。

4.4 屏幕分辨率检测

屏幕分辨率检测是指通过window.screen来检测屏幕的分辨率和颜色深度。常见的检测手段包括：

屏幕宽度和高度：通过window.screen.width和window.screen.height来检测屏幕的分辨率。
颜色深度：通过window.screen.colorDepth来检测屏幕的颜色深度。

如果自动化工具没有正确模拟屏幕分辨率，网站可能会检测到异常并拒绝请求。

4.5 时区和语言检测

时区和语言检测是指通过navigator.language和Intl.DateTimeFormat来检测浏览器的语言和时区设置。常见的检测手段包括：

语言设置：通过navigator.language来检测浏览器的语言设置。
时区设置：通过Intl.DateTimeFormat().resolvedOptions().timeZone来检测浏览器的时区设置。

如果自动化工具没有正确模拟时区和语言设置，网站可能会检测到异常并拒绝请求。

如何补浏览器环境

5.1 补User-Agent

补User-Agent是最基础的一步。我们可以通过设置HTTP请求头中的User-Agent字段来模拟真实浏览器的User-Agent。

例如，在使用Puppeteer时，可以通过以下代码来设置User-Agent：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36');
  await page.goto('https://example.com');
  await browser.close();
})();

5.2 补浏览器特性

补浏览器特性通常需要模拟浏览器支持的各种API和功能。例如，我们可以通过以下代码来模拟WebGL支持：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.evaluateOnNewDocument(() => {
    const mockWebGL = {
      getParameter: () => {},
      getExtension: () => {},
      getSupportedExtensions: () => [],
    };
    Object.defineProperty(HTMLCanvasElement.prototype, 'getContext', {
      value: () => mockWebGL,
    });
  });
  await page.goto('https://example.com');
  await browser.close();
})();

5.3 补插件和扩展

补插件和扩展通常需要模拟navigator.plugins和navigator.mimeTypes。例如，我们可以通过以下代码来模拟Chrome PDF Viewer插件：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.evaluateOnNewDocument(() => {
    const mockPlugins = [
      {
        name: 'Chrome PDF Viewer',
        filename: 'internal-pdf-viewer',
        description: 'Portable Document Format',
      },
    ];
    Object.defineProperty(navigator, 'plugins', {
      get: () => mockPlugins,
    });
  });
  await page.goto('https://example.com');
  await browser.close();
})();

5.4 补屏幕分辨率

补屏幕分辨率通常需要模拟window.screen对象。例如，我们可以通过以下代码来模拟1920x1080的屏幕分辨率：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.evaluateOnNewDocument(() => {
    Object.defineProperty(window, 'screen', {
      value: {
        width: 1920,
        height: 1080,
        colorDepth: 24,
      },
    });
  });
  await page.goto('https://example.com');
  await browser.close();
})();

5.5 补时区和语言

补时区和语言通常需要模拟navigator.language和Intl.DateTimeFormat。例如，我们可以通过以下代码来模拟时区和语言设置：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.evaluateOnNewDocument(() => {
    Object.defineProperty(navigator, 'language', {
      value: 'en-US',
    });
    Object.defineProperty(Intl, 'DateTimeFormat', {
      value: () => ({
        resolvedOptions: () => ({
          timeZone: 'America/New_York',
        }),
      }),
    });
  });
  await page.goto('https://example.com');
  await browser.close();
})();

实战案例

6.1 案例一：补User-Agent

假设我们要爬取一个网站，该网站通过User-Agent检测来防止爬虫访问。我们可以使用Puppeteer来模拟Chrome浏览器的User-Agent：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36');
  await page.goto('https://example.com');
  await browser.close();
})();

6.2 案例二：补浏览器特性

假设我们要爬取一个网站，该网站通过检测WebGL支持来判断是否为真实浏览器。我们可以使用Puppeteer来模拟WebGL支持：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.evaluateOnNewDocument(() => {
    const mockWebGL = {
      getParameter: () => {},
      getExtension: () => {},
      getSupportedExtensions: () => [],
    };
    Object.defineProperty(HTMLCanvasElement.prototype, 'getContext', {
      value: () => mockWebGL,
    });
  });
  await page.goto('https://example.com');
  await browser.close();
})();

6.3 案例三：补插件和扩展

假设我们要爬取一个网站，该网站通过检测Chrome PDF Viewer插件来判断是否为真实浏览器。我们可以使用Puppeteer来模拟Chrome PDF Viewer插件：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.evaluateOnNewDocument(() => {
    const mockPlugins = [
      {
        name: 'Chrome PDF Viewer',
        filename: 'internal-pdf-viewer',
        description: 'Portable Document Format',
      },
    ];
    Object.defineProperty(navigator, 'plugins', {
      get: () => mockPlugins,
    });
  });
  await page.goto('https://example.com');
  await browser.close();
})();

6.4 案例四：补屏幕分辨率

假设我们要爬取一个网站，该网站通过检测屏幕分辨率来判断是否为真实浏览器。我们可以使用Puppeteer来模拟1920x1080的屏幕分辨率：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.evaluateOnNewDocument(() => {
    Object.defineProperty(window, 'screen', {
      value: {
        width: 1920,
        height: 1080,
        colorDepth: 24,
      },
    });
  });
  await page.goto('https://example.com');
  await browser.close();
})();

6.5 案例五：补时区和语言

假设我们要爬取一个网站，该网站通过检测时区和语言设置来判断是否为真实浏览器。我们可以使用Puppeteer来模拟时区和语言设置：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.evaluateOnNewDocument(() => {
    Object.defineProperty(navigator, 'language', {
      value: 'en-US',
    });
    Object.defineProperty(Intl, 'DateTimeFormat', {
      value: () => ({
        resolvedOptions: () => ({
          timeZone: 'America/New_York',
        }),
      }),
    });
  });
  await page.goto('https://example.com');
  await browser.close();
})();

总结

补浏览器环境是JS逆向工程中的一个重要环节。通过模拟真实浏览器的环境，我们可以绕过网站的检测手段，从而成功获取所需的数据。本文详细介绍了什么是浏览器环境，为什么需要补浏览器环境，常见的浏览器环境检测手段，以及如何补浏览器环境。最后，我们还通过几个实战案例来加深理解。

希望本文能对你有所帮助，祝你在JS逆向的道路上越走越远！

JS逆向之怎么补浏览器环境

JS逆向之怎么补浏览器环境

目录

引言

什么是浏览器环境

为什么需要补浏览器环境

常见的浏览器环境检测手段

4.1 User-Agent检测

4.2 浏览器特性检测

4.3 插件和扩展检测

4.4 屏幕分辨率检测

4.5 时区和语言检测

如何补浏览器环境

5.1 补User-Agent

5.2 补浏览器特性

5.3 补插件和扩展

5.4 补屏幕分辨率

5.5 补时区和语言

实战案例

6.1 案例一：补User-Agent

6.2 案例二：补浏览器特性

6.3 案例三：补插件和扩展

6.4 案例四：补屏幕分辨率

6.5 案例五：补时区和语言

总结

相关阅读