网站工作原理

当你访问网站时，你的浏览器（如Safari或Google Chrome）会向网络服务器发送请求，询问你想要的页面信息。服务器是位于其他地方的计算机，它处理你的请求并回复浏览器用于显示页面的数据。

网站的两个主要组成部分

前端（客户端） - 页面在浏览器中的外观和渲染方式。包括：

HTML：页面结构
CSS：样式和布局
JavaScript：交互性

后端（服务器端） - 接收你的请求、处理请求并返回数据的服务器。这可能涉及：

存储用户数据或内容的数据库
处理请求的业务逻辑
生成要在浏览器中显示的数据

输入URL时会发生什么？

你在浏览器中输入网站地址
浏览器向托管网站的服务器发送请求
服务器处理请求并返回必要的数据（通常是HTML/CSS/JS）
浏览器读取并为你渲染页面

HTML：网页的语言

超文本标记语言（HTML）是编写网站的语言。元素（也称为标签）是HTML页面的构建块，告诉浏览器如何显示内容。

以下代码片段显示了一个简单的HTML文档，其结构对每个网站都是相同的：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!DOCTYPE html>
<html>
  <head>
    <title>示例页面</title>
  </head>
  <body>
    <h1>欢迎访问我的网站</h1>
    <p>这是一个简单的段落。</p>
  </body>
</html>

HTML结构：主要组件

<!DOCTYPE html> 定义页面是HTML5文档
<html> 元素是HTML页面的根元素
<head> 元素包含有关页面的信息（如页面标题）
<body> 元素定义HTML文档的主体
<h1> 元素定义大标题
<p> 元素定义段落

其他常见HTML元素

各种内容的标签：

<button> 用于可点击按钮
<img> 用于图像
列表（例如<ul>、<ol>、<li>）

标签可以具有属性来自定义行为或样式，例如：

class属性应用CSS样式：<p class="bold-text">
src属性指定图像位置：<img src="img/cat.jpg">

ID与类

id属性（例如<p id="example">）对于元素是唯一的
class属性可以由多个元素共享（<p class="bold-text">）

JavaScript

JavaScript是世界上最流行的编码语言之一，它使页面具有交互性。

HTML构建页面的结构和内容
JavaScript控制网页的功能和交互性
没有JS，页面将是静态的

如何将JavaScript添加到页面

你可以使用<script>标签将JS代码直接放在页面中，或者包含外部文件并使用src属性加载它：

1

<script src="/location/of/javascript_file.js"></script>

简单示例：更新内容

以下代码找到具有id"demo"的HTML元素并将其内容更改为"Hack the Planet"：

1

document.getElementById("demo").innerHTML = "Hack the Planet";

事件交互性

HTML元素可以具有onclick或onhover等事件，当事件发生时运行JavaScript。

示例：单击按钮时更改文本

1
2
3


<button onclick='document.getElementById("demo").innerHTML = "Button Clicked";'>
点击我！
</button>

敏感数据暴露

描述：当网站未保护最终用户的明文敏感信息时发生，通常在前端代码中找到。

为什么会发生

网站由HTML、JavaScript和CSS构建，用户可以通过"查看页面源代码"或开发者工具查看此代码。

开发人员可能在以下位置留下暴露的敏感数据：

包含临时凭据的HTML注释
指向应用程序私有部分的隐藏链接
包含敏感数据的JavaScript变量
嵌入代码中的API密钥或密码

潜在示例

带有临时登录凭据的HTML注释
导致管理或敏感区域的隐藏链接
存储在内联JavaScript中的API密钥或密码
嵌入代码中可能授予后端访问权限的凭据

对安全的影响

攻击者可以使用暴露的数据访问应用程序的部分或其他敏感信息。

测试简单清单

打开页面并使用"查看页面源代码"或开发者工具
查找：
- 包含密码或临时凭据的HTML注释
- 直接存储在JavaScript中的值
- 隐藏链接或未受保护路径到敏感区域
- 内联JavaScript或源文件中的API密钥或密钥

防护措施

确保敏感数据与客户端分离，仅在服务器端处理。

发布前从源代码中删除任何敏感数据。实践包括：

在服务器上使用环境变量
不要包含在交付给浏览器的JavaScript文件中的密钥
根据需要加密或安全存储敏感数据

HTML注入

描述：当未过滤的用户输入显示在页面上时发生HTML注入。如果网站未能清理用户输入，则该输入可用于将HTML或JavaScript注入易受攻击的站点。

摘要：用户控制页面上显示的内容，因此他们可以将HTML或JavaScript标签注入输入字段。

为什么会发生这种情况

网站接受用户输入并在前端显示它。

如果输入未清除HTML或JavaScript，它们将在页面上按原样呈现。

简单示例说明问题

1
2
3
4
5
6


<input type="text" id="name" />
<div id="greeting"></div>
<script>
  const name = document.getElementById('name').value;
  document.getElementById('greeting').innerHTML = "Hello, " + name;
</script>

如果用户输入：<h1>Hacked!</h1>，它将在页面上呈现为实际的HTML而不是纯文本。

如何防止HTML注入

输入清理：在显示用户输入之前从中删除HTML标签或脚本内容
输出编码：将特殊字符转换为安全实体，例如：
- < -> <
- > -> >
- & -> &
避免使用innerHTML：使用安全方法插入内容，例如：
- 仅使用textContent或createTextNode设置文本
- 在不注入原始HTML的情况下操作DOM
输入限制：强制执行允许的输入（字符、长度、模式等）
禁用可执行内容：当需要呈现HTML时，使用受信任的清理库并确保严格策略

深入理解Web工作原理：前端技术、安全漏洞与防护实践

本文详细解析网站工作原理，涵盖前端技术栈(HTML/CSS/JavaScript)，探讨敏感数据泄露、HTML注入等安全漏洞成因与防护措施，通过实际代码示例展示网络安全最佳实践。