feat: add some articles about security

This commit is contained in:
ek1ng
2023-05-23 18:28:04 +08:00
parent a9ac066f8c
commit a0494a1884
8 changed files with 169 additions and 19 deletions

View File

@@ -0,0 +1,88 @@
# Web入门指北
> 本文来自HGAME Mini 2022 Web 入门材料目的是为了帮助新生更好的入门Web安全。
> 欢迎对安全感兴趣的小伙伴了解[Vidar-Team](https://vidar.club)
## 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`访问协会官网后浏览器上就会呈现页面呢?
![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》
- PHP《PHP和MySQL Web开发》
- Python: 《Python从入门到实践》的入门部分
- HTTP《图解HTTP》
- 《从0到1CTFer成长之路》
- 《白帽子讲Web安全》
上面提到的书协会都有哦,欢迎有空的时候来协会看书自习!
- 学习路线
可以根据上面提到的学习资料和协会的2022提前批招新标准进行个人学习路线的规划这份Github上很火的[Web Roadmap](https://github.com/hideraldus13/roadmap-do-desenvolvedor-web)也可以参考一下。
## 0x04 最后
> 勿以浮沙筑高台
欢迎对Web安全感兴趣的你如果在学习过程中遇到困难可以随时在 Vidar-Team 2022 招新群中提问哦祝你在Web安全的学习道路上越走越远
`VIDAR{Web_1s_3asy_t0_st4rt!!}`