【TryHackMe翻译】How Websites Work(网站是如何工作的?)_tryhackme session management翻译-优快云博客

网站是如何工作的

在本学习模块结束时，你将了解网站是如何创建的，并会接触到一些基本的安全问题。

当你访问一个网站时，你的浏览器（如 Safari 或 Google Chrome）会向web服务器发送请求，询问你正在访问的页面的信息。服务器会返回数据，你的浏览器使用这些数据来显示页面；web服务器其实就是位于世界某处的专用计算机，用于处理你的请求。
在这里插入图片描述
网站主要由两个部分组成：

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

当你的浏览器向网络服务器发送请求时，还涉及许多其他过程，但现在你只需要明白：你向服务器发送请求，服务器会返回数据，你的浏览器使用这些数据来向你呈现信息。

问答时间：

哪个术语最能描述由你的浏览器渲染的 Web 应用程序组件？Front End

HTML

网站主要是通过以下技术创建的：

1. HTML - 用于构建网站并定义其结构。

2. CSS - 通过添加样式选项使网站看起来更美观。

3. 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 识别它。

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

问答时间
让我们来玩一些 HTML 吧！首先点击此任务中的“查看网站”按钮。在右侧，你应该会看到一个渲染 HTML 的框——如果你在框中输入一些 HTML 并点击绿色的“渲染 HTML 代码”按钮，它将在页面上渲染你的 HTML；你应该会看到一些猫咪🐈的图片。

猫咪网站上的其中一张图片损坏了——修复它，图片将显示隐藏的文本答案！HTMLHERO.

在页面中添加一张狗狗🐶的图片，方法是在第 11 行添加另一个 <img> 标签。狗狗图片的位置是 img/dog-1.png。狗狗图片中的文字是什么？DOGHTML

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 为 demo 的元素的文本更改为 Button Clicked： <button onclick='document.getElementById("demo").innerHTML = "Button Clicked";'>Click Me!</button>
onclick 事件也可以在 JavaScript 的 <script> 标签中定义，而不是直接在元素上定义。

问答时间

点击此任务中的“查看网站”按钮。在右侧添加JavaScript代码，将示例元素的内容更改为“Hack the Planet”。JSISFUN

在此任务中添加将元素文本更改为“Button Clicked”的按钮HTML代码到右侧的编辑器中，通过点击“渲染HTML+JS代码”按钮更新代码，然后点击该按钮。

敏感数据泄露

敏感数据泄露（Sensitive Data Exposure）发生在网站未能妥善保护（或移除）展示给最终用户的敏感明文信息时；通常可以在网站的前端源代码中找到。

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

在这里插入图片描述
敏感信息可能被攻击者利用，以进一步访问 Web 应用程序的不同部分。例如，HTML 注释中可能包含临时登录凭据，如果你查看页面源代码并发现了这些凭据，你可以使用这些凭据登录应用程序的其他部分（或者更糟的是，用于访问网站的其他后端组件）。

每当你评估 Web 应用程序的安全性时，首先应该做的事情之一就是查看页面源代码，看看是否能找到任何暴露的登录凭据或隐藏链接。

问答时间

查看此链接上的网站。源代码中隐藏的密码是什么？testpasswd

HTML注入

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

   输入清理对于保持网站安全非常重要，因为用户输入到网站中的信息通常用于其他前端和后端功能。在另一个实验中，你将探索的另一个漏洞是数据库注入，你可以通过控制直接用于查询的输入来操纵数据库查询，从而以其他用户身份登录——但现在，让我们专注于 HTML 注入（这是客户端的问题）。
    当用户可以控制其输入如何显示时，他们可以提交 HTML（或 JavaScript）代码，浏览器将在页面上使用它，从而允许用户控制页面的外观和功能。
在这里插入图片描述
   上图展示了表单如何将文本输出到页面。用户输入到“你的名字是什么”字段中的任何内容都会被传递给 JavaScript 函数并输出到页面上，这意味着如果用户在该字段中添加自己的 HTML 或 JavaScript，它将在 sayHi 函数中使用并添加到页面中——这意味着你可以添加自己的 HTML（例如 <h1> 标签），它会将你的输入作为纯 HTML 输出。