tryhackme-Pre Security-How Websites Work（网站如何运作）

没有名字的小羊

已于 2024-12-19 13:13:27 修改

阅读量709

点赞数 8

分类专栏： tryhackme 文章标签：计算机网络安全 web安全网络

于 2024-12-19 08:15:00 首次发布

本文链接：https://blog.csdn.net/2301_79096184/article/details/144544703

版权

tryhackme 专栏收录该内容

59 篇文章

订阅专栏

任务一：How websites work（网站如何运作）

当您访问某个网站时，您的浏览器（如 Safari 或 Google Chrome）会向 Web 服务器发出请求，询问有关您正在访问的页面的信息。它将使用您的浏览器用于向您展示页面的数据进行响应;Web 服务器只是世界上其他地方处理您的请求的专用计算机。

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

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

浏览器向 Web 服务器发出请求还涉及许多其他过程，但现在，您只需要了解您向服务器发出请求，它会使用浏览器用来向您呈现信息的数据进行响应。

任务二：HTML（[HTML全文]）

网站主要使用以下方法创建：

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

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

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

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

标签可以包含属性，例如可用于设置元素样式的 class 属性（例如，使标签具有不同的颜色），或用于图像以指定图像位置的 src 属性：一个元素可以具有多个属性，每个属性都有其独特的用途，例如，<p attribute1=“value1” attribute2=“value2”>。<p class="bold-text"><img src="img/cat.jpg">.

元素还可以具有 id 属性（），该属性对于元素是唯一的。与 class 属性不同，多个元素可以使用同一个类，元素必须具有不同的 ID 才能唯一地标识它们。元素 ID 用于设置样式并通过 JavaScript 标识它。<p id="example">

您可以通过右键单击并选择“查看页面源代码”（Chrome）/“显示页面源代码”（Safari）来查看任何网站的 HTML。

任务三：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。以下代码将具有演示 ID 的元素的文本更改为 Button Clicked：- onclick 事件也可以在 JavaScript 脚本标记内定义，而不是直接在元素上定义。<button onclick='document.getElementById("demo").innerHTML = "Button Clicked";'>Click Me!</button>

任务四：Sensitive Data Exposure（敏感数据泄露）

当网站没有正确保护（或删除）对最终用户的敏感明文信息时，就会发生敏感数据泄露;通常位于站点的前端源代码中。

我们现在知道网站是使用许多 HTML 元素（标签）构建的，我们只需 “查看页面源” 即可看到所有这些元素。网站开发人员可能忘记删除登录凭据、指向网站私人部分的隐藏链接或 HTML 或 JavaScript 中显示的其他敏感数据。

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

每当评估 Web 应用程序是否存在安全问题时，您应该做的第一件事就是查看页面源代码，看看是否可以找到任何暴露的登录凭证或隐藏的链接。

testpasswd

任务五：HTML Injection（敏感数据泄露）

HTML 注入是页面上显示未经筛选的用户输入时发生的漏洞。如果网站未能清理用户输入（过滤用户输入网站的任何“恶意”文本），并且该输入被用于页面，则攻击者可以将 HTML 代码注入易受攻击的网站。

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

当用户可以控制其输入的显示方式时，他们可以提交 HTML（或 JavaScript）代码，浏览器将在页面上使用它，从而允许用户控制页面的外观和功能。

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

一般规则是永远不要相信用户输入。为防止恶意输入，网站开发人员应在 JavaScript 函数中使用用户输入的所有内容之前对其进行清理;在这种情况下，开发人员可以删除任何 HTML 标记。