00:00
好嘞,各位,那我们再往下学一个指令啊,叫V-HTML,这个指令呢,也挺有意思的,它有两种讲的方式啊,那么第一种方式呢,就是把它和刚才咱们讲的那个V-text快速的对比一下,然后告诉同学们,其实就是一个人支持结构的解析,一个不支持哎就可以了,那还有一种讲的方式,就是把一里边的东西讲完了之后呢,再多聊几句,聊什么呢?它里边暗藏着的一个安全性问题,哎,我们选择呢,把这个安全性问题呢跟大家说一下,好吧,来我们打开这个啊,我就不再一点一点写了,我把这个结构呢,给它复制过来,把这个有实例呢。也给他复制过来。好,然后呢,结构也不用这么多行,就这两行就够用了,差之语法对吧?这个不再聊了,同学,刚才你发现了这个字符串里边如果有HTML结构V-text也不认它,当你红色框里所有的东西都是普通字符对吧?好,那这呢就不再看了,接下来我换用这个指令V-ATM,你能发现特点了,打开。
01:10
同学,H3是不是被解析了,Div里边是不是真有1H3呢?哎,OK,同学,就截止到目前我已经说完了V-HTL和V-T它俩的区别,一句话,它支持结构的解析,它呢不支持是吧?好,那接下来呢,我们去聊聊它里边这个安全性问题,那是这样啊,各位你得对之前node JS这个课里面我们讲的一个技术点,叫做cookie的工作原理,你得懂,然后你才能听明白我跟你讲的安全性问题,说老师那完了对吧,Node JS也没学的特别好,而且cookie是什么我也不知道啊,所以说接下来呢,各位我快速的通过一个例子,再加上一个图,让不懂cookie的同学明白cookie到底是什么,然后咱们再聊这个安全性问题,好吧,如果node JS啊,服务端学的不错的同学,对cookie比较了解的同学呢,那你可以倍速播放一下这个视频,OK,好同学说这么一个场景啊,说呀有一天你。
02:10
想登录github,于是乎你打开浏览器,输入了github的那个地址,然后呢,剩下的这些我就快速的说,比如说你输入了用户名,输入了密码,随后呢,你点了登录这个按钮,哎,同学,一般来说页面是不是开始跳转了,走跳。跳到哪了呢?以github为例啊,它应该跳到你的个人中心啊,然后呢,又是一个页面了,然后你听我说啊,各位个人中心里边有很多按钮,左边有一点,右边有一点,然后同学你听我说啊,你点了这么一个按钮,这个按钮呢叫做查看我所有的仓库,比如说就是这个按钮,那你一点我问各位是不是又得跳到一个界面去给你展示你所有的仓库啊,那我想问的是啊,各位第一次跳转,我能够成功的从登录那个地方跳到我的个人中心,是不是因为我的用户名和密码是没问题的,是登录成功的,那我想问各位的是第二个箭头,他往你那个所有仓库那个页面跳的时候,我问一下同学,你说我还需不需要再输入一遍用户名和密码了,应该不输入了吧,同学,再说一个比较常见的场景,你登录淘宝要买东西,但是你刚要买东西突然想起来了,诶,之前还有个订单没处理。
03:26
你就点了我的订单,那我想问各位,你点这个我的订单的时候,对吧,你需要再输入一遍用户名和密码吗?你是不需要的,对吧?甚至有的网站都做什么呀,各位七天免登录,你说对不?就你这台电脑,就你这个浏览器,七天之内你登录一次是不是就可以了,也就是今儿晚上你把电脑关了,哎,第二天早上你打开电脑,直接点开淘宝的那个个人中心,你发现不用登录,全是你的个人信息,对不?哎,就是这么一个场景,同学它最好呢,就是用cookie去实现,好,那回来同学我在这儿呢,做了一个动态的图,叫做cookie的工作原理,同学呢,是这样啊,时间有限,我不可能啊怎么讲,通过简略的七八分钟,我就把所有cookie的东西都给你讲完了,比如说服务器是如何生成cookie的,服务器呢是如何校验cookie的合法性的?这些细节上的问题我们不会说,我们只是把一个大概的工作流程给它捋顺了,好不?诶,来,开始走着。
04:26
各位啊,放映一下这个PPT走。中间有条线啊各位,上边的这个区域是第一次请求,下边这个是第二次,我得用两次请求才能演示明白cookie的工作原理,好了开始演示,各位走,你打开了你的Chrome浏览器,你输入了github的地址,然后github让你登录,对吧?用户名密码都敲好了,点了一下登录就是这个过程来走,肯定得有get up服务器是吧?服务器在这呢?好了,开始走,携带着用户名和密码,是不是请求登录github这个网站,那这个时候啊,Github就在在这儿校验你的用户名和密码,这咱就不说了,同学,假设你输入的东西都对,随后怎么办?
05:10
是不是得给你响应来瞧着。诶登录成功了,跳转什么呢?个人中心,但是同学往后看。后边是不是有两个红色的小东西在跟着你啊,也就是说did HUB在给你响应的时候,除了告诉你,哎,你得跳个人中心把一些资源给你,它同时带着另外一些东西过来了,谁呢?就是红色的东西,红色的是什么?你听我说同学就是cookie cookie的本质就是个字符串,而且它里边的格式呢,就像对象一样啊,类似于对象就是k value6key value对吧,其实它就是类似于一个Jason的那么一个字符串,OK,交给谁了,浏览器了。然后同学你看着浏览器拿到了红色的github服务器给你的cookie,他做了一个什么事呢?看着看着这个区域各位走,他进行了一个分类。
06:00
他呢,在浏览器里边,诶,用了一小块空间把GIHUB网站给你的cookie啊,全都存起来了,哎,全都存在这儿了,那点点点啥意思呢,可能还有别的对吧,我这只是演示了github给你返回几个COOKIE2个,那有可能它给你返回的是15个20个,对不对,好了,存起来。那同学你的浏览器啊,可能每天登录啊,各种网站,那所以说这里边可能还有这么一些东西,就是什么什么网站的cookie,我用绿色的去代替了,OK,各位,我们更关注的是什么红色的,我写这个框的意思是你的浏览器可以保存很多很多网站给的cookie,并且它按照网站的分类给你整理好了,明白不?Github的都在这个红色圈里,别的网站的,比如说淘宝的在绿色里边,那百度的呢,可能在黄色的里边,对不对,我没画那么多,好同学,这是第一次请求,第一次响应,那接下来呢,看着。一切都建立在这个基础上啊,看我鼠标画圈的这块,你的浏览器里边已经保存着github给你的cookie了,也保存着别的网站的cookie了,在这个基础上,同学来落下来是吧?在这个基础上你又要开始请求getth HUB了,你想看什么呢?这回呀,你想看看你的这些信息,来走,我想看看我所有的仓库,这个时候同学你发现啊,当你发起了一个请求说我想看所有的仓库的时候,你发现本次请求自动就把谁带着了,K1Y61 K2Y62。
07:29
那我想问各位的是,为什么他把红色的K1K2带着呢?他咋不带绿色的呢?同学,浏览器不可能犯这个错误,因为只有红色的K1K2才是当年github给你的,你发现对不对?各位。哎,当年谁给的你,那你在访问谁的时候,就带着之前人家给你的东西,别乱带,明白不绿色的是别的网站的,不可能带给github说老师浏览器不会犯这个错误,绝对不会好,那同学这个K1K2里边存的是什么呢?对吧?Cookie是字符串,里边存的是什么呢?存的东西你可以理解为是你身份的标识。
08:09
也就是说github的服务器,以后再看见这个K1K2的时候,他就认为,哎呀小张又过来了是吧,不用你再告诉他你的用户名和密码了,直接带着这个红色的东西人家就认,然后在这儿呢,同学他就开始校验了,还说我看你的东西对不对呀,是不是我之前给你那几个呀,值都是不是我这边想要的呀,经过哎各种校验之后,同学他如果觉得你这个东西是成的,你看接下来他这么干了,走。你不是要所有仓库吗?他就给你你曾经创建的所有仓库,同时你注意看各位,好像这块又出现一个小事情,啥K3Y63啥意思,它好像又给你返回了一个小cookie,对吧?各位,哎,那咱聊聊啊,各位,这个cookie就绿色圈圈起来的,这个不一定它会再给你了,有的网站是你登录的一瞬间,他就把15个cookie给你了,给了你之后呢,各位他以后就不再给你了,但是有的网站是随着你跟他进行交互,他不断的再给你一点东西,那同学我问你啊。
09:14
这次响应回来的时候,是不是伴随着一个新的cookie回来了呀,那这时候怎么办呀,浏览器肯定得做一件事儿,只要是服务器给的cookie,它是不是得放在这儿存起来,所以说接下来你看这个位置啊,鼠标的这个位置走,它是不是存起来了,那所以说同学你发没发现这两个红色的小东西,K1K2对于我们来说可太重要了,这个东西就是我们身份的标识,服务器只要遇见了这两个东西,是不是就认为诶遇见了我们,那你只要要你自己的任何敏感的信息,服务器是不是都可以给你啊,OK,同学,所以说你觉不觉得cookie很重要,如果同学你想想,这两个东西被你搞丢了,被别人握在手里了,那是不是就可以虚拟你的身份了呀?诶,就是这么回事。
10:02
啊,想想各位啊,这绿色的呢,其实就是凑数的这么一个东西啊,然后这里边儿还有一个问题,各位,我一直说是Chrome浏览器,我没有说是浏览器,为什么呢?来看第二个图走。就是在这个基础上啊,各位你看刚才来,刚才不是在这儿吗?Giitth HUB不是给了你个K3V3吗?你不是存起来了吗?哎,同学,就这一堆玩意全是啥,全是字符串,好来再往下走,在这个基础上,同学,你电脑上肯定还有别的浏览器,对不对?哎,那比如说呢,有一天你电脑上的firefox火狐这个浏览器呢,去找Chrome,说大哥呀,你那边存的cookie给我用点呗。同学,你觉得这事儿能成吗?你觉得可以实现吗?跨浏览器去读取cookie能行吗?显然是不行的。同学,生活中的一个例子就是这样的啊,你打开你的Chrome浏览器,你登录了你的淘宝,如果说淘宝给你返回的cookie是所有浏览器都能用的,那这时候你发现你打开你的IE浏览器,QQ浏览器啊,火狐浏览器,什么360极速浏览器,你发现这些浏览器只要一打开淘宝都登录了,对吧,但是事实是什么。
11:18
怎么样的呢?你打开这些浏览器,你的淘宝都是处于未登录状态的,也就是说哪个浏览器存的cookie,它就是给哪个浏览器用的,不允许跨浏览器之间去读,你说对吧?好同学,就刚才整个图里边的这些东西呢,我都会给你做一个怎么讲呢测试,让你看看这些东西呢,是不是这个样子,所以说同学经过我这个图的解释,那大家现在明没明白,来我们往上翻一下,大家觉不觉得服务器给我的cookie是至关重要的,丢了就完了,那有些同学说老师啊,我不承认啊,事儿是那么回事儿,你怎么给我验证呢?很简单,来各位瞧着,关键点来了,我得让你认可这个东西,它真重要,来瞧着各位啊,我呢,用Chrome浏览器打开我的github。
12:06
你注意观察啊,同学,我是没有登录的,对吧,你看他让我注册登录吗?好,接下来你瞧着我要登录了,点击登录,我用一个测试账号啊叫hello,艾特硅谷来开始我去登录。好同学,就在你登录成功的一瞬间,我问你,你是不是来到了github的个人中心,那我告诉你啊,同学,在我们图里的这一步其实已经实现了,Github服务器已经返回了一堆的cookie给你,老师,那我怎么看呀?诶,在这看右键检查,找到这个选项,叫application,叫应用,然后这里边有一个cookies,你看它的名字啊,叫做cookies,然后呢,同学他得按照网站进行分类,你看他说github给我的都在这儿呢,那你再点一下它,同学你看到了没?这就是我们所说的那个key,哎,当然这里边啊,它不叫key,浏览器的体现呢,它叫name,那这一列就是我们所说的什么呢?Y6,你看都是KY6 KY6KY6的组合,对不?各位,哎,告诉大家,就这些东西对于你来说太重要了,如果有一天你把这东西搞丢了,被别人啊握在手里了,那别人就能虚拟你的身份了。
13:19
是吧,来我们怎么去测试一下呢?看着我打开firefox,我的火狐浏览器,各位,我在这个Chrome里面是已经登录了的,你看吧,同学,登录最大特点就是这儿他有这个人的头像了,对吧,还有这个人的一些信息,你看哈艾特硅谷啥的同学,这还不是登录吗?已经登录了,然后你打开你的火狐啊,你看一下各位。这就证明了什么问题,就我刚才说的这个cookie不能跨浏览器之间去读取,那你说如果要是行的话,同学,那火狐咋还让你登录呢?哎,说老师,那我再登录一下看着啊同学,假设火狐这个浏览器就是一个心怀不轨的一个坏人的电脑,然后呢,各位你听我说,这个坏人的通过某种办法就把github曾经给你的这一堆cookie他全拿到了。
14:10
说老师那他咋拿呢?在这儿呢,我们先一条一条写,你就比如说这个是多少,这个是多少,说老师那你怎么导入到这个里面来呢?火狐也是可以看cookie的呀,右键检查,然后找到存储,哎,存储这里边有一个cookie,同学你看是吧,说老师那这些东西,这些东西右键清掉,通通都不要给它删掉,然后如果你有足够的耐心啊,全都删掉,你有足够的耐心,你来到这边,一条一条一条一条的看,然后一条一条一条怎么的往这里边加,对吧,然后最终你发现你在这边根本就不用登录,你一刷新页面,直接就是那个人的身份,说老师你胡扯,你给我验证一下可以,但是我没有那个时间,一条一条给你整,那咋办呢?诶,我借助一个插件,这个插件叫做cookie editor,叫做cookie的编辑器,好了打开它,它的最大特点就是能够批量的把所有的cookie导入或者是导出,我接下来摁这个,各位。
15:11
Port什么意思呀?导出这个时候你注意各位,我打开一个文本编辑器呢,你就会发现github给我的所有的cookie,来这个先关掉,都存在这儿了,你瞧这就是能够标识我身份的东西,同学现在被我咋的搞丢了,那搞丢了之后被谁拿到了呢?这个人心怀不轨,这个人我在我的火狐里边安装了同样的插件,接下来很简单,同学我点这个导入,我把东西往过一粘,各位,然后点击这个是不是就成功导入了?来同学瞧着那一堆东西有一个算一个,我问你是不是都被这个心怀不轨的人拿到了呀?接下来注意同学,我都不用登录什么的,我只需要悄悄的一刷新,各位,我问你啊,我的火狐浏览器访问的是不是github这个网站,那火狐就发现,哎哟,我这里边有一些github所对应的cookie啊,那我就都给你带着吧,那同学也就是图里的哪一步呢,这一步。
16:09
对不对,我图里边的体现这些东西是gith HUB咋的,人家亲自给我的,但是我现在火狐浏览器带着的K1K2,那可是我偷的,你说对吧?各位回来你看看发生了什么呀?各位来把控制台关掉咋了?同学,我是不是登录上你的账号了,那我干啥不能干呀,对吧?所以说同学我兜了这么一个大圈子,只想让你承认一件事儿,Cookie很重要,不能丢,里边保存着什么呢?你的一些个人的这个身份信息,说白了同学cookie就是见到了cookie就如同见到了你的用户名和密码,OK,各位好啊,那知道了cookie的重要性,那有些同学就说了,老师那能咋的呀?哎哟,同学,这里边可能就有一个严重的问题了,来,回到我们的这个代码当中,同学,打开咱们的这个网址啊,打开咱们的这个,同学,由于我这个网站吧,也没有做登录功能啥的,所以说同学你说我这里边会不会有cookie呢,打开这个。
17:09
走点击这个同学有吗?没有对吧,说老师那没有咋办呢?那没有你怎么演示问题呀,你刚才弄了半天人get HUB登录了,所以说人家给你东西,那我看你这怎么办呀,同学没有就自己写点呗,我把这个关掉,哎我把这个火狐这个呢也关掉,咱演示完了来我写点啊各位不是这个网站吗?看着啊127.0.0.1这网站我随便写几个来双击就能写,先给他一个K啊叫做A值呢,比如说叫做一是吧,后边的呢,就默认就行了,不用不用去关注了啊来再走,再给他一个什么呢B好了,那值呢,再给他来一个叫做二吧,好了,同学就写这俩就够了,那我问你我是不是哎随便写了点cookie啊啊说老师,那我看看有什么安全性问题啊,好了,这个时候啊,你注意了,回到控制台里面,同学,就算你刷新这个cookie它也不丢啊同学是浏览器存在硬盘里的一块空间里了啊,它不会丢的,你再打开诶,Application找到。
18:10
这是不是还在呀?各位,我能不能够通过JS代码把这些cookie握在手里呢?答案是可以的,看着这么写document.cookie啊,这个时候呢,你就拿到了这个网站所有的cookie,是不是在这儿呢?啊,OK,拿到了吧,A是一,B是二。说老师那能怎么的呢?哎呀,接下来的事儿啊,就有点儿严重了,我们慢慢来啊,各位,如果说你真这么实在,拿了一堆带有结构的HTML字符串。直接就把它变成一个能解析的标签去用,那可能就危险了,因为存在这么一个情况,敲诈各位,我在这儿呢,来一个STR2,我这写的不是H3,写的是A标签,好,那A标签里边呢,同学你写一点这个诱惑性的文字,哎,就什么意思呢,说兄弟我找到啊,找到什么呢?找到你想要的资了,来同学这个文字极具诱惑性是吧?好,你看里边怎么写呢?他写,但是他不写具体跳转的地址了,他写这个东西javascript冒号完了,我写个ALERT1,我慢慢来啊,各位同学这么写啥意思,我这么写啥意思?
19:35
这么写的意思就是一点击这个是不是就弹窗了,来试试啊,刷新一波,诶我没用是吧?啊那再写一个呗,在这写一个div,然后这呢写str几的二好了回来啊看效果,同学你可是拿着这一堆东西直接解析成A标签往这个div里边塞呀,哎,那你看一下,哎一看,哎哟,这得点呢这个哈,来一点是不是弹窗。说那弹窗他他怎么,他能威胁我吗?好,接下来同学坏人就开始干坏事了,来瞧着啊,我这儿啊不写ALERT1,我写这个东西,同学location啊点,然后写一个ref啥意思?
20:16
location.h ref就是跳转也能实现跳转,然后呢,给他一个地址,让他往哪跳HTTP,然后往百度跳啊假设同学我告诉你,这如果真要写得写啥啊,这如果真要写,你想干坏事,你得写干坏事那服务器。啊,你可以写一个什么I地址,比如说幺五三点什么什么东西啊,一个的服务,这我就明白,如果想坏事,你写那个的服务器是不好了,老师这能怎么的呢?那你看一下这能怎么的啊回到这同学诶点了啊走。往哪跳啊,往百度跳,哎,说老师他这儿,哎,你先别关注这儿对吧,那是人家的一个招聘,说老师这也没怎么的呀。说老师,那你刚才说这个可能是干坏事儿的网站咋的,这是放点鬼片呗,吓唬我呗,是吧?哎,放点很黄很暴力的东西吓唬我呗,同学,不是那意思,瞧着回来我再写一丢丢,他就真能干坏事儿了,瞧着在后边啊,我这么写,我拼个问号,英文呢,问号啥意思啊,我要参了,然后你看着啊,我写一加号,我写这么一个东西,document.cookie啥意思?
21:29
document.cookie获取当前你正在所处的这个网站的全部cookie,然后跳走,并且把这所有的cookie以参数的形式。这不是query参数吗?以query参数的形式传给谁?这个坏人的服务器,那你接下来瞧一下效果啊,各位刷新一波啊,极具诱惑性,然后你点了,哎呀我想看看,同学一看不要紧,我想问你的是A等于一是吧,B等于二,就这些东西是不是都是刚才127.0.0.1这台服务器里边的敏感数据啊,对吧?这个页面里的敏感数据吧?同学,这些东西不都是人家网站的服务器给你的吗?不是让你妥善保管的吗?那你怎么就没忍住这一跳,把东西一五一十的都给人家了呢?同学,我问一下他拿到你的cookie,如果他也做刚才我做的同样的那个套路,我问各位你的账号是不是就被人家登录了呀?
22:29
哎,OK,你看同学这危险不危险,但是这里呢,还有一个东西也给大家说一下啊各位就是你看啊,刚才我在这儿啊,通过了一个代码叫document.cookie我是不是获取到了这个网站所有的cookie啊,啊其实啊,各位设计的时候啊,也考虑到这个问题了,他的意思是说,哎呀,你说这直接拿就咔一下就全拿到了,是不是有点危险呀,是吧,他有一些校验在里面。怎么去弄呢?同学你看一下,比如说呀,我打开github,同学我现在打开肯定不让我登录了,因为cookie啥的都在,对不,你打开github的网站,同学你执行同样的代码,你看看你能拿到啥。
23:12
同学,你是不是就能拿到这么点东西啊?你知道为啥吗?他有的可不止这点,我告诉你啊,他有的可不止这点,你看这么多呢。说老师,那为啥呢,你观察后边。有一个http only啥意思?如果你的cookie被这个字段给限制了,那么你这条数据只有HTTP协议可以去读取,可以去携带。任何的人都不能去写,呃,携带或者是读取了,包括你用GS代码去操作,你比如说同学我给你勾上啊这呢我也给你勾上,同学所有的是不是都是http only,那这个时候同学你发现你再去do那点cookie是不是没了。啊哎,说老师那说白了也没有安全性问题啊同学,万一这个服务器的人返回cookie的时候啊,服务器写的不完善,返回cookie的时候敏感的数据没有加http only,那你不废了吗?OK,各位,哎,现在体会体会,同学,其实啊,咱得这么说,各位不是说V怎么怎么地了,说老师有雨锡设计这个V-atml垃圾不咋地。同学,不是V的锅,是你把一段这个包含结构的字符串直接解析成标签在页面里边用,它本身就是一个危险的行为。
24:31
你说对不?各位哎,不说人家指令不咋地,本身这种行为他就不对是不?哎,所以说同学咱们有一个话啊,就是说永远不要相信用户的输入,可能有些同学说老师那这东西不是你自己写的吗?各位你想想百度贴吧都玩过吧,来这是一个人的发的帖子是吧,一些留言,这又是一个留言,那同学我问一下,下边是不是有一个输入留言的地方,这儿一般是不是也有一个那个点击发起留言那个按钮啊同学,那我问一下,你要是把这一堆。
25:03
字符串,哎,以留言的形式你写在这儿了,然后呢,他去遍历这一部分列表的时候,他还用了V-atml同学,那你说是不是就危险了呀?哎,就这么回事,好了,来各位我们总结一波啊,走V-HTML指令,作用就是向指定节点中渲染包含HTML结构的内容。与差值语法的区别就是它跟那个V-text一样,都会替换掉节点中所有的内容啊,但是差值语法就不会啊。还有就是V-atl里面可以识别atl的结构,严重注意就是V-atl存在一个安全性问题,在网站上动态渲染任意的atml都是非常危险的,容易导致叉SS攻击,如果对网络比较了解的小伙伴呢,就知道这个呢叫做叉SS攻击,其实就是刚才我给你说的那种方式,它有一个好听的中文名叫冒充用户之手。就是我拿不到你的用户名和密码,但是cookie不就能标识你的身份吗?好,我就把cookie给你盗走,盗走之后我就带着个cookie去建服务器,服务器他知道个啥,服务器就知道,哎呀,Cookie都对,都是那些东西,对吧,这不就冒充了你的身份吗?哎,叉SS攻击,好,还有这个就是一定要在可信的内容上使用V-atml,也就是说你很确信这STR2,他不会写出这种东西,哎,那你用吧,是吧,永远不要在用户提交的内容上去使用这个V-atl,因为同学啊,你要考虑。
26:31
真正用你系统的可能不是一个普通的用户,可能是一个破坏者,对不好嘞,各位,那这一小节呢,我们停一下。
我来说两句