首页
社区
课程
招聘
[原创]跟着crownless学Web之(1)神奇的计算器
发表于: 2019-1-15 17:57 11379

[原创]跟着crownless学Web之(1)神奇的计算器

2019-1-15 17:57
11379

本文备份于我的博客
大家好,我是Web安全板块的新版主crownless。从今天起我将以CTF赛题讲解的形式介绍一系列的Web基础知识,讲解的顺序将是循序渐进,因此不需要读者有任何基础知识。希望能吸引更多人关注看雪的Web安全板块,为板块增加人气和活力。
在这篇文章中,你将学到:

话不多说,让我们开始吧。首先打开这次的CTF赛题网站:http://139.224.220.67:30005
你将看到如下界面:

对于刚接触Web安全甚至是Web编程的你来说,这个界面或许让你有些困惑。不要紧,请耐心仔细地阅读我的讲解,当你读完这篇文章后一定能对Web安全有一个基本的了解。
首先,页面上方居中部分是一个大标题calc,接着有一个输入框(左边有input:文本)、一个Submit按钮、以及result:文本。
这个界面和我们平时在各种网站上见到的界面很像,可以说是最简单的网页界面之一。那么,这个界面是如何实现的呢?事实上,这是用HTML编写的。HTML即HyperText Markup Language,中文翻译是“超文本标记语言”。接下来,我就教你怎么编写如上的界面。何谓编写界面?就是通过编写HTML语言源代码来达到我们想要的界面效果。可能细心的你已经发现,网页下方已经有了一堆源代码。正如你猜想的那样,这是我为了方便你的学习而特意将源代码显示在了这里。但是不要急着把这些代码直接拷贝出来,因为里面内嵌了一些php语言的代码。我们要做的是删除彩色的php代码。那么,我们可以得到如下代码:

将其保存为1.html,并用浏览器打开1.html,你会发现除了最后一行的result:文本消失了之外,其他部分和CTF赛题网站上的界面是相同的。result:文本之所以消失,是因为我们删除了包含result:的彩色的php代码。恭喜你,你已经完成了人生中的第一张网页!但是别高兴得太早,接下来我来讲解一下1.html的结构。
HTML语言的特色是拥有数量众多的“标签”。何谓“标签”?暂时你可以理解为类似于<aaa>bbb</aaa>这样的东西。标签的功能多种多样。以1.html为例,<center>标签可以让其包裹的内容在网页中居中显示。<h2>标签定义了一个大标题。<form>标签定义了供用户输入的HTML表单(表单的作用在后文中会讲解)。<input>标签定义了输入控件(type="text"代表输入框,type="submit"代表提交表单的按钮)。好了,现在你已经知道怎么用HTML编写一个简单的网页了,但是你想问:在1.html中,这个Submit按钮点上去似乎没什么用嘛!不像在CTF赛题网站上,在文本框里输入1 + 2,result就会显示为3。(事实上,这就是为什么这道题叫做“神奇的计算器”。)
这里,就涉及到了前端和后端的概念。事实上,你刚才编写的1.html正是前端代码。一般流行的前端技术有HTML、CSS、JavaScript。HTML用来构建网页的基本框架,CSS用于美化网页,JavaScript用于为静态的HTML网页增加动态的交互行为。前端代码是运行在浏览器上的。比如说,你打开1.html时,浏览器会读取1.html的内容,并将其转化(行话叫“渲染”)成图像显示在显示器上。而后端代码是运行在服务器上的。比如你刚才在文本框里输入1 + 2并点击Submit,即是将1 + 2这个字符串传递到了./index.php(可以从<form>标签的action属性看出来)。./index.phphttp://139.224.220.67:30005/index.php的简写。服务器上运行的php程序接受到你的1 + 2字符串,调用shell_exec函数获得执行结果3,再嵌入网页形成“动态网页”发送回你的浏览器,你的浏览器渲染“动态网页”显示在屏幕上,这样你就看到了3。综上所述,我们称./index.php为一个后端,因为它能根据用户在前端的输入生成“动态网页”。
那么用户的输入是怎么从浏览器发送到后端的呢?事实上,这里使用的是HTTP协议,全称HyperText Transfer Protocol(超文本传输协议)。当你点击Submit按钮时,浏览器就会找到包含这个按钮的表单元素,即<form action="./index.php">,并找到这个表单元素的method属性(如果没有,那么默认为GET)。如果method属性是GET,那么就发送一个HTTP GET请求,其中包含着浏览器传给后端的参数。比如,当我们在输入框里输入1+2并点击Submit时,将会发送以下HTTP请求给后端:

可以看到,calc参数的内容是1%2B2,事实上这是对1+2的URLEncode(URL编码)。为什么是通过calc参数传递1%2B2呢?事实上,这是在输入框标签<input type="text" name="calc" value="">name属性约定的。也就是说,在这个输入框中输入的内容都将被作为calc参数发送给后端。
index.php后端接受到任何HTTP请求后,都会顺序执行index.php这个脚本内的任何内容。如果遇到了HTML代码,那么原封不动地将其返回给浏览器。如果遇到了php代码,那么就执行php代码并将结果返回给浏览器。那么后端是怎么从HTTP GET请求中取得这个参数的呢?接下来,让我们分析一下php代码。

这段代码的意思是,首先将str变量赋值为空字符串,然后检查$_GET变量是否为空(empty函数的文档在这),如果不为空,那么将calc参数的内容赋值给str。事实上,$_GET是一个数组变量,$_GET["calc"]中存放着从HTTP GET请求中获得的calc参数。
接着再看如下php代码:

echo的作用是将str变量写入输出。也就是说,你发送给后端的1+2参数会被后端原封不动地嵌入输入框标签的value属性。这样你点击Submit后,输入框里就会出现1+2,而不是空的输入框。
接着再看最后一段php代码:

首先,输出一个result:,然后这里使用了.运算符。在php中,这代表字符串连接。然后,执行shell_exec函数。这个函数的作用是“通过shell环境执行命令,并且将完整的输出以字符串的方式返回”。那么执行的是什么命令呢?很明显,是echo $str | bcecho在shell中的作用和在php中的作用一致,比如你在shell中执行echo crownless,你会得到crownless。而bc是一个简易的计算器程序。在你的shell中试试看执行bc指令,再输入1+2并按回车,你会得到3。在echobc当中有一个|符号,这是shell中的管道符号。使用管道,就相当于将前一个程序的输出传递给下一个程序。在你的shell中试试看echo 1+2 | bc,你将会得到3
这里再介绍两个常用的shell命令:

好了,聪明的你一定想到了我们可以通过控制str参数来实现任意命令执行。首先,我们要尝试闭合echo语句。那么我们就要用到;符号。好,现在我们可以给str传入;,那么将会执行shell命令echo ; | bc。但是我们还要想个办法让;后的内容失效。这里我们就要使用shell下的单行注释符号#。也就是说,echo ; # | bc的作用相当于echo ;。那么现在我们就可以在;#之间插入任意我们想要注入的命令了,如ls;。试试看在输入框中输入; ls; #,并按Submit,我们发现目录下有一个there_1s_4_fl4g文件。我们再输入; cat there_1s_4_fl4g; #,我们就可以得到这道CTF题的flag。
怎么样,通过一道题,我们学会了Web的基础知识,很有成就感吧?敬请期待crownless的后续作品。

<center>
<h2>calc</h2>

<form action="./index.php">
input: <input type="text" name="calc" value="">
  <input type="submit" value="Submit">
</form>

</center>
<?php 
$str="";
if(!empty($_GET)){
    $str=$_GET["calc"];
}
?>
<?php echo $str;?>

[培训]内核驱动高级班,冲击BAT一流互联网大厂工作,每周日13:00-18:00直播授课

最后于 2019-1-22 10:08 被crownless编辑 ,原因:
收藏
免费 5
支持
分享
最新回复 (14)
雪    币: 6052
活跃值: (12569)
能力值: ( LV12,RANK:312 )
在线值:
发帖
回帖
粉丝
2
支持!新手跟着版主好好学习一下,图中有些地方有些疑惑,除了版主介绍的其余都是百度获取、理解,不知对不对。
图中name控件应该是 name="cacl"

最后于 2019-1-16 09:50 被一半人生编辑 ,原因:
2019-1-16 09:43
1
雪    币: 43
活跃值: (10)
能力值: ( LV2,RANK:10 )
在线值:
发帖
回帖
粉丝
3
版主,有空说下针对一个网站渗透攻击可以从哪些方面进行分析下手撒
2019-1-16 22:34
1
雪    币: 19
活跃值: (5219)
能力值: ( LV3,RANK:20 )
在线值:
发帖
回帖
粉丝
wsc
4
2019-1-17 11:31
1
雪    币: 1095
活跃值: (165)
能力值: ( LV2,RANK:10 )
在线值:
发帖
回帖
粉丝
5
这回可以从头学起了
2019-1-19 10:02
1
雪    币: 2282
活跃值: (426)
能力值: ( LV5,RANK:60 )
在线值:
发帖
回帖
粉丝
6
理想小青年 支持!新手跟着版主好好学习一下,图中有些地方有些疑惑,除了版主介绍的其余都是百度获取、理解,不知对不对。图中name控件应该是 name="cacl"
input: 就在第一个<input>标签的左边哦,是可以自己修改的
2019-1-19 15:07
1
雪    币: 1012
活跃值: (10)
能力值: ( LV2,RANK:10 )
在线值:
发帖
回帖
粉丝
7
顶一下 刚准备从二进制到web就看到版主的贴了
2019-1-21 00:24
1
雪    币: 6052
活跃值: (12569)
能力值: ( LV12,RANK:312 )
在线值:
发帖
回帖
粉丝
8
crownless input: 就在第一个标签的左边哦,是可以自己修改的
支持,第二遍看才发现是shell环境 在linux下的调用
最后于 2019-1-24 08:35 被一半人生编辑 ,原因:
2019-1-22 09:58
0
雪    币: 2282
活跃值: (426)
能力值: ( LV5,RANK:60 )
在线值:
发帖
回帖
粉丝
9
理想小青年 期待继续更新
这篇文章已经写完了,有一些修改,请从头看一遍。
2019-1-22 10:09
0
雪    币: 324
活跃值: (384)
能力值: ( LV5,RANK:60 )
在线值:
发帖
回帖
粉丝
10
支持  
2019-1-25 18:17
0
雪    币: 1952
活跃值: (786)
能力值: ( LV2,RANK:10 )
在线值:
发帖
回帖
粉丝
11
版主你好,我是一名搞移动安全的,想学一学web安全,有什么推荐的书看看嘛,我也做过俩年移动开发,代码方面应该没问题。
2019-1-29 10:39
0
雪    币: 2282
活跃值: (426)
能力值: ( LV5,RANK:60 )
在线值:
发帖
回帖
粉丝
12
殷zhou 版主你好,我是一名搞移动安全的,想学一学web安全,有什么推荐的书看看嘛,我也做过俩年移动开发,代码方面应该没问题。
请看下图:

最后于 2019-1-29 17:36 被crownless编辑 ,原因:
2019-1-29 17:35
0
雪    币: 1332
活跃值: (9481)
能力值: ( LV12,RANK:650 )
在线值:
发帖
回帖
粉丝
13
楼主可否移步这里https://bbs.pediy.com/thread-249318.htm,解决一下我的问题??谢谢。
2019-2-7 05:39
0
雪    币: 2498
活跃值: (114)
能力值: ( LV2,RANK:10 )
在线值:
发帖
回帖
粉丝
14
新版主威武
2019-2-7 17:48
0
雪    币: 17
能力值: ( LV1,RANK:0 )
在线值:
发帖
回帖
粉丝
15
很棒谢谢斑竹
2019-3-30 15:04
0
游客
登录 | 注册 方可回帖
返回
//