# 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 技术的发展过程有个框架性的理解，如果有很多困惑的地方可以多多使用搜索引擎 最初的 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`访问协会官网后浏览器上就会呈现页面呢？ ![What happens when you visit a URL](https://ek1ng.oss-cn-hangzhou.aliyuncs.com/1.png) 当我们在浏览器的地址栏中输入`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 就可以看到啦。 ![Chrome 的开发者工具图 1](https://ek1ng.oss-cn-hangzhou.aliyuncs.com/2.png) ![Chrome 的开发者工具图 1](https://ek1ng.oss-cn-hangzhou.aliyuncs.com/3.png) ## 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》 ::: tip 📥 《C Primer Plus》（第六版中文版）（216MB）附件下载 ::: - 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!!}`