Web应用程序

前端组件

HTML

基础结构

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>A Heading</h1>
        <p>A Paragraph</p>
    </body>
</html>

URL编码

浏览器为了正确显示页面内容，必须了解所使用的字符集。例如，在 URL 中，浏览器只能使用ASCII编码，这种编码只允许使用字母数字字符和某些特殊字符。因此，URL 中所有 ASCII 字符集以外的字符都必须进行编码。URL 编码会将不安全的 ASCII 字符替换为一个%符号后跟两个十六进制数字。URL 中不能包含空格，空格会被替换为+（加号）或%20。

Character	Encoding
空格	%20
!	%21
“	%22
#	%23
$	%24
%	%25
&	%26
‘	%27
(	%28
)	%29

完整编码

用法

元素<head>通常包含不直接打印在页面上的元素，例如页面标题，而所有主要页面元素都位于下<body>。其他重要元素包括<style>（包含页面的 CSS 代码）和<script>（包含页面的 JS 代码）。这些元素中的每一个都称为DOM（文档对象模型）

DOM 标准分为 3 个部分：

Core DOM- 适用于所有文档类型的标准模型
XML DOM- XML 文档的标准模型
HTML DOM- HTML 文档的标准模型

CSS(层叠样式表)

用于格式化和设置 HTML 元素的样式

基础结构

body {
  background-color: black;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: helvetica;
  font-size: 10px;
}

CSS 定义花括号内每个 HTML 元素或类的样式{}，其中的属性及其值由其定义（即element { property : value; }）。

JavaScript

通常用于控制前端网页所需的任何功能

基本使用

在页面源代码中，JavaScript代码是用<script>标签加载的

1
2
3

<script type="text/javascript">
..JavaScript code..
</script>

网页还可以使用脚本的链接加载远程JavaScript代码，如下所示：src

1	<script src="./script.js"></script>

网页中的基本使用示例JavaScript如下：

1	document.getElementById("button1").innerHTML = "Changed Text!";

前端漏洞

敏感数据泄露

敏感数据以明文形式暴露给最终用户

HTML注入

未经过滤的用户输入显示在页面上,当用户完全控制其输入的显示方式时，他们可以提交HTML代码，浏览器可能会将其显示为页面的一部分

跨站点脚本（XSS）

类型	描述
`Reflected XSS`	当用户输入经过处理后显示在页面上时发生（例如，搜索结果或错误消息）。
`Stored XSS`	当用户输入存储在后端数据库中并在检索时显示（例如，帖子或评论）时发生。
`DOM XSS`	当用户输入直接显示在浏览器中并写入`HTML`DOM 对象（例如，易受攻击的用户名或页面标题）时发生。

跨站请求伪造（CSRF）

CSRF攻击可能利用XSS漏洞对受害者当前已验证身份的 Web 应用程序执行某些查询和API调用。这将允许攻击者以已验证身份的用户身份执行操作

后端组件

后端服务器包含其他 3 个后端组件：

Web Server
Database
Development Framework

Combinations	Components
LAMP	`Linux`, `Apache`, `MySQL`, and `PHP`.
WAMP	`Windows`, `Apache`, `MySQL`, and `PHP`.
WINS	`Windows`, `IIS`, `.NET`, and `SQL Server`
MAMP	`macOS`, `Apache`, `MySQL`, and `PHP`.
XAMPP	Cross-Platform, `Apache`, `MySQL`, and `PHP/PERL`.

Web服务器

在后端服务器上运行的应用程序，它处理来自客户端浏览器的所有 HTTP 流量，将其路由到请求的页面，并最终响应客户端浏览器。Web 服务器通常在 TCP端口 80或上运行443，负责将最终用户连接到 Web 应用程序的各个部分，并处理他们的各种响应。

一些最常见的HTTP 响应代码：

代码	描述
成功的响应
`200 OK`	请求成功
重定向消息
`301 Moved Permanently`	所请求资源的 URL 已永久更改
`302 Found`	请求资源的 URL 已临时更改
客户端错误响应
`400 Bad Request`	由于语法无效，服务器无法理解请求
`401 Unauthorized`	未经身份验证尝试访问页面
`403 Forbidden`	客户端无权访问内容
`404 Not Found`	服务器找不到请求的资源
`405 Method Not Allowed`	该请求方法已被服务器所知，但已被禁用，无法使用
`408 Request Timeout`	某些服务器会在空闲连接上发送此响应，即使客户端之前没有任何请求
服务器错误响应
`500 Internal Server Error`	服务器遇到了不知道如何处理的情况
`502 Bad Gateway`	服务器在作为网关获取处理请求所需的响应时，收到了无效响应
`504 Gateway Timeout`	服务器作为网关，无法及时得到响应

HTTP 响应代码

数据库

存储与 Web 应用程序相关的各种内容和信息

关系型数据库 (SQL)

关系型(SQL) 数据库将数据存储在表、行和列中。每个表可以具有唯一键，这些键可以将表链接在一起并在表之间创建关系。

为什么称关系？

如图，id我们可以将表中的链接users到user_id表中的posts，以轻松检索每个帖子的用户详细信息，而不必存储每个帖子的所有用户详细信息。

非关系型（NoSQL）

非关系型数据库不使用表、行、列、主键、关系或模式。相反，NoSQL数据库根据所存储数据的类型，使用各种存储模型来存储数据。

数据库有4种常见的存储模型NoSQL：

键值
基于文档
宽列
图形

开发框架和 API

Web API

API（应用程序编程接口）是应用程序内部的一种接口，用于指定应用程序如何与其他应用程序交互。对于 Web 应用程序来说，API 允许远程访问后端组件的功能。API 并非 Web 应用程序独有，它广泛用于各种软件应用程序。Web API 通常通过HTTP协议访问，并通过 Web 服务器进行处理和转换。

SOAP

SOAP（简单对象访问）标准通过共享数据XML，其中请求通过 HTTP 请求发出XML，响应也通过返回XML。前端组件旨在XML正确解析此输出。

SOAP它对于传输结构化数据（例如整个类对象）甚至二进制数据非常有用，并且经常与序列化对象一起使用，所有这些都使得前端和后端组件之间能够共享复杂数据并进行正确的解析。它对于共享状态对象（例如共享/更改网页的当前状态）也非常有用

REST

REST（表述性状态转移）标准通过URL路径共享数据，例如 ‘search/users/1’，并且通常以JSON格式返回输出，例如 ‘userid 1’。

REST API 通常关注于期望通过URL路径直接传递单一类型输入的页面，而无需指定其名称或类型。这通常对于像搜索、排序或过滤这样的查询非常有用。因此，REST API 通常将Web应用功能拆分成更小的API，并利用这些较小的API请求来允许Web应用执行更高级的操作，从而使Web应用更加模块化和可扩展。

对REST API请求的响应通常采用JSON格式，前端组件随后被开发来处理这种响应并正确地渲染它。REST的其他输出格式包括XML、x-www-form-urlencoded，甚至是原始数据。

后端漏洞

常见的 Web 漏洞

OWASP 十大应用程序漏洞

公共漏洞

最严重的后端组件漏洞是指那些可以从外部攻击，并可利用这些漏洞控制后端服务器而无需本地访问该服务器（即外部渗透测试）的漏洞（公共 CVE）

CVSS 分数基于一个使用多个指标的公式：Base、Temporal和Environmental。在使用 CVSS 计算漏洞的严重性时，这些Base指标会产生一个从 0 到 10 的分数，并通过应用Temporal和Environmental指标进行修改

CVSS 评分等级在 V2 和 V3 之间略有不同，如下表所示：

CVSS V2.0 评级
严重程度	基本分数范围
低的	0.0-3.9
中等的	4.0-6.9
高的	7.0-10.0

CVSS V3.0 评级
严重程度	基本分数范围
没有任何	0.0
低的	0.1-3.9
中等的	4.0-6.9
高的	7.0-8.9
批判的	9.0-10.0