03web技术讲解

简介: 03web技术讲解

一、Web 工作机制

为什么学习这节课 我们学习渗透测试这门课程,主要针对的 Web 应用,所以对 Web 架构需要一定的了解


1.1 网页、网站


我么可通过浏览器上网看到精美的页面,一般都是经过浏览器渲染的.html 页面,其中包含 css 等前端技术。多个网页的集合就是网站。


1.2Web 容器


Web 容器,也叫 Web 服务器,主要提供 Web 服务,也就是常说的 HTTP 服务。 常见的 Web 容器有:Apache/IIS/Nginx 等。


1.3 静态页面


静态页面,都是些.html 文件,是纯文本文件。这些文件中包含 html 代码。 HTML(HyperText Markup Language,超文本标记语言),在浏览器中解释运行。


1.4 中间件服务器


以上这种,只能单向给用户战术信息。随着 Web 的发展,信息要双向流动,产生了交互的 需求,也就是动态网页的概念;所谓动态就是利用 flash、Php、asp、Java 等技术在网页中 嵌入一些可以运行的脚本,用户浏览器在解释页面时,遇到脚本就启动运行它。 脚本的使用让 Web 服务模式有了双向交流的能力,Web 服务器模式也可以像传统的软件 一样进行各种事务的处理,如编辑文件、利息计算、提交表单等,Web 架构的适用面大大 扩展。 这些脚本可以嵌入到页面中,如 JS 等。也可以以文件的形式单独存放在 Web 服务器的目 录里,如.asp、.php、jsp 文件等。这样功能性的脚本越来越多,形成常用的工具包,单独管 理,Web 业务开发时,直接使用就可以了,这就是中间件服务器,它实际上时 Web 服务器 处理能力的扩展。 weblogic、jboss


1.5 数据库的出现


静态网页与脚本都是事先设计好的,一般不经常改动,但网站上的很多内容需要经常更新, 将这些变动的数据放在静态网页的程序中显然不合适,传统的办法是数据与程序分离,采用 的专业的数据库。


Web 开发者在 Web 服务器后边增加了一个数据库服务器,这些经常变动的数据被存进数 据库,可以随时更新。当用户请求页面时,脚本根据用户请求的页面,涉及到动态数据的地 方,利用 SQL 数据库语言,从数据中读取最新的数据,生产“完整”页面,最后送给用户。


二、HTTP 协议概述

HTTP(HyperText Transfer Protocol),超文本传输协议,是传递消息的规范和要求。

2.1 概述

1990 年提出的,当前版本 1.1。

HTTP 是用来将 html 文档从 Web 服务器传输到 Web 浏览器。

是一个请求和响应的协议。客户端发出请求,服务器端对请求给出回应。 HTTP 使用可靠的 TCP 连接,默认端口 80


2.2 特点

支持浏览器/服务器模式

简单快速:浏览器向服务器提出请求时,只需要传送请求方法和请求路径

灵活:HTTP 运行传输任意类型的数据对象

.html 纯文本

.jpg 图片

.mp3 音频

HTTP 协议是无状态的协议


2.3URL

统一资源定位符(网址),用来告诉 Web 容器,浏览器所请求的资源(文件)的路径。

例如:http://localhost/test/requests.php?id=32 Schema://login:password@adress:port/path/to/resource/?query_string#fragment

Port 80

Login 用户名

Password 密码 匿名访问时,默认没有用户名和密码

Fragment 锚点 实现页面内定位

url 编码 URL 只允许出现的字符是有限制的,URL 中 path 开始允许直接出现[A-Z][a-z][0-9],半角

减号(-)、下划线句点(.)、波浪号(~)。

其他字符均会被百分号编码(包括空格)

例如:

%23

空格 %20

原理:%+ASCII 码十六进制形式

在进行编程的时候,会[+] 代替空格。

注意:不要对中文进行 url 编码

报文分析工具

1、F12

2、wireshark

3、fiddler

4、Burp suite


三、HTTP 报文分析

Web 应用的所有通信的消息都要遵守 HTTP 协议的规范和要求。


3.1REQUEST

请求报文,如下

GET /php/test/get.php HTTP/1.1

Host: 192.168.1.136

User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:75.0) Gecko/20100101

Firefox/75.0

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8

Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2

Accept-Encoding: gzip, deflate

Referer: http://192.168.1.136/php/test/

Connection: close

Upgrade-Insecure-Requests: 1

Cache-Control: max-age=0

HTTP 请求由请求行、请求头、请求正文三部分组成

1、请求行:方法,资源路径,协议/版本

方法:GET

资源路径:/php/test/get.php

协议/版本:HTTP/1.1

2、请求头

从请求报文第二行开始到第一个空行为止的内容。其中包含很多字段

3、请求正文

以上方法没有请求正文,后面会看到


3.2 请求方法


GET

最常用的方法,通常用户请求服务器发送的某个资源。

POST

可以向服务器提交参数以及表单,包括文件流等

HEAD

与 GET 方法类似,但在服务器响应中只返回首部

PUT

与 GET 从服务器读取文档相反,PUT 方法会向服务器写入文档

TRACE

回显浏览器的请求

OPTIONS

请求 Web 服务器告知其支持的各种功能

DELETE

请求服务器删除请求 URL 所指定的资源


3.3 实验


1、使用 telnet 模式浏览器发送 HTTP 请求

Telnet 192.168.1.136 80

GET /php/test/get.php HTTP/1.1

Host: 192.168.1.136

注意:进入 telnet 后,按 ctrl+]键,开启 telnet 的回显,然后按回车键

Telnet www.baidu.com 80

GET / HTTP/1.1

Host: www.baidu.com

2、利用 telnet 传送 GET 参数

GET /php/test/get.php?name=AJEST&pwd=123456 HTTP/1.1

Host:192.168.1.136

3、利用 telnet 模拟 POST,请求传递参数

POST /php/test/post.php?http://192.168.1.136/php/test/post.php HTTP/1.1

Host: 192.168.1.136

a9a4e7b0a9f04099be73c429349ae123.png


Content-Type: application/x-www-form-urlencoded

Content-Length: 19

name=GGG&pwd=123456

a7848e9dc9e14d5b895a70fc985ffd46.png


4、利用 OPTIONS 方法测试 Web 服务器允许的 HTTP 请求

OPTIONS / HTTP/1.1

Host: 192.168.1.136

get.php

<?php str=$_GET; var_dump($str); $ ?>

post.php

<?php str=$_POST; var_dump($str); ?>

3.4 主要字段


Host

主要用于指定被请求资源的 Internet 主机和端口号

User-Agent

浏览器指纹

Referer

包含一个 URL,代表当前的 URL 的上一个 URL

Cookie

记录请求者的身份认证信息

Accept-Charset

用户指定客户端接受的字符集

Content-Type

用于向接收方指示实体的介质类型(数据类型)

Content-Length

用于指明实体正文的长度,以字节的方式存储的十进制数字来表示

Last-Modified

用于指示资源的最后修改时间和日期


3.5RESPONSE


响应报文如下:

HTTP/1.1 200 OK

Date: Sat, 25 Apr 2020 09:50:59 GMT

Server: Apache/2.4.23 (Win32) OpenSSL/1.0.2j PHP/5.4.45

X-Powered-By: PHP/5.4.45

Content-Length: 13

Connection: close

Content-Type: text/html

array(0) {

}

响应报文由状态行(响应行)、响应头、响应正文三部分组成。


1、状态行:协议/版本,状态代码,描述短语

协议/版本:HTTP/1.1

状态代码:200

描述短语:OK

2、响应报头

第二行开始到第一个空行为止的所有内容,其中包含了关于 HTTP 响应的重要字段。

3、响应正文

服务器返回资源的内容,即浏览器接收到的 HTML 代码。


状态码

100~199

信息性状态码

200~299

成功状态码

300~399

重定向状态码

400~499

客户端错误状态码

500~599

服务器错误状态码


主要字段

Server

服务器指纹

Set-Cookie

向浏览器端设置 Cookie

Last-Modified

服务器通过这个头信息告诉浏览器,资源的最后修改时间

Content-Length

请求正文长度

Location

重定向目标页面

Refresh

服务器通过 Refresh 头告诉浏览器定时刷新浏览器


四、同源策略

同源策略是禁止 javascript 进行跨域访问的安全策略。它也是浏览器沙盒环境所提供的一项

制约。浏览器可以同时处理多个网站的内容,其典型方法为使用标签或 iframe 等。


4.1 同源策略的条件

URL 的主机(FQDN:Fully Qualified Domain Name 全程域名)一致

Schema 一致

端口号一致

同源策略的保护对象不仅仅时 iframe 内文档。比如实现 Ajax 时所使用的 XMLHttpRequest

对象能够访问的 URL 也受到了同源策略的限制。


4.2 同源策略探究

准备两个页面

index.html

iframe name=“iframe1” width=“300”

height="80"src=http://192.168.1.136/sop/iframe.html>

<input type=“button” οnclick=“go()” value=" 密码: ">

iframe.html

iframe 的内层

密码

这里我们使用我们服务器的浏览器测试这个实验(因为我们要使用不同的两个 URL 来访问

我们的网页)

我们用指定的 IP 访问,可以正常读取

493e2ab2fae545b3b693edee9ebdb6d9.png


但是当我们使用我们本机的回环地址去访问时,打开页面,无法读取(这就是由同源策略限


制,无法访问内层 iframe)

4ee63dc6e36241fbaeea267c928f5354.png

目录
相关文章
|
1月前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
2月前
|
前端开发 数据库 UED
构建高性能Web应用的关键技术
本文将介绍构建高性能Web应用的关键技术,包括前端优化、后端优化、数据库优化等方面。通过深入讨论各项技术的原理和实践方法,帮助开发者们提升Web应用的响应速度和用户体验。
|
4天前
|
前端开发 搜索推荐 安全
AJAX和CSR(客户端渲染)是Web开发中常用的两种技术
【5月更文挑战第8天】AJAX提升用户体验,减轻服务器压力,但对搜索引擎不友好且增加开发复杂度,易引发安全问题。CSR提供快速响应和交互性,改善用户体验,但首屏加载慢,搜索引擎支持不足,同样面临安全挑战。两者各有适用场景,需按项目需求选择。
10 0
|
10天前
|
存储 前端开发 安全
13:会话跟踪技术Session的深度应用与实践-Java Web
13:会话跟踪技术Session的深度应用与实践-Java Web
25 3
|
10天前
|
存储 前端开发 搜索推荐
12:会话跟踪技术Cookie的深度应用与实践-Java Web
12:会话跟踪技术Cookie的深度应用与实践-Java Web
23 4
|
12天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
12天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
12天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
12天前
|
开发框架 JavaScript 前端开发
【JavaScript 与 TypeScript 技术专栏】TypeScript 在 Web 开发中的前沿应用
【4月更文挑战第30天】TypeScript在Web开发中日益重要,以其强大的类型系统提升代码质量,支持组件化开发,与React、Vue、Angular等框架良好集成。在大型项目管理中,TypeScript助于代码组织和优化,提高团队协作效率。此外,它提升开发体验,提供智能提示和错误检测。众多成功案例证明其前沿应用,未来将在Web开发领域持续发挥关键作用。
|
12天前
|
移动开发 JavaScript 前端开发
【JavaScript技术专栏】Web Worker在JavaScript中的应用
【4月更文挑战第30天】HTML5的Web Worker API解决了JavaScript单线程性能瓶颈问题,允许在后台线程运行JS代码。本文介绍了Web Worker的基本概念、类型、用法和应用场景,如复杂计算、图像处理和数据同步。通过实例展示了搜索建议、游戏开发和实时数据分析等应用,并提醒注意其无法直接访问DOM、需消息传递通信以及移动端资源管理。Web Worker为前端开发提供了多线程能力,提升了Web应用性能和用户体验。