作者归档:王兆基

关于王兆基

可能是一个程序员。

JavaScript 笔记(一):字符编码

作为一个比较懒的人,我没有记笔记的习惯,结果大量不算常用的的内容就都只是记了个大概,每次用到时都只能现场谷歌。为了改掉这个习惯,今后遇到有趣的事情都会记录这样一篇笔记。

一方面,这些笔记可以让我在习惯性的遗忘一些知识时能够更快的回想起了,另一方面,也许也可以给同样正在学习 JavaScript 的同志们一些经验。

——王兆基 二〇一八年十二月八日

0x00:URI 编码

不管知不知道 JavaScript,几乎所有人都在浏览器的地址栏里见过 URI 编码,也就是类似于这样的东西:

图 1 浏览器地址栏的汉字 URI 编码

图中被红框框住的「%E7%8E%8B%E4%BC%AF%E6%96%87」,实际上就是汉字「王伯文」在 URI(Uniform Resource Identifier,即统一资源标识符,也就是我们俗称的网址)中的「转义序列(escape sequences)」。这些转义序列按照标准,是用 UTF-8 的编码方式编码每个字符的。

当然,如果只是使用的话,其实只需要知道,JavaScript 里可以用 encodeURI 与 encodeURIComponent 方法将 URI 中的字符进行处理,使用一到四个转义序列来表示字符串中的每个字符的 UTF-8 编码。但是我们总是会有许许多多的疑问,比如:encodeURI 方法和 encodeURIComponent 方法有什么区别?为什么是一到四个转义序列?为什么用的是 UTF-8 编码? UTF-8 编码又是什么?这个转换过程是怎样的?这就需要去了解更多的知识了,我将记录在下面。

继续阅读

为 Developer Tools 增加 console.save 保存数据功能

  Google Chrome 浏览器的 Developer Tools 无疑是非常好用的一个工具,它有语法着色与最新的 ECMAScript 标准支持,于简洁性上胜
Visual Studio Code 半子,于易用性上胜 Node.js REPL Terminal 一步。因此,在写一些代码片段时,我往往会直接用 DevTools 环境编写代码并测试。

  但是,在 DevTools 下编写代码却有一个硬伤,就是数据的保存问题。console 可以将各种变量输出在屏幕上,却无法直接将其保存到本地文件,数据少了还好,数据多了后每次手动保存就很伤。正好最近我写了一个简易爬取京东评论的爬虫,需要批量保存数据,便想找到一个更好的方法。

  于是,我决定写一小段 Userscript,为 console 增加一个 save 方法,以一劳永逸地解决这个问题。

继续阅读

如何为新版的「四川大学综合教务系统」增加「一键评教」功能

8 月 27 日无疑是个伟大的日子,在 110 年前的这一天,晚清政府颁布钦定宪法大纲,标志着中国第一部真正意义上的宪法诞生。如果把时间继续向前推移,我们会发现,凯撒在这一天登陆英格兰;而如果把时间继续向后推移,我们会发现,摩尔多瓦在这一天脱离苏联独立,甚至在 2004 年的这一天的雅典奥林匹克体育场上,刘翔跑出了 12 秒 91 平世界纪录的佳绩勇夺金牌……

但是,这些事情对我而言,都不如 2018 年 8 月 27 日发生的事情令人振奋——「四川大学综合教务系统」终于更新了。

我是在江安寝室里的一号坑上得知这个消息的,随后我便意识到了一个严重的问题,我先前写的四川大学综合教务助手失效了!老系统都没了,皮之不存,毛将焉附?一个现实的问题摆在了我面前,是补作业还是重构这个程序?在收到下面这封邮件后,我决定补完重要的作业后就把这个程序重构一下。

现在程序已经重构完成,有需要的同学可以点击这里安装使用。

下面我将记述一下重构过程中的一些要点,基本原理和之前旧系统一键评教那篇文章中所讲的类似,所以一些旧文中提过的内容将不再详述。

继续阅读

[译] 如何检测 Chrome Headless(无头浏览器)?

原文链接:https://antoinevastel.com/bot%20detection/2017/08/05/detect-chrome-headless.html

原文标题:Detecting Chrome Headless

原文作者:Antoine Vastel

译者注:自从 Chrome Headless 发布后,各种基于 Chrome Headless 的自动化测试工具、爬虫等项目层出不穷。比起已经停止更新且容易被针对的 PhantomJS、Selenium 等经典自动化测试程序,Chrome Headless 几乎是完美的。然而,比起 Chrome 的普通模式,Chrome Headless 仍然有一些细微的差别,使其会被抓住小辫子……

编者注:我创建了一个库,可以使用浏览器指纹来检测识别机器人与爬虫。虽然这个库仍在开发中,但您已经可以开始使用它了。Github 地址为:https://github.com/antoinevastel/fpscanner

什么是无头浏览器(headless browser)?

无头浏览器就是一种没有图形用户界面的浏览器。它可以被程序控制,从而自动执行某些任务,例如进行网页自动化测试或网页截图。

为什么要检测无头浏览器?

除了上文提到的那两个人畜无害的例子,无头浏览器还可用于自动执行一些恶意的任务。例如,无头浏览器经常被用于网页爬取,增加广告展示次数或寻找网站漏洞中。

到目前为止,最受欢迎的无头浏览器之一是 PhantomJS。不过,因为它是基于 Qt 框架构建的,所以与大多数流行的浏览器相比,它在许多地方都有所不同。正如这篇文章所述,我们可以使用一些基于浏览器指纹的识别技术来检测它。

在 Chrome 59 之后,Google 发布了 Chrome 浏览器的 Headless 版本。与 PhantomJS 不同,它基于普通的 Chrome 而不是外部框架,这使得它更难被检测出来。

接下来,我们将介绍几种可用于区分普通 Chrome 浏览器和 Chrome Headless 的技术。

继续阅读

如何为「四川大学综合教务系统」增加「一键评教」功能

生活中总有些事情是绕不开的,比如明远湖上的长桥与概率统计的小测,比如学校的评教系统:

我不知道为什么「教学评估」和江安西园二餐厅的二楼天花板一样是绿色,也许是为了告诉大家要坚强,或者在暗示别的什么,但当我每次面对着三十个待评价的老师/助教,却只有一两个想专门写两句评语时,我都感觉自己坚强不起来。

大一上学期时,有人在群里共享了这个,以及类似的一系列自动评教软件,只需要输入教务处的账号和密码就可以使用:

我用了后感觉还行,但后来假期邱哥说他看到有人统计上课数据信息之类的,统计时的数据来源就是这类软件截留下的信息。这类软件很多,我不知道邱哥指的是哪一款,但这种独立的评教软件,不管是一个 exe 桌面程序,还是一个网页,还是一个微信小程序,本质上都是「代理登录」,也就是说,这个程序拿着我的学号和密码去登陆教务处帮我完成评教工作,至于程序干了什么事,我的账号和密码在教务处之外的服务器上存放着有没有风险,这都不得而知。

于是作为一个程序猿,我决定自己写一个一键评教工具。

继续阅读

修复「四川大学综合教务系统」只支持 IE9 以下版本浏览器的 Bug(2)

  在我发布 修复「四川大学综合教务系统」只支持 IE9 以下版本浏览器的 Bug 这篇文章后,我正常的用这个脚本用了一段时间,然后直到今天,我觉得哪里不太对:

  当我想查询一个东西时,我发现这个放大镜根本点不动 =-= 点击后毫无反应,并没有一个窗口弹出来。然后我意识到在之前的文章中,可能我忽视了一些东西,这个教务系统还有和现代化浏览器不兼容的 Bug。打开 Console 一看,果然又报错了:

继续阅读

修复「四川大学综合教务系统」只支持 IE9 以下版本浏览器的 Bug

注:本文中的代码并不能完全修复在 Chrome / Firefox 等现代化浏览器下打开四川大学综合教务系统的  bug ,为了解决之后我发现的另一个问题,我写了这篇文章的后续更新:修复「四川大学综合教务系统」只支持 IE9 以下版本浏览器的 Bug(2),在这篇后续更新中提供的代码可以完全修复综合教务系统在现代化浏览器下的 Bug 。

如果您只需要能用的成品的代码,请直接访问那篇后续更新文章。

  在大学中,有一些事情是潜移默化中就不得不接受的,比如每天早晨起来时面对枕头上脱落头发的心痛,比如晚上 12 时后想洗澡却没热水的尴尬,比如在校园里漫步时周围全是情侣自己却只能做单身狗的无奈,比如说登录综合教务系统时却看到下面这个提示:

继续阅读