WEB基础


Web入门

一·HTML基础

<!DOCTYPE><!--html标记-->
<html>      <!--html总标记-->
<head><!--头信息标签-->
    <meta charset="utf-8"><!--utf-8编码-->
    <title>html小白入门</title><!--页面标题-->
    <head>
<body><!--网页显示标签,body标签内的信息都会在页面中显示-->
<a href="http://www.4399.com/">给你康点好康的 </a>
<h1>这是文本标题,下面是一张图片</h1><!--文本标题标签-->
<img src="神.jpg"><br><!--图片标签,br是换行标签-->
<input type="text" value="这是输入框,请输入内容!"><br><!--输入框标签-->
<button type="submit" >按钮</button><!--按钮标签-->
</body>
</html>

<!DOCTYPE> 声明

声明有助于浏览器中正确显示网页。

网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的,以下方式均可:

<!DOCTYPE html> 

 <!DOCTYPE HTML> 

 <!doctype html> 

 <!Doctype Html>

< html >元素

< html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 ,以及一个结束标签 .
元素内容是另一个 HTML 元素(body 元素)。


HTML 注释

可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。

< !-- 这是一个注释 -->

HTML < head > 标签
< head> 元素是所有头部元素的容器。

< head> 元素必须包含文档的标题(title),可以包含脚本、样式、meta 信息 以及其他更多的信息。

以下列出的元素能被用在 元素内部:

  • title(在头部中,这个元素是必需的)

    • 定义浏览器工具栏中的标题
    • 提供页面被添加到收藏夹时的标题
    • 显示在搜索引擎结果中的页面标题
  • style

    • 定义 HTML 文档的样式信息。
    • 您可以规定在浏览器中如何呈现 HTML 文档。
    • 每个 HTML 文档能包含多个 < style > 标签。

    例子:

    < head> 
        < meta charset="utf-8">  
        < title>嘿嘿(baidu.com)</title> 
        < style type="text/css"> h1 {color:red;} p {color:blue;} </style> 
    < /head>
  • base

    • < base > 标签为页面上的所有的相对链接规定默认 URL 或默认目标。
    • 在一个文档中,最多能使用一个 < base > 元素。< base > 标签必须位于 < head > 元素内部。

    例子:

    < head>
    < meta charset="utf-8"> 
    < title> 菜鸟教程(runoob.com) < /title>
    < base href="//www.runoob.com//images/" target="_blank">
    < /head>
  • link

    • 定义文档与外部资源的关系。
    • 最常见的用途是链接样式表。(外部样式表将管理整个Web页的外观)

    例子:

    < head> 
    <link rel="stylesheet" type="text/css" href="theme.css"> 
    < /head>
  • meta

    • 元数据(Metadata)是数据的数据信息。
    • < meta > 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。
    • META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。
    • 元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。

    例子:

    < head> 
    
        < meta name="description" content="免费在线教程"> 
        < meta name="keywords" content="HTML,CSS,XML,JavaScript"> 
        < meta name="author" content="Cu3tuv0"> 
        < meta charset="UTF-8"> 
    
    < /head>
  • script

    • < script > 标签用于定义客户端脚本,比如 JavaScript。
    • < script > 元素既可包含脚本语句,也可以通过 “src” 属性指向外部脚本文件。
    • JavaScript 通常用于图像操作、表单验证以及动态内容更改。
  • nonscript

    • noscript 元素用来定义在脚本未被执行时的替代内容(文本)。
    • 此标签可被用于可识别 < noscript> 标签但无法支持其中的脚本的浏览器。

    例子:

    < script>
    document.write("Hello World!")
    </script>
    < noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>

< body > 元素

< body > 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 < body > 以及一个结束标签 < /body >。
元素内容是另一个 HTML 元素。


HTML 链接

HTML 链接是通过标签 < a> 来定义的。

**提示:**在 href 属性中指定链接的地址。


HTML 标题

HTML 标题(Heading)是通过< h1> - < h6> 标签来定义的。


HTML 段落

HTML 段落是通过标签 < p> 来定义的。


HTML 图像

HTML 图像是通过标签 < img> 来定义的.


HTML 折行

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 < br>


HTML 表单

多数情况下被用到的表单标签是输入标签(< input>)。

输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

文本域(Text Fields)

文本域通过< input type=”text”> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

< form>
 First name: <input type="text" name="firstname"><br>
 Last name: <input type="text" name="lastname"
 < /form>

**注意:**表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。

密码字段

密码字段通过标签< input type=”password”> 来定义:

<form>
 Password: <input type="password" name="pwd">
 </form>

**注意:**密码字段字符不会明文显示,而是以星号或圆点替代。

单选按钮(Radio Buttons)

< input type=”radio”> 标签定义了表单单选框选项

< form>
 <input type="radio" name="sex" value="male">Male<br>
 <input type="radio" name="sex" value="female">Female
 < /form>
复选框(Checkboxes)

< input type=”checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

< form>
 <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
 <input type="checkbox" name="vehicle" value="Car">I have a car 
 < /form>
提交按钮(Submit Button)

< input type=”submit”> 定义了提交按钮.

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

< form name="input" action="r2yyds.php" method="get">
 Username: <input type="text" name="user">
 <input type="submit" value="Submit">
 < /form>

假如您在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会传送到 “r2yyds.php” 的页面。该页面将显示出输入的结果


HTTP

当浏览器从 web 服务器请求服务时,可能会发生错误。

以下列举了有可能会返回的一系列 HTTP 状态消息:

  • 1xx: 信息
  • 2xx: 成功
  • 3xx: 重定向
  • 4xx: 客户端错误
  • 5xx: 服务器错误

详细信息:https://www.runoob.com/tags/html-httpmessages.html


HTTP 方法:GET 对比 POST
什么是 HTTP ?

超文本传输协议(HTTP)的设计目的是保证客户端与服务器之间的通信。

HTTP 的工作方式是客户端与服务器之间的请求-应答协议。

web 浏览器可能是客户端,而计算机上的网络应用程序也可能作为服务器端。

举例:客户端(浏览器)向服务器提交 HTTP 请求;服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。

在客户机和服务器之间进行请求-响应时,两种最常被用到的方法是:GET 和 POST。

  • GET - 从指定的资源请求数据。
  • POST - 向指定的资源提交要被处理的数据。

GET 方法

请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:

url/x.php?a=1

有关 GET 请求的其他一些注释:

  • GET 请求可被缓存
  • GET 请求保留在浏览器历史记录中
  • GET 请求可被收藏为书签
  • GET 请求不应在处理敏感数据时使用
  • GET 请求有长度限制
  • GET 请求只应当用于取回数

POST 方法

请注意,查询字符串(名称/值对)是在 POST 请求的 HTTP 消息主体中发送的:

POST /x.php HTTP/1.1
 Host: url
 a=1

有关 POST 请求的其他一些注释:

  • POST 请求不会被缓存
  • POST 请求不会保留在浏览器历史记录中
  • POST 不能被收藏为书签
  • POST 请求对数据长度没有要求

二·BP与Hackbar的基本用法

查看源代码
  1. F12
  2. CTRL+U
  3. 右键查看页面源代码

例题:https://ctf.bugku.com/challenges/detail/id/68.html

如果需要修改页面上的一些信息,需要用F12

例题:https://ctf.bugku.com/challenges/detail/id/69.html


Hackbar的基本用法

  1. GET方法

    例题:https://ctf.bugku.com/challenges/detail/id/70.html

  2. POST方法

    例题:https://ctf.bugku.com/challenges/detail/id/71.html


bp的基本用法
  1. 上面两题的bp做法

  2. 抓包 例题:https://ctf.bugku.com/challenges/detail/id/74.html

    ​ 例题:https://ctf.show/challenges#web3-365

  3. 爆破

    例题:https://ctf.bugku.com/challenges/detail/id/314.html

  4. 修改请求头、伪造Cookie
    例题:

    常见的有set-cookie、XFF和Referer,总之考法很灵活,做法比较固定,知道一些常见的请求头再根据题目随机应变就没问题了。

    XFF:当出现localhost,本地字样的时候,一般都需要抓包修改X-Forwarded-For为127.0.0.1

    例题:https://ctf.bugku.com/challenges/detail/id/79.html

    Referer:当出现需从哪一个网址访问时,一般需要抓包修改referer为该网址

    User-agent:需要修改访问该网站的浏览器时更改

    accept language:当要求以特定语言访问时修改

    cookie:根据题目提示伪造cookie,稍微简单点的题目的话就是cookie:login=0改为login=1


三·常见编码


ASCII编码

转换工具http://ctf.ssleye.com/cencode.html


base编码

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一

· 基于64个可打印字符来表示二进制数据的方法
· 3个字节可表示4个可打印字符
· 如果要编码的字节数不能被3整除:当最后剩余一个八位字节(一个byte)时,最后6位的base64字节块有四位是0值,最后附加上两个等号;如果最后剩余两个八位字节(2byte)时,最后一个6位的base字节块有两位是0值,最后附加一个等号

在线工具:http://ctf.ssleye.com/base64.html


URL编码

url编码又叫百分号编码,是统一资源定位(URL)编码方式
URL地址(常说网址)规定了常用地数字,字母可以直接使用,另外一批作为特殊用户字符也可以直接用(/,:@等),剩下的其它所有字符必须通过在该字节ascii码的的16进制字符前面加%编码处理

js:有encodeURI、encodeURIComponent
PHP有 urlencode、urldecode等
url编码和双重编码是绕过时常用手段

在线工具:http://ctf.ssleye.com/url.html


Unicode编码

Unicode编码
Unicode是一个编码方案,Unicode 是为了解决传统的字符编码方案的局限而产生的,它为每种语言中的每个字符设定了统一并且唯一的二进制编码,以满足跨语言、跨平台进行文本转换、处理的要求。Unicode 编码共有三种具体实现,分别为utf-8,utf-16,utf-32,其中utf-8占用一到四个字节,utf-16占用二或四个字节,utf-32占用四个字节。Unicode 码在全球范围的信息交换领域均有广泛的应用。

UTF-8

对于单字节的符号,字节的第一位设为0,后面7位为这个符号的 Unicode 码。因此对于英语字母,UTF-8 编码和 ASCII 码是相同的
对于n字节的符号(n > 1),第一个字节的前n位都设为1,第n + 1位设为0,后面字节的前两位一律设为10。剩下的没有提及的二进制位,全部为这个符号的 Unicode 码

二者的转换方式

首先找到该Unicode编号所在的编号范围,进而可以找到与之对应的二进制格式
然后将该Unicode编号转化为二进制数(去掉高位的0)
最后将该二进制数从右向左依次填入二进制格式的X中,如果还有X未填,则设为0

在线工具:https://tool.oschina.net/encode


HTML实体编码

HTML实体编码标记:&#

在线工具:http://ctf.ssleye.com/html_en.html

例题:https://ctf.bugku.com/challenges/detail/id/73.html


四·一些问题的解答

Q:抓完包了无法正常访问网页怎么办?

A:点击设置,选择网络设置里的设置,使用系统代理设置即可(需要抓包的时候再选择手动设置代理)


Q:回去了以后怎么做这些题目?

A:国内有挺多打题的网站的,比较推荐新手的是:

  1. 首页 - Bugku CTF 题目不是很难,比较老,有免费的金币送,但是比较杂乱
  2. ctf.show 题目分类比较清晰,适合新手刷题,但是付费,499,大家量力而行
  3. BUUCTF在线评测 (buuoj.cn)免费得到赛题复现,题目总体偏难,适合入门以后再刷

Q:怎么取一个自己的ID

A:可能有些同学观察到师傅们一般都会有一个ID,在网安这个圈子里大家可能不认得人,但是认得ID。取名方式的话一般是将英文中的一些字母换成数字,比如说:Rindo改为R1nd0。英文可以是自己的英文名,也可以是一个单词,也可以没有意义单纯觉得帅,也可以是自己名字的谐音,不如说名字的后两位是梓盈,那么ID就可以取为7ee_1n,大家其实随意发挥自己喜欢就好


Q:为什么上课那道例题POST传了消息,但是回显的是flag,而不是答案

A:直接在bp上修改POST传参的值确实会有一些问题

比如说,此时传入的是what=flag,但是注意看content-length的长度为13,而事实上我们只传入了9,说明有一些看不见的字符被传入了

所以正确的,post传值的步骤应该如下

  1. 先在hackbar上构造好需要post传入的值,手动代理,打开bp,点击excute,抓包

  2. send to repeater,然后go


文章作者: Cu3tuv0
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Cu3tuv0 !
评论
  目录