从 JavaScript 事件监听与网络安全到知识变现的真谛

第一次尝试轻技术播客

我一直想要尝试以播客形式来更新内容,几周前我和勺子同学终于录了一期以“事件监听与网络安全”为主题的轻技术播客。但是,试图剪辑我们的首次录音过程中,我发现这期播客处女秀的录音设备与网络条件过于“裸奔”,我的声音因为不够放松也超常地低沉,以致可剪辑性接近于零……于是我本着学习剪辑技术的精神,硬剪出了现在这几分钟的节目,请读者包涵初次尝试的渣音质与语无伦次,一起期待以后会更好吧!

.

但是!这期播客并没有白费功夫。在与勺子对话的过程中,我顺便反思了「学习的意义」这件事。准备在这儿也插播写一写,免得这篇文章看起来太不靠谱。

.

你为什么需要看这篇文章

起初想与别人分享这期播客涉及的内容,是在我第一次学习 jQuery(一个 JavaScript 框架,即库) 相关知识的时候。

当我还只是个普通上网用户时,虽然知道自己在网上的浏览痕迹乃至一举一动都可能被大公司当作用户数据监视、存储,但对于其中的技术细节一无所知。就这么怀着对互联网公司采集用户数据手段的好奇和疑虑,直到自己学了点前端开发的皮毛,才终于窥见了一点神奇的真相。不过我觉得更神奇的地方在于,见识了这种在外行人想象中很神秘抽象的技术问题后才发现事实竟可以如此简约——很多我们原以为很复杂困难的问题真的揭开面纱后会发现完全不是想象得那样。

所以我强烈建议你也上手试试这节中会涉及的一点操作知识,不需要任何背景知识,跟着一步步来,确实不复杂,但体验之后或许会让你重新思考网络安全与用户体验的关系。再进一步地,我还会写写学习知识的不同境界。

另外,音频与文字内容大部分不重合,只看文字也能完全自洽! 真爱读者可以考虑点开音频经受“折磨”。

.

工程师是怎样监视你网页浏览活动的

用专业术语来讲,工程师关注我们上网活动的技术手段被称为“事件监听(Event Listening)”。这里的“事件 (Events) ”指的是用户在网页、浏览器上进行的一切操作,比如关闭网页是事件,在网页内搜索框内输入内容是事件,调整浏览器窗口大小是事件,网页内的任意点击也可以是事件。

JavaScript 作为前端后端开发中占有率都很优秀的主流编程语言,自然具备进行事件监听的功能。下面我们就来看一下如何仅用一个浏览器进行事件监听模拟

.

1

打开谷歌浏览器(火狐 (Firefox) 浏览器也可以),进入这个可供实验的简单网站:

http://udacity.github.io/intro-to-jquery/

在网页内击 ⌥⌘J 组合键(火狐是 ⌥⌘K),此时会跳出一个窗口,这就是 JavaScript 的开发环境。

比起其他大部分编程语言在开始写之前先要设置一大堆开发环境,JavaScript 对待初学者算是无比友好的了——只要有个浏览器就可以马上敲起代码啦。

.

2

Console(控制台)一打开可能会有很多红色报错信息,不必在意。

接下来在 JavaScript 的 Console 里输入下面指令:

> monitorEvents(window, "resize");

(指令不包括开头的箭头符号)

接着,随意拖动改变下浏览器窗口的大小,观察 Console 内是否有变化。

若无意外,此时 Console 内会跳出大量反馈信息——因为我们输入的指令就是在监视窗口的大小改变么。细看一下反馈信息,确实都是以 resize ▶︎Event {isTrusted: true, type: "resize", target: Window, ... 为开头的信息;凭借这些详细数据,工程师就足以判断用户端进行了什么相关操作。

想要取消监听以上事件,只需在 Console 中输入:

> unmonitorEvents(window, "resize");

就是这么简单!

虽然以上只是个最简单的示例,但基本原理你已略知一二了。

.

3

除了改变浏览器窗口大小外,我们还可以捕捉页面搜索框内的键盘事件。

新开一个空白网页,打开一个有搜索框的网页,比如 谷歌主页,或者 亚马逊主页,或者其他任何带了搜索框的网页。这里就以谷歌主页作为示例。

右键点击搜索框,选中最后一个 inspect 选项。

此时会跳出你刚刚已经见过的开发者工具窗口。从上方标签页中选中 Console(控制台),现在又回到了 JavaScript 的开发环境。在 > 后输入,

> monitorEvents($0, "key");

(指令不包括开头的箭头符号)

此时在网页搜索框内随便打些内容,再一一删除。你会看到 Console 随着你的键盘动作疯狂地跳出很多反馈信息。

仔细看一下反馈信息,你会发现键盘的任何动作都会被记录下来:输入的字母、空格、删除、功能键等等。从这些记录中,不难拼凑出你在搜索框内输入了什么内容,即便你还没开始正式搜索。

想要关掉以上监听,在 Console 内输入,

> unmonitorEvents($0, "key");

.

4

除此之上,还可以监听很多其他事件。比如鼠标动作(具体到页面内的坐标)和页面控制。具体能捕捉到的事件详情可参照下表:

Event type Corresponding mapped events
mouse “mousedown”, “mouseup”, “click”, “dblclick”, “mousemove”, “mouseover”, “mouseout”, “mousewheel”
key “keydown”, “keyup”, “keypress”, “textInput”
touch “touchstart”, “touchmove”, “touchend”, “touchcancel”
control “resize”, “scroll”, “zoom”, “focus”, “blur”, “select”, “change”, “submit”, “reset”

.

普通人还有网络安全可言吗

哇!既然如此多的网上活动细节都可以被互联网公司捕捉利用,那普通人民群众还有网络隐私和安全可言吗?

我和勺子以前就热烈讨论过这个问题。从技术角度来看,这自然是个“教学相长”的过程——更厉害的锁同时也在培养更厉害的锁匠。同样地,在隐匿个人网络踪迹领域,可以通过社会工程学(Social Engineering,相当于网络安全领域的“反间谍”学)、多重代理 + 虚拟机谨慎安装个人软件加密或擦除隐私文件等方式来捍卫个人网络安全。但是,普通用户有多大动力和精力学习陌生技术领域的繁杂知识呢?这还没有提网络安全是个需要跟随时代步伐、定期升级知识储备和解决方案的学科呢。

所以,在这次讨论的最后,我和勺子达成了消极共识:普通用户在大公司面前几近砧板上的肉,嗯。

.

知识变现的真谛

我在这期播客开头,刚跟勺子宣布这期“事件监听”主题后,勺子第一反应不是我期待中的「哇这个技术是怎么实现的?」,而是:

「那我怎样才能阻止自己被监听呢?」

我愣了一下,然后不得不承认,我没想过这个问题,所以我也不知道是否真的有可能“反”监听。

接着,这个问题又提醒了我,我与勺子对学习知识的不同境界。

我大多情况下都会满足于见识到一样新东西时的「哇!」;

但勺子会紧接着问一句,「那这可以怎么用?」

.

但实际上第二种境界才更有意义。

知识本身不代表价值,能把知识用起来才算有价值。这也解答了「为什么高学历不一定能赚更多」这个经典问题。

你懂很多知识,所以呢?那些知识都能应用到你自己的生活中了吗?能用此来满足别人的需求吗?如果你不能为别人提供价值的话,必然也赚不到太多钱。尤其在现在“知识变现”可操作性大大提高的大趋势下,每一个想要利用知识站着赚钱的人都必然需要思考这些问题。

我在写博文的过程中也多次体验过这个真理。常常我提笔写某个话题的冲动来自于面对新知识的一声「哇」,但写着写着,我会反复发现,若只写某个知识或某本书带给我的感受,文章会显得非常矫情无力。我必须再深入挖一挖——这条知识到底能给读者提供什么价值,读者可以怎么用这篇文章呢——这样思考完才觉得文章不算白写。