二 网站前台基本技术
2.1 什么叫做网站的前台
从使用上来讲，网站跑在浏览器的那部分，就是前台；从编程语言来讲，前台可以理解为是由html、JavaScript、 CSS构成的界面应用。
2.2 html
html文档，既是源码文档，又是浏览器上展示的页面。无论是作为浏览器上的页面，还是源码，它都是一样的。我们可以通过浏览器的开发者工具去查看页面本来的代码。本来是代码的文档，跑到浏览器上就成了漂亮的界面，浏览器做了什么？按照统一的规范，把标签翻译成了图形。
用代码去修改文档，是很不友好的；如果直接对着html文档编辑，你想改变一组内容的时候会非常麻烦。但我们又必须操作这些东西，怎么办呢？通过DOM(Document Object Model)
为了便于理解，为什么直接修改文档是很不友好的，我们先不想html文档，而是想一个普通文档。
下面是一篇简写泰山的文档，如果想把其中的"泰山还吸引了无数的文人墨客..."这一句加粗，你是如何做的呢？
泰山介绍
首先你需要记住，要改的内容是"泰山还吸引了无数的文人墨客..."，然后，你需要快速的浏览一下文章，并找到契合的那一句，这个时间会随着文章长度的增加、要修改内容的隐蔽程度而大幅增加。对于程序来讲，也是这样的。
这种方式肯定是不可接受的，怎么办呢？
同样是上面那篇文章，如果在我们读第一遍时，我们对文章进行分段、分句。然后我们要求对方：“不要告诉我要加粗的内容是什么，告诉我要加粗的是第几段的第几句。”是不是会瞬间变快呢？
分段分句
然而还是有点问题，我们这样标记段和句，不是特别好找。有点眼花缭乱的感觉。所以，如果把我们的标记单独拿出来，和原始内容做一个连接怎么样？比如下面的效果，当我去加粗时，根本不用管具体的内容是什么，我找到对段(3) 下面的 句(3),点开直接加粗就可以了。
文档:
段(1):
句(1)，句(2)，句(3)，句(4)
段(2):
句(1)，句(2)，句(3)，句(4)
段(3):
句(1)，句(2)，句(3)，句(4)，句(5)
上面的结构，是对这篇文章而言，有段(1) 段(2) 段(3) ，还有n个句。对于所有的文档而言，是不是就都可以描述为文档、段、句三层结构呢？这其实就是DOM
2.3 JavaScript
有了html文档，有了DOM,还是无法进行文档的修改。因为目前为止，我们只有html这一个工具，它只是一个文档，无法做到自我修改。即便有了DOM,我们还需要一个可以通过DOM去改文档的人，这个人就是javascript.
JavaScript 简称 JS。有另外一门编程语言，叫Java，这两者其实没有任何关系，你完全可以理解为当年在起名字时JS在蹭Java的热度。
JavaScript是一门脚本语言，我们也可以在浏览器中看到它的代码。脚本语言和编译语言是两个相对应的概念。无论哪种语言，我们在编码时，都是使用的人类语言(英语)。但机器在运行程序时，是需要机器语言的，二进制、电压高低。
2.3.1 编译语言
所谓编译语言，是指的程序在运行之前，会先有一个人类语言到机器语言转化的过程，转化完成后，变成机器可以直接执行的文件(如:a.exe)，在无修改的情况下，下次再启动程序，直接启动对应的可执行文件就可以了(如:a.exe)。而这个从人类语言到机器语言转化的过程，我们叫编译。
2.3.2 脚本语言
所谓脚本语言，则是程序不会有一个永久留存的可执行文件，而是需要借助一个翻译官。每次程序在执行时，都由我们的翻译官将代码翻译成机器可执行的数据，然后让机器执行。这个翻译官，我们叫做解释器。浏览器里就集成了对javascript的解释器。
2.3.3 隐含信息
实际上，这两种语言解释有一个隐含的含义： 编译语言，除了在编译阶段，会产生机器可以执行的代码外，在以后的运行阶段，都不会产生。在一定程度上，你可以认为编译后的程序是不可修改的。但脚本语言则不同，在执行期间，它依然可以产生新的，机器可执行的代码，也就是在满足条件的情况下，它随时都可以被修改。
拓展：同样的一段文字，在作为代码或者作为一个单纯的字符时，有什么不同？
比如一段var x=2;当它作为一段代码被编译时，它只是一个变量，是告诉机器他要做动作，要分配一块内存去存这个2,并且记下这个内存的地址；假设编译后的机器码是0010。但如果它是被作为一段字符串，那么整个内容并不是指令，而是被直白的进行转化，那么机器码则变成了0x0076 0x0061 0x0072 0x0020 0x0078 0x003d 0x0032 0x003b。
2.3.4 XSS的定义
上述隐含信息也是XSS漏洞的来源，如果你的代码控制不好，外部人员是可以通过某些手段，让你的程序执行他想做的事情的。
XSS的汉语是跨站点脚本攻击，所谓跨站点，也就是指的你的网站执行的代码，是外来的，不是你自己网站站点本身的。开篇中，二维码中，就包含了一些JS代码，作为外来代码被执行。
2.3.4 JS对DOM的控制即XSS是如何发生的
我们说过我们是需要在程序运行期间对html文档进行操作的；如果我们要向文档中添加一个DOM，而这个添加的入口，恰巧是用户的输入，那么，就会形成XSS。
向html添加元素的代码如下：
document.querySelector("#text").innerHTML="aaaa"
document.querySelector("#text").innerHTML="<a href='https://www.baidu.com/'>点我</a>"
当我们要添加的元素，来源是用户的输入时：
// 此可作为输入，拷贝如input中 <img src onerror='javascript:alert("hack")'>
document.querySelector("#text").innerHTML=document.querySelector("#usname").value;
前述例子，当我们扫码时，真正的二维码内容就是:
<img src onerror='javascript:alert("hack")'>
而源代码处，扫码成功后的操作如下图，如果将此处的innerHTML更换成innerText则可以解决：
代码
网友评论