THM学习笔记—网站如何运作

最新推荐文章于 2024-09-19 16:10:53 发布

jiangyu0_0

最新推荐文章于 2024-09-19 16:10:53 发布

阅读量887

点赞数 22

文章标签：学习笔记网络 html5 前端

本文链接：https://blog.csdn.net/jiangyu0_0/article/details/135599821

版权

本文讲述了网站开发的基本原理，包括前端的HTML构建页面结构，CSS负责样式，JavaScript实现交互。同时强调了敏感数据暴露和HTML注入的风险，以及输入消毒在防止恶意攻击中的重要性。

摘要由CSDN通过智能技术生成

当你访问网站时，你的浏览器向网络服务器发出请求，请求有关你正在访问的页面的信息。服务器将用数据响应，你的浏览器使用该数据来显示页面；网络服务器只是世界其他地方的一台专用计算机，负责处理你的请求。

一个网站由两个主要组件构成：

前端（客户端） - 你的浏览器呈现网站的方式。
后端（服务器端） - 处理你的请求并返回响应的服务器。

HTML

网站主要使用以下语言创建：

HTML，用于构建网站并定义其结构
CSS，通过添加样式选项使网站看起来漂亮
JavaScript，使用交互性在页面上实现复杂功能

HTML（超文本标记语言）是编写网站的语言。元素（也称为标签）是HTML页面的构建块，告诉浏览器如何显示内容。下面的代码片段显示了一个简单的HTML文档，其结构对于每个网站都相同：

HTML结构（如截图所示）包括以下组件：

<!DOCTYPE html> 定义页面是HTML5文档。这有助于在不同浏览器之间实现标准化，并告诉浏览器使用HTML5解释页面。
<html> 元素是HTML页面的根元素，所有其他元素都在此元素之后。
<head> 元素包含有关页面的信息（例如页面标题）。
<body> 元素定义HTML文档的主体；只有主体内的内容才会在浏览器中显示。
<h1> 元素定义大标题。
<p> 元素定义段落。
还有许多其他用于不同目的的元素（标签）。例如，有用于按钮（<button>）、图像（<img>）、列表等的标签。

标签可以包含属性，例如class属性，用于样式化元素（例如将标签设为不同的颜色）

<p class="bold-text">，或者src属性，用于在图像上指定图像的位置：

<img src="img/cat.jpg">。一个元素可以有多个属性，每个属性都有其独特的目的，例如

<p attribute1="value1" attribute2="value2">。

元素还可以有一个id属性（<p id="example">），该属性对于元素是唯一的。与class属性不同，其中多个元素可以使用相同的class，一个元素必须具有不同的id以唯一标识它们。元素id用于样式化和通过JavaScript标识它。

JavaScript

JavaScript（JS）是世界上最流行的编程语言之一，使页面变得交互式。HTML用于创建网站的结构和内容，而JavaScript用于控制网页的功能 - 没有JavaScript，页面将没有交互元素，而且始终是静态的。JS可以实时动态更新页面，提供功能以在页面上的特定事件发生时更改按钮样式，例如当用户点击按钮时，或者显示动画。

JavaScript添加到页面源代码中，可以在 <script> 标签内加载，也可以通过src属性远程包含：<script src="/location/of/javascript_file.js"></script>

以下JavaScript代码查找页面上具有id为"demo"的HTML元素，并将该元素的内容更改为"Hack the Planet"：document.getElementById("demo").innerHTML = "Hack the Planet";

HTML元素还可以有事件，例如"onclick"或"onhover"，在事件发生时执行JavaScript。以下代码将具有demo ID的元素的文本更改为"Button Clicked"：

<button onclick='document.getElementById("demo").innerHTML = "Button Clicked";'>Click Me!</button> - onclick事件也可以在JavaScript脚本标签内定义，而不是直接在元素上定义。

敏感数据暴露

敏感数据暴露发生在网站未正确保护（或删除）向最终用户显示的敏感明文信息的情况下；通常在网站的前端源代码中发现。

我们现在知道网站使用许多HTML元素（标签）构建，我们可以通过"查看页面源代码"简单看到这些元素。网站开发人员可能忘记删除登录凭据，隐藏链接到网站私有部分的链接或在HTML或JavaScript中显示其他敏感数据。

潜在地，敏感信息可以被利用以进一步攻击者在Web应用程序的不同部分中的访问。例如，可能存在带有临时登录凭据的HTML注释，如果查看页面源代码并找到这些信息，您可以使用这些凭据登录到应用程序的其他地方（或更糟糕的是，用于访问站点的其他后端组件）。

在评估Web应用程序的安全问题时，首先要做的一件事是查看页面源代码，看看是否能找到任何暴露的登录凭据或隐藏的链接。

HTML注入

HTML注入是一种当未经过滤的用户输入显示在页面上时发生的漏洞。如果网站未对用户输入进行消毒（过滤用户在网站中输入的任何“恶意”文本），并且该输入用于页面上，攻击者可以将HTML代码注入到易受攻击的网站中。

输入消毒在保持网站安全方面非常重要，因为用户在网站中输入的信息通常用于其他前端和后端功能。您将在另一个实验中探讨的一个漏洞是数据库注入，在该漏洞中，您可以通过控制直接用于查询的输入，操纵数据库查找查询，以便以另一个用户身份登录 - 但现在，让我们专注于HTML注入（这是客户端的）。

当用户控制其输入如何显示时，他们可以提交HTML（或JavaScript）代码，浏览器将其用于页面，使用户能够控制页面的外观和功能。

上图显示了一个表单将文本输出到页面的方式。用户输入到“What's your name”字段的任何内容都会传递给JavaScript函数并输出到页面，这意味着如果用户在字段中添加了自己的HTML或JavaScript，它将在sayHi函数中使用，并添加到页面上 - 这意味着您可以添加您自己的HTML（例如 <h1> 标签），并且它将将您的输入作为纯HTML输出。

总的来说，绝对不要信任用户输入。为防止恶意输入，网站开发人员应在将其用于JavaScript函数之前对用户输入进行消毒；在这种情况下，开发人员可以删除任何HTML标记。