[深入学习Web安全](8)跨站之魂-Javascript（补习）

来源：http://bbs.ichunqiu.com/thread-10399-1-1.html?from=ch

万年死宅

首发：i春秋社区

注明：转载请务必注明i春秋社区（bbs.ichunqiu.com）

前言

Hello，大家好，今天开始，我们的SQL注射基础部分就已经结束了。（后面还会有高级部分，例如Bypass WAF，盲注，还有关于SQL注射的各种造轮子……）

那么，从今天开始，我们就进入Web前端的世界吧~~要想玩转前端，很重要的一点就是要会HTML,CSS,JavaScript的基础。

相信大家都是搞Web的，HTML和CSS肯定多少都会一点，但是JS的话，我曾听很多朋友说好难。（听到这句话的时候，我是无语的，能说出这句话的人，肯定是lazy man，根本舍不得花时间去学习）

既然如此，我们就在学习前端的安全之前，先来补习一些简单的JS知识吧~

目录

root@1~# JavaScript简介

root@2~# JavaScript小例子

root@3~# JavaScript变量

root@4~# JavaScript函数

root@5~# JavaScript流程控制

root@6~# JavaScript事件

正文

root@1~# JavaScript简介

我们在补习一些简单的、后面学习所需的JS知识之前呢，先来简单的给大家介绍下JavaScript这门语言。这样有助于大家对JS有个更加完整的理解。

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。

上面这一段呢，都摘自“百度百科”。因为这样更具有权威性质。但是这种文绉绉的介绍大家读起来也很累，而且可能涉及到一些专有名词，导致大家没办法理解它的意思。

所以，我还是稍微说一下吧。首先，JS是一种直译式的脚本语言。什么是直译式的脚本语言呢？其实就是那些把代码写在文本里，用解释器直接执行文本中代码的语言，就类似于我个人很常用的Python和PHP，这些都是不用编译直接通过解释器执行的语言，而不像C/C++一样，需要先编译了才能运行。

然后JS的第二个特点就是“弱类型”，什么意思呢？我们来看如下代码：

[C]纯文本查看复制代码

?

1

2

3

4

5#include [/color]

[color=#000000]intmain(){[/color]

[color=#000000]inta = 10;[/color]

[color=#000000]return0;[/color]

[color=#000000]}

这是一段C语言代码，在main函数中，定义了一个int型变量a，值为10。那么在后面的执行过程中，这个变量a就一直是int型了。在后文中就无法对a赋值浮点数和字符串了。而JS呢，则不一样：[AppleScript]纯文本查看复制代码

?

1

2

3var a=10;//此时为int

a="Hello World!";//此时为string

/*同样是变量a，却可以存储两种不同类型的数据*/

可以看到，同样是变量a，在JS中就可以随存储的值的类型不同而导致变量的类型不同。

OK，就到这里吧，我们接着看下一个内容。

root@2~# JavaScript小例子

OK，接下来，我们来看几个JS的小例子，来简单看一下JS能做什么。

#栗子1——页面输出：

首先，要进行页面输出，我们就得使用到document.write()方法，首先document是一个对象，从JS一开始就存在的一个对象，它代表当前的页面（文档），我们调用它的write()方法就能够向该对象中写入内容，我们看如下代码：

我们从外部引入了一个app.js文件，内容如下：

我们来加载一下，效果如下：

OK了，可以看到效果了，如果，对于前面，我说的document不理解的童鞋这下可以理解了，所谓的document对象其实就是app.html，也就是引入app.js的那个html文件，我们如果不在某个document里执行JS,则会发生这样的的事情：

接着我们来看栗子2。

#栗子2——响应事件

这是JS最常见的一个应用，我们举例如下页面：

多了个按钮button，我们将app.js的内容清空，访问如下：

我们可以看到一个Say Hello按钮，但是如果我们点击它却又什么用都没有。

于是我们就可以个这个元素添加onclick属性，让它有点用：

我们添加了onclick属性之后，一但这个元素被点击，就会调用onclick的值，这里是beClick()函数，我们在app.js中定义这个函数：

接着，我们再来点击的话：

接下来是第三个栗子了。

#栗子3——获取并修改元素

我们这次的doucment如下：

清空app.js，浏览下：

我们这下子来尝试通过JS修改h1元素的值，首先给h1元素加个id，如下：

然后给button加个onclick事件：

然后修改app.js为：

然后浏览页面如下：

然后点击一下x按钮，效果如下：

O了，关于JS的应用的演示就到这里了。我们来看下个内容。

root@3~# JavaScript变量

OK，接下来，我们来正式的补习一点JS的知识，首先就是JS的变量。我们在JS中定义变量通常是使用：

[JavaScript]纯文本查看复制代码

?

1

var变量名;

来定义的。

我们举个例子：

这个栗子中变量a是一个整型（整数）数据，b是一个浮点型（小数）数据，c是字符型（字符串）数据，d是布尔型（真和假）数据。

我们来看数据的运算与操作。首先，我们看如下栗子：

那么这个变量d的值就为100了，嘿嘿，接着，我们来看如下这个栗子：

这样的话c就是1.9，浮点型数据加上整形数据就会成为浮点型数据。

再看这样一个栗子：

我们的c的值就成了HelloWorld，不信你看：

好的，JS的变量部分就讲到这里了，我们接着下一个内容。

root@4~# JavaScript函数

OK，接着来说JS的函数，所谓函数是怎么一回事呢？我们先来想像一下，当我们要写上万行代码来实现某些功能的时候，如果在不实用函数的情况下，根本无法理清代码之间的逻辑。

但是我们使用函数的情况下，就不会了。在JS中定义函数的方法很简单，就是：

[JavaScript]纯文本查看复制代码

?

1

2

3function函数名(参数表){

函数体;

}

我们来看个栗子：

我们来加载一下，看下console的输出：

这就是函数，大家自行体会一下，这个不怎么好解释，有些人体会好了就会了结构化程序设计。。。

这就是自定义函数了，我们再来看下，JS自己的函数：

然后，加载一下：

哈哈，我都有点佩服我的机智~~哈哈哈哈哈哈。好了，不开玩笑了，一会被这对“新人”知道了可就不好了。（哈哈哈哈哈哈哈，还是忍不住幸灾乐祸一番啊，哈哈哈哈哈）

root@5~# JavaScript流程控制

好了，接下来，我们来学习JS的流程控制，首先是if...else...语句。我们来看一个实际栗子：

我们来看下效果：

接下来，我们来看switch...case...流程，这个就不像if...else...流程了，这个要比if...else...流程稍微难一些。

我们得先接触一下，这个流程的结构如下：

[JavaScript]纯文本查看复制代码

?

01

02

03

04

05

06

07

08

09

10

11switch(a){

case1:

alert(1);//当a为1时要执行的

break;

case2:

alert(2);//当a为2时要执行的

break;

default:

alert("Unkonw!");//既不是1也不是2时要执行的

break;

}

我们接下来就来看个栗子：

我们来看效果：

再接下来就是For循环，JS的For循环和C语言的是一样的，和Python的是不一样的，我们来看：

[JavaScript]纯文本查看复制代码

?

1

2

3for(初始化变量;循环条件;改变条件){

循环体;

}

我们就来举个栗子讲解：

这个For循环的第一个位置var i=0就是初始化变量，然后设定循环条件为i小于100，最后每次循环体执行后就把i的值加1。

我们来看效果：

一直不停的弹窗，弹了100次。。（坑人必备。。其实坑不了，因为有个禁止此页再显示对话框。。。）

接着是While循环，结构如下：

[AppleScript]纯文本查看复制代码

?

1

2

3while(循环条件){

循环体;

}

我们来看一个实际栗子：

还是弹TT一百次啦，哈哈。

好了关于JS的流程控制就到这里，我们再来整个我看了很爽的代码：

嘿嘿嘿嘿嘿嘿嘿嘿。。。。（别说我猥琐。。。）

root@6~# JavaScript事件

最后，我们就拿JS事件来结尾吧，先上图：

OK了，JS就这些事件，常见的呢，我们就来演示一下，首先是onclick事件，就是被点击：

接着，我们来浏览器上看看：

点一下ClickMe就会弹窗，接下来，我们再来演示onmouseout、onmouseover事件，代码如下：

Browser上打开，如下：

然后把鼠标移到TEXT上面：

OK了，相信补习的这点JS暂时够用了，大家下来自己在仔细的琢磨一下，在顺便自己实验一下。