2.Web安全——HTML基础

一、什么是HTML？

HTML（HyperText Markup Language）即超文本标记语言，是一种用于创建网页的标准标记语言。

二、为什么要学习HTML基础？

1.理解网页结构（便于漏洞挖掘）

页面元素布局 ：HTML 定义了网页的基本结构，包括文本、图像、链接、表单等元素的布局。例如，了解到<form>标签用于创建表单，表单中可能包含用户输入的敏感信息，如用户名、密码等。攻击者就可以重点关注表单相关的部分，寻找可能存在的安全漏洞，像 SQL 注入漏洞（如果表单数据被不恰当的处理并用于数据库查询）或者跨站脚本攻击（XSS）漏洞。
资源引用方式 ：通过 HTML 标签（如<script>用于引入脚本，<img>用于引入图像等）可以了解网页资源的引用情况。例如，知道<script>标签是如何从外部引入 JavaScript 文件，攻击者可能会尝试篡改脚本文件的来源路径，替换为恶意脚本，或者利用脚本加载过程中的漏洞进行攻击。如果没有 HTML 基础，很难理解这些资源是如何在网页中整合的，也就难以发现其中可能存在的安全隐患。

2.识别攻击面（发现潜在安全风险）

用户输入点 ：HTML 中有许多可以接收用户输入的地方，这些地方往往是安全风险的高发区域。比如<input>标签用于创建文本输入框、密码输入框等，攻击者可以尝试在这些输入框中输入恶意代码。对于 Web 安全人员来说，熟悉 HTML 就能快速定位这些用户输入点，进而检查是否对用户输入进行了恰当的过滤和验证。
动态内容渲染：当网页包含动态内容时，例如通过 JavaScript 动态生成 HTML 或者使用服务器端脚本语言（如 PHP）将数据嵌入 HTML，了解 HTML 结构有助于发现动态内容可能导致的安全问题。例如，在一个新闻网站中，文章内容可能是从数据库中读取并动态生成 HTML 页面进行展示。如果在这个过程中没有对内容进行合适的编码，就可能会出现 XSS 漏洞，攻击者可以利用这个漏洞在用户浏览器中执行恶意脚本。

3.分析攻击向量（理解攻击原理）

跨站脚本攻击（XSS） ：
- XSS 是一种常见的 Web 安全漏洞，攻击者通过在目标网站中注入恶意脚本（通常是 JavaScript）来获取用户的敏感信息或者执行其他恶意操作。熟悉 HTML 是理解 XSS 攻击的关键。例如，攻击者可能会将恶意脚本注入到一个评论区（通常是通过<textarea>或标签接收评论内容），如果网站没有对用户输入的评论进行正确的过滤和转义，当其他用户访问包含该评论的页面时，浏览器会将恶意脚本当作正常的 HTML 和 JavaScript 代码进行执行。
- 攻击者还可能利用 HTML 标签的属性进行 XSS 攻击。比如，在一个包含链接的<a>标签中，通过修改href属性的值来执行恶意脚本，像
```
<a href="javascript:alert('恶意脚本')">点击这里</a>
```
跨站请求伪造（CSRF） ：
- 了解 HTML 中的表单（<form>标签）和链接（<a>标签）的工作原理对于理解 CSRF 攻击非常重要。在 CSRF 攻击中，攻击者会构造一个恶意的请求，诱使受害者在已经登录目标网站的情况下，在不知情的情况下发送这个请求。例如，攻击者可以通过构造一个看似正常的 HTML 表单（可能隐藏在一个恶意网页中），并设置表单的action属性指向目标网站的某个敏感操作（如修改密码），当受害者访问这个恶意网页时，浏览器会自动提交表单，触发目标网站的敏感操作。

4.协助安全防御（进行有效防护）

输入验证与输出编码 ：知道 HTML 结构可以更好地进行输入验证和输出编码。例如，当从用户输入中提取数据用于生成 HTML 页面时，了解 HTML 标签和特殊字符（如<、>、&等）的作用，可以对用户输入进行合适的转义处理，防止 XSS 攻击。对于表单输入，根据 HTML 标签的类型（如文本输入、文件输入等）可以确定合理的验证规则，比如限制输入的长度、格式等，防止 SQL 注入等攻击。
安全策略配置：在配置内容安全策略（CSP）等安全机制时，HTML 知识不可或缺。CSP 是一种通过指定允许的内容来源来防止 XSS 等攻击的策略。熟悉 HTML 能够准确地定义哪些脚本、样式和其他资源是合法的，从而有效地配置 CSP，限制恶意脚本的加载和执行。

三、需要利用哪些工具？

Visual Studio Code（VS Code）

功能特点：它是一款轻量级但功能强大的跨平台文本编辑器。支持多种编程语言，对于 HTML 开发，它提供了语法高亮功能，能使 HTML 标签、属性和内容以不同颜色显示，方便开发者快速区分不同的元素。

可以到官网进行安装，在此小编也准备了百度网盘资源供大家下载。

VS Code官网：VS Code官网下载链接

百度网盘资源：VSCode下载链接

WebStorm

智能代码辅助 ：WebStorm 是一款功能全面的专业 IDE，专为 Web 开发设计。在 HTML 开发方面，它提供了深度的代码智能感知功能，不仅能够自动补全 HTML 标签和属性，还能理解标签之间的语义关系。例如，当在<a>标签内部输入文本时，它会提示可以使用的相关属性，如target属性用于指定链接打开的方式。它还能够检查代码中的错误和潜在风险，如发现未闭合的标签、属性值格式错误等，并给出明确的错误提示和修复建议。

WebStorm官网：IDE官网

该软件为收费软件，可以免费使用30天

四、HTML基础

1.简单的HTML结构

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

以上为HTML的基本结构，在VSCode中输入英文的"!"并按下回车键即可自动生成HTML基本框架
第四行的charset为编码设置，常见的编码有ANSI编码、Unicode编码。

2.HTML常见标签

设置网站关键字

html 复制代码

<meta name="keywords" content="网络安全，WEB渗透，渗透测试" >

html 复制代码

<link rel="stylesheet" href="./style.css">

html 复制代码

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

注释在页面中不会展示出来，方便后期维护和更改代码

html 复制代码

<script src="./script.js"></script> 
<!--引用script文件-->

<p>这是一段普通的段落。</p>p标签，单独占用一行内包含的文字会显示在页面中

html 复制代码

<p>这是一段文字</p>

3.标题标签

标题标签由大到小<h1~6></h对应数字>最多只有1~6个

html 复制代码

     <h1>一级标题</h1>
     <h2>二级标题</h2>
     <h3>三级标题</h3>
     <h4>四级标题</h4>
     <h5>五级标题</h5>
     <h6>六级标题</h6>

<br>是换行标题，加上<br>后段文字会跳到下一行

html 复制代码

<div>
   <div>第一行</div>
   <br>
   <div>第二行</div>
</div>

<hr>是换行线标题，会在下一行插入一条换行线

html 复制代码

<div>
   <div>第一行</div>
   <hr>
   <div>第二行</div>
</div>

4.文本属性

<b></b>加粗

<i></i>斜体

<u></u> 下划线

<sup></sup>上标

<sub></sub>下标

<del></del> 删除线

<pre></pre>代码样式原样输出

<font></font> 规定字体属性

size 字体的大小

color 字体颜色

5.form表单

form表单规定当提交表单时向何处发送表单数据

method 提交的方法有 get、post

规定在发送表单数据之前如何对其进行编码。

enctype 属性可能的值

application/x-www-form-urlencoded

multipart/form-data

text/plain

input标签

name：同样是表示的该文本输入框名称。

size：输入框的长度大小。

maxlength：输入框中允许输入字符的最大数。

value：输入框中的默认值

readonly：表示该框中只能显示，不能添加修改。

input的类型

type=password 密码输入框

type=file 文件上传

type=hidden 隐藏域

button 按钮

checkbox 复选框

radio 单选框

type=submit 提交按钮

type=reset 重置按钮

6.a标签、img标签、table标签

a标签的作用：就是用于控制界面与页面之间的跳转

默认就是self

self：用于在当前选项卡中跳转，也就是不新建页面跳转

_blank ：用于在新的选项卡中跳转，也就是新建页面跳转

_blank 在新窗口中打开被链接文档。

_self 默认。在相同的框架中打开被链接文档。

_parent 在父框架集中打开被链接文档。

_top 在整个窗口中打开被链接文档。

7.锚文本

8.img 标签

img 元素向网页中嵌入一幅图像。

alt 规定图像的替代文本。

src 规定显示图像的url

width 规定图片的高度

height 规定图片的宽度

9.table 表格

<caption>我的标题</caption>表格带标题

border 边框

width 宽度

height 高度

colspan 行

rowspan 竖

cellpadding 单元边与内容的空白

cellspacing 单元格的空白

10.列表标签

<ul>

</ul>

11.无序列表

项目符号 square circle disc

<ul>

</ul>

五、总结

介绍了什么是HTML和为什么要学习HTML基础，简单的讲解了常见的HTML的语法，可以尝试练习制作一些简单的网页，下篇文章将讲解的是HTML中的CSS和div的用法，可以订阅我的专栏，一起学习网络安全技术。