无头浏览器 和 Puppeteer

什么是无头浏览器

无头浏览器即headless browser，是一种没有界面的浏览器。它有浏览器该有的一切功能，除了界面。可以通过命令进行浏览器内的各种操作。

我们日常使用浏览器的步骤为：启动浏览器、打开一个网页、进行交互。在无头浏览器中，我们可以通过程序或脚本来执行以上过程，从而模拟出真实的浏览器使用场景。

无头浏览器应用场景

有了无头浏览器，我们就能做包括但不限于以下事情：

• 对网页进行截图保存为图片或 pdf
• 做表单的自动提交、UI的自动化测试、模拟键盘输入等
• 用浏览器自带的一些调试工具和性能分析工具帮助我们分析问题
• 在最新的无头浏览器环境里做测试、使用最新浏览器特性
• 写爬虫，抓取站点数据
• Web自动化测试
• 抓取单页应用(SPA)执行并渲染(解决传统 HTTP 爬虫抓取单页应用难以处理异步请求的问题)
• 执行DDOS攻击
• 增加广告展示次数
• 认证信息填充（自动登录等）

无头浏览器有哪些

无头浏览器很多，包括但不限于:

• Google Chrome: 从版本59开始支持无头浏览模式；
• Firefox： 从版本55（Linux）/ 版本56（Windows、MacOS）开始支持无头模式；
• PhantomJS, 基于 Webkit
• SlimerJS, 基于 Gecko
• HtmlUnit, 基于 Rhnio
• TrifleJS, 基于 Trident
• Splash, 基于 Webkit

无头浏览器的应用实例

这里以puppeteer举例说明。 Puppeteer是一个Node库，提供了高级API通过DevTool来控制Chrome或Chromium。默认headless也就是无UI的chrome，也可以配置为有UI。

安装puppeteer

npm install --save puppeteer

模拟登陆

const puppeteer = require('puppeteer');

const LOGIGPAGE = 'http://example.cn/';

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.goto(LOGIGPAGE);

    await page.type('#username', "your username");
    await page.type('#password', 'your password');

    await page.click('#btn-login');

    //页面登录成功后，需要保证redirect 跳转到请求的页面
    await page.waitForNavigation();
    await browser.close();

})()

如何检测无头浏览器

UserAgent检测

无头浏览器的UA中通常会带有headless 关键字

plugins检测

无头浏览器的navigator.plugins.length === 0

language检测

无头浏览器的navigator.languages === null

【参考资料】
Puppeteer 入门教程