Html5

学习XSS从Javascript基础起

字号+ 作者:万年死宅 来源:i春秋社区 2016-11-25 09:13 我要评论( )

我们就进入Web前端的世界吧~~要想玩转前端,很重要的一点就是要会HTML,CSS,JavaScript的基础。 相信大家都是搞Web的,HTML和CSS肯定多少都会一点,但是JS的话,我......

作者:万年死宅
首发: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 <stdio.h>[/color]
[color=#000000]int main(){[/color]
[color=#000000]    int a = 10;[/color]
[color=#000000]    return 0;[/color]
[color=#000000]}

这是一段C语言代码,在main函数中,定义了一个int型变量a,值为10。那么在后面的执行过程中,这个变量a就一直是int型了。在后文中就无法对a赋值浮点数和字符串了。而JS呢,则不一样:
[AppleScript] 纯文本查看 复制代码
?
1
2
3
var 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
3
function 函数名(参数表){
        函数体;
}

我们来看个栗子:



我们来加载一下,看下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
11
switch(a){
    case 1:
        alert(1); //当a为1时要执行的
        break;
    case 2: 
        alert(2); //当a为2时要执行的
        break;
    default:
        alert("Unkonw!");  //既不是1也不是2时要执行的
        break;
}

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



我们来看效果:



再接下来就是For循环,JS的For循环和C语言的是一样的,和Python的是不一样的,我们来看:
[JavaScript] 纯文本查看 复制代码
?
1
2
3
for(初始化变量;循环条件;改变条件){
        循环体;
}

我们就来举个栗子讲解:



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



一直不停的弹窗,弹了100次。。(坑人必备。。其实坑不了,因为有个禁止此页再显示对话框。。。)
接着是While循环,结构如下:
[AppleScript] 纯文本查看 复制代码
?
1
2
3
while(循环条件){
        循环体;
}

我们来看一个实际栗子:



还是弹TT一百次啦,哈哈。
好了关于JS的流程控制就到这里,我们再来整个我看了很爽的代码:



嘿嘿嘿嘿嘿嘿嘿嘿。。。。(别说我猥琐。。。)

  • root@6~# JavaScript事件


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





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



接着,我们来浏览器上看看:



点一下ClickMe就会弹窗,接下来,我们再来演示onmouseoutonmouseover事件,代码如下:



Browser上打开,如下:



然后把鼠标移到TEXT上面:



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

本文来自: 蜗蜗侠's Blog-关注网络安全 http://blog.icxun.cn/Html/248.html

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 打造双剑合璧的 XSS 前端防火墙

    打造双剑合璧的 XSS 前端防火墙

    2017-02-22 15:56

网友点评
暂时未开启评论功能~