基于puppeteer模拟登录抓取页面

关于热图

在网站分析行业中,网站热图能够很好的反应用户在网站的操作行为,具体分析用户的喜好,对网站进行针对性的优化,一个热图的例子(来源于ptengine)

ptengine点击热图

上图中能很清晰的看到用户关注点在那,我们不关注产品中热图的功能如何,本篇文章就热图的实现做一下简单的分析和总结。

热图主流的实现方式

一般实现热图显示需要经过如下阶段:

  1. 获取网站页面
  2. 获取经过处理后的用户数据
  3. 绘制热图 本篇主要聚焦于阶段1来详细的介绍一下主流的在热图中获取网站页面的实现方式
  4. 使用iframe直接嵌入用户网站
  5. 抓取用户页面保存到本地,通过iframe嵌入本地资源(所谓本地资源这里认为是分析工具这一端)

两种方式各有各的优缺点,首先第一种直接嵌入用户网站,这个有一定的限制条件,比如如果用户网站为了防止iframe劫持,不允许iframe嵌套(设置meta X-FRAME-OPTIONS 为sameorgin 或者直接设置http header ,甚至直接通过js来控制

if(window.top !== window.self){ window.top.location = window.location;}  

),这种情况下就需要客户网站做一部分工作才可以被分析工具的iframe加载,使用起来不一定那么方便,因为并不是所有的需要检测分析的网站用户都可以管理网站的。

第二种方式,直接抓取网站页面到本地服务器,然后浏览的是本机服务器上抓取的页面,这种情况下页面已经过来了,我们就可以为所欲为了,首先我们绕过了X-FRAME-OPTIONS 为sameorgin的问题,只需要解决js控制的问题,对于抓取的页面来说,我们可以通过特殊的对应来处理(比如移除对应的js控制,或者添加我们自己的js);但是这种方式也有很多的不足:1、无法抓取spa页面,无法抓取需要用户登录授权的页面,无法抓取用户设置了白明白的页面等等。

两种方式都存在https 和 http资源由于同源策略引起的另一个问题,https站无法加载http资源,所以如果为了最好的兼容性,热图分析工具需要被应用http协议,当然具体可以根据访问的客户网站而具体分站优化。

抓取网站页面如何优化

这里我们针对抓取网站页面遇到的问题基于puppeteer做一些优化,提高抓取成功的概率,主要优化以下两种页面:

  1. spa页面 spa页面在当前页算是主流了,但是它总所周知的是其对搜索引擎的不友好;通常的页面抓取程序其实就是一个简单的爬虫,其过程通常都是发起一个http get 请求到用户网站(应该是用户网站服务器)。这种抓取方式本身就会有问题问题,首先,直接请求的是用户服务器,用户服务器对非浏览器的agent 应该会有很多限制,需要绕过处理;其次,请求返回的是原始内容,需要在浏览器中通过js渲染的部分无法获取(当然,在iframe嵌入后,js执行还是会再一定程度上弥补这个问题),最后如果页面是spa页面,那么此时获取的只是模板,在热图中显示效果非常不友好。 针对这种情况,如果基于puppeteer来做,流程就变成了 puppeteer启动浏览器打开用户网站-->页面渲染-->返回渲染后结果,简单的用伪代码实现如下:
const puppeteer = require('puppeteer');

async getHtml = (url) =>{
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url);
    return await page.content();
}

这样我们拿到的内容就是渲染后的内容,无论页面的渲染方式如何(客户端渲染抑或服务端)

需要登录的页面

对于需要登录页面其实分为多种情况:

  • 需要登录才可以查看页面,如果没有登录,则跳转到login页面(各种管理系统) 对于这种类型的页面我们需要做的就是模拟登录,所谓模拟登录就是让浏览器去登录,这里需要用户提供对应网站的用户名和密码,然后我们走如下的流程: 访问用户网站-->用户网站检测到未登录跳转到login-->puppeteer控制浏览器自动登录后跳转到真正需要抓取的页面,可用如下伪代码来说明:
const puppeteer = require("puppeteer");
async autoLogin =(url)=>{
     const browser = await puppeteer.launch();
     const page =await browser.newPage();
     await page.goto(url);
     await page.waitForNavigation();

     //登录
     await page.type('#username',"用户提供的用户名");
     await page.type('#password','用户提供的密码');

     await page.click('#btn_login');

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

     return await page.content();
}
  • 登录与否都可以查看页面,只是登录后看到内容会所有不同 (各种电商或者portal页面)

这种情况处理会比较简单一些,可以简单的认为是如下步骤:

通过puppeteer启动浏览器打开请求页面-->点击登录按钮-->输入用户名和密码登录 -->重新加载页面

基本代码如下图:

const puppeteer = require("puppeteer");
async autoLoginV2 =(url)=>{
     const browser = await puppeteer.launch();
     const page =await browser.newPage();
     await page.goto(url);

     await page.click('#btn_show_login');

     //登录
     await page.type('#username',"用户提供的用户名");
     await page.type('#password','用户提供的密码');

     await page.click('#btn_login');

    //页面登录成功后,是否需要reload 根据实际情况来确定
     await page.reload();

     return await page.content();
}

总结

明天总结吧,今天下班了。

补充(还昨天的债):基于puppeteer虽然可以很友好的抓取页面内容,但是也存在这很多的局限

  1. 抓取的内容为渲染后的原始html,即资源路径(css、image、javascript)等都是相对路径,保存到本地后无法正常显示,需要特殊处理(js不需要特殊处理,甚至可以移除,因为渲染的结构已经完成)
  2. 通过puppeteer抓取页面性能会比直接http get 性能会差一些,因为多了渲染的过程
  3. 同样无法保证页面的完整性,只是很大的提高了完整的概率,虽然通过page对象提供的各种wait 方法能够解决这个问题,但是网站不同,处理方式就会不同,无法复用。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏做全栈攻城狮

安卓开发教程-实战网页源代码查看器,安卓程序员必备

本系列教程致力于可以快速的进行学习安卓开发,按照项目式的方法,通常一篇文章会做一个小程序。提高学习的兴趣。

2193
来自专栏JadePeng的技术博客

统一配置中心选型对比

引入配置中心,需要考虑和现有项目的兼容性,以及是否引入额外的第三方组件。我们的java项目以SpringBoot为主,需要重点关注springboot支持性。

1.2K3
来自专栏bboysoul

ubuntu安装kali工具包

网上关于这方面的教程很多,大部分都是关于更换源的,今天我要推荐的方法原理一样,不过比较方便。今天要推荐的脚本是katoolin,它可以近似完美帮我们解决安装ka...

1152
来自专栏信安之路

Clickjacking简单介绍

今天没有原创文章发了,从乌云知识库里选了一个文章给大家分享一下,不知道这种方式,大家是否能够接我从乌云知识库里选择一些文章给大家分享,请大家给我提出来,我来根据...

920
来自专栏康怀帅的专栏

SSH 隧道与转发内网穿透(转载)

大家都知道 SSH 是一种安全的传输协议,用在连接服务器上比较多。不过其实除了这个功能,它的隧道转发功能更是吸引人。下面是个人根据自己的需求以及在网上查找的资料...

5995
来自专栏腾讯Bugly的专栏

《移动端本地 H5 秒开方案探索与实现》

对 APP 里的一些使用 H5 实现的功能模块,一般体验都比原生差,那么怎么提高h5加载速度?优化 h5 体验?

1.4K13
来自专栏大数据实战演练

Linux NTP时钟同步

时钟同步在大数据方向,用到的地方很多。举个例子来说吧,像Zookeeper、RegionServer服务都是需要实时和各节点进行通信的。假如各节点差超过30s,...

6122
来自专栏娱乐心理测试

小程序开发者调试工具使用说明

微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。微信团队发布了微信小程序开发者工具、微信小程序开发文档和微信小程序设...

6583
来自专栏月色的自留地

在Mac上使用vs-code快速上手c语言学习(入门文,老鸟退散)

1.1K4
来自专栏知晓程序

[好文回顾] 如何引导公众号粉丝进入小程序?

也许你已经知道,微信提供了「小程序关联公众号」的功能,而且小程序还能关联 50 个公众号。

1452

扫码关注云+社区

领取腾讯云代金券