node基于puppeteer模拟登录抓取页面的实现


Posted in Javascript onMay 09, 2018

关于热图

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

node基于puppeteer模拟登录抓取页面的实现

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

热图主流的实现方式

一般实现热图显示需要经过如下阶段:
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 方法能够解决这个问题,但是网站不同,处理方式就会不同,无法复用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript void(0)的妙用
Oct 21 Javascript
JS 遮照层实现代码
Mar 31 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
nuxt框架中路由鉴权之Koa和Session的用法
May 09 #Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 #jQuery
JS验证输入的是否是数字及保留几位小数问题
May 09 #Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 #Javascript
node puppeteer(headless chrome)实现网站登录
May 09 #Javascript
JS中移除非数字最多保留一位小数
May 09 #Javascript
JS关于刷新页面的相关总结
May 09 #Javascript
You might like
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
解析argc argv在php中的应用
2013/06/24 PHP
PHP中使用curl入门教程
2015/07/02 PHP
ThinkPHP安装和设置
2015/07/27 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
Python通过select实现异步IO的方法
2015/06/04 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
蓝颜请假条
2014/04/11 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
导游词幽默开场白
2019/06/26 职场文书
导游词之任弼时故居
2020/01/07 职场文书
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电
方法汇总:Python 安装第三方库常用
2022/04/26 Python
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL