88 lines
8.6 KiB
Markdown
88 lines
8.6 KiB
Markdown
# Web入门指北
|
||
|
||
> 本文来自HGAME Mini 2022 Web 入门材料，目的是为了帮助新生更好的入门Web安全。
|
||
|
||
## 0x00 前言
|
||
|
||
本文希望为对Web感兴趣的同学提供在入门方向上的指导，以便与更加平滑的入门Web方向的学习。
|
||
|
||
## 0x01 Web安全基础
|
||
|
||
### Web安全是什么
|
||
|
||
首先Web安全是CTF比赛一直以来都很重要的一部分，CTF比赛目前主体还是Jeopardy解题模式，主要分为Web安全,Re逆向工程,Pwn,Crypto密码学,Misc安全杂项五个方向。相比于Re和Pwn两个二进制方向，Web安全在初期入门时门槛较低，并不需要太多对底层知识的了解，对小白也较为友好，能够比较快速的上手做题。
|
||
|
||
虽然Web安全入门门槛比较低，但是不得不承认需要学习的技术栈很多，在说起你经常听闻的Java、Php、Go、Javascript等种种语言之前，我们先来看看Web应用的发展史，理解一下Web应用是什么。
|
||
|
||
### Web发展史
|
||
|
||
> 这段发展史可能有很多名字不太好懂，但是提到这一段发展史是希望你能够对Web技术的发展过程有个框架性的理解，如果有很多困惑的地方可以多多使用搜索引擎，这篇[文章](<https://onebyone.icu/archives/2788>)写的很详细也可以阅读一下～
|
||
|
||
最初的Web应用是静态页面，托管在ISP(Internet Service Provider)上,主要就是比较简单的文字，图片，当时能做的也就是简单浏览网页。而后有了Flash等多媒体技术，网页的功能开始逐渐丰富，音视频和网页的动态交互也让网页开始能够完成更多的事，给用户更好的体验。再随着CGI(Common Gateway Interface)的产生，CGI是Web服务器和外部应用程序的通信接口标准，Web服务器就可以通过CGI执行外部程序，再通过外部程序根据请求内容生成动态内容。再之后随着PHP/JSP等编程语言的加入，MVC思想、REST(Representation State Transformation)架构风格的产生，Web应用开发技术也逐步变化，直到如今，Web应用的开发技术主要分为前端和后端。**简单来说，前端就是用户直接可以看见的部分，比如说我们访问百度，百度页面上面的搜索框、按钮、logo,搜索后展示的网页文字和内容，这些都是属于前端的范畴；而后端主要是用户看不见的部分，比如在百度上搜索Vidar-Team，会能根据搜索内容返回相关的文章，这就是后端所做的部分**。
|
||
|
||
### Web应用的数据是如何交互的
|
||
|
||
> 非常推荐查看MDN文章[万维网是如何工作的](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/How_the_Web_works)和[浏览器的工作原理](https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work)详细了解一下～
|
||
|
||
而Web应用的数据是如何交互的呢？为什么用户输入`https://vidar.club`访问协会官网后浏览器上就会呈现页面呢？
|
||
|
||
|
||
|
||
当我们在浏览器的地址栏中输入`https://vidar.club`后，首先会做的事情是DNS查询，浏览器会去寻找页面资源的位置，也就是寻找这个域名对应的ip地址是多少。因为ip地址的格式为xxx.xxx.xxx.xxx,这对于一个用户并不容易记住，因此我们用形象的域名来让用户记住网址，你看，`vidar.club`就比`1.117.117.147`这个ip好记太多了吧。浏览器根据域名`vidar.club`向DNS服务器查询对应ip地址，得到响应对应ip地址为`1.117.117.147`。
|
||
|
||
而当浏览器知道了服务器的IP地址后，就会与服务器进行TCP三次握手，三次握手机制是用来让两端尝试进行通信，之后为了让链接更加安全，就会进行TLS协商。你看我们输入的是`https://`，这表明我们使用了https协议进行访问，http协议的数据传输是明文的，这并不安全，而https使用ssl/tls协议进行加密处理，这会让访问变得安全。顺带一提如果使用http访问协会官网也会强制使用https哦，可以试一试`http://vidar.club`。当三次握手和TLS协商完成后，我们就已经和服务器建立了安全连接啦。
|
||
|
||
建立安全连接后，浏览器会向服务器发送HTTP Get请求，请求服务器返回我们事先放在服务器上面的对应网页的内容，这个请求的内容通常是一个HTML文件，而当服务器受到请求后，就会使用相关的响应头和HTML的内容进行回复。
|
||
|
||
浏览器收到服务端的200 OK的HTTP响应，收到服务端发过来的HTML文件后，会处理HTML标记并且构建DOM树，最终就形成了你看到的页面啦。
|
||
|
||
HTTP请求和响应的具体内容可以使用浏览器（推荐使用Chrome、Firefox或Edge）的F12开发者工具进行查看，打开f12后选择网络并且刷新页面捕获请求，点击这个vidar.club就可以看到啦。
|
||
|
||
|
||
|
||
|
||
## 0x02 Web安全入门
|
||
|
||
### 我是零基础小白，从什么开始好呢？
|
||
|
||
> 万丈高楼平地起
|
||
|
||
虽然在Web安全的技术栈中，会比较少的提及C/C++安全的问题，更多的都是一些你经常听说的Java、Php等语言的安全问题，不过如果你目前是没有任何编程基础，协会也同样推荐打好基础，先好好学习C语言。对于没有编程基础的你，从C语言这样一门接近底层的高级语言开始学习可以更好学习计算机内部原理，并且学会C语言后有一定的编程基础，入门其他语言也绝非难事。
|
||
|
||
### Web技术栈
|
||
|
||
首先需要明确的是，Web安全和Web开发是分不开的，并不是说对安全感兴趣就不需要懂开发，恰恰相反，开发是安全的基础，如果没有开发能力，在之后学习中面对一些代码审计也会感觉到非常茫然，所以学习Web安全之前首要的就是先学习Web开发。而Web开发的学习路线在学长们身上大多不是很固定，有的人接触到的Web开发的第一门语言是PHP,PHP虽然在现在看来已经不是一门优秀的语言了，后端开发的主流技术栈已经是Java和Go了，但是PHP仍然是一门在安全学习上非常推荐的语言，有很多历史漏洞可以让大家更好的入门。也有的学长最先开始接触的是Go/Java/Js,那如果你已经有一定Web开发基础，可以直接参考下面的学习路线与学习资料，如果你还没有Web开发基础并且认为C语言已经学的不错了，就可以尝试选择一门自己感兴趣的语言进行学习，并且尝试自己写一些感兴趣的Web应用，比如搭建一个博客，写一个Todolist用来记事等等，兴趣是最好的导师，一边写自己感兴趣的Web应用一边学习是非常不错的。
|
||
|
||
## 0x03 学习资料与学习路线推荐
|
||
|
||
- 兔兔的sql注入小游戏
|
||
招新群中的迎新机器人具有一个blog功能，这个blog功能存在一个sql注入的漏洞，通过漏洞查询出数据库中的flag可以找管理员兑换一杯奶茶哦～（支线任务x）
|
||
- 搭建博客
|
||
博客可以记录自己的学习过程与经历，也可以当作一个Web应用开发的小练习
|
||
- 刷题
|
||
如果你想一边学习Web开发一边做做题目，感受一下Web安全，可以在协会的招新训练平台上面做做题目，要是毫无头绪也可以问问学长学姐们哦～训练平台上的题目可以帮助你更好的入门CTF！
|
||
- 学习资料
|
||
面对网络各式各样的学习资料，这些网站和书籍会对你入门有所帮助
|
||
- [MDN 网络文档](https://developer.mozilla.org)
|
||
- [Web 安全学习笔记](https://websec.readthedocs.io)
|
||
- [CTF wiki](https://github.com/ctf-wiki/ctf-wiki)
|
||
- [HTML CSS 基础](https://www.w3cschool.cn/)
|
||
- JS：《JavaScript DOM编程基础》
|
||
- C：《C Primer Plus》
|
||
- PHP：《PHP和MySQL Web开发》
|
||
- Python: 《Python从入门到实践》的入门部分
|
||
- HTTP：《图解HTTP》
|
||
- 《从0到1：CTFer成长之路》
|
||
- 《白帽子讲Web安全》
|
||
上面提到的书协会都有哦，欢迎有空的时候来协会看书自习！
|
||
- 学习路线
|
||
可以根据上面提到的学习资料和协会的2022提前批招新标准进行个人学习路线的规划，这份Github上很火的[Web Roadmap](https://github.com/hideraldus13/roadmap-do-desenvolvedor-web)也可以参考一下。
|
||
|
||
## 0x04 最后
|
||
|
||
> 勿以浮沙筑高台
|
||
|
||
欢迎对Web安全感兴趣的你，如果在学习过程中遇到困难可以随时在 Vidar-Team 招新群中提问哦，祝你在Web安全的学习道路上越走越远～
|
||
|
||
`VIDAR{Web_1s_3asy_t0_st4rt!!}`
|