tryhackme-Pre Security-How The Web Works-How Websites Work
房间地址：https://tryhackme.com/room/howwebsiteswork
这是网络安全入门的基础模块的计算机科学基础知识：How Websites Work（网站如何工作），序号 01 表示第一篇文章，当你不知道从哪里开始的时候，你可以按照数字顺序来进行参考即可。
How Websites Work
Task 1 How websites work
在本课程结束时，您将了解网站的创建方式，并了解一些基本的安全问题。
当您访问网站时，您的浏览器（例如 Safari 或 Google Chrome）会向网络服务器发出请求，询问您正在访问的页面的信息。服务器会返回浏览器用来显示页面的数据；网络服务器只是位于世界某个地方的一台专用计算机，用于处理您的请求。
网站由两个主要组件组成：
前端（客户端）——浏览器呈现网站的方式。
后端（服务器端）——处理请求并返回响应的服务器。
浏览器向 Web 服务器发出请求时还涉及许多其他流程，但现在，您只需了解您向服务器发出请求，服务器会返回浏览器用来呈现信息的数据。
Task 2 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 进行识别。
您可以通过右键单击并选择“查看页面源代码”（Chrome）/“显示页面源代码”（Safari）来查看任何网站的 HTML。
Task 3 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 脚本标签内定义，而不是直接在元素上定义。
Task 4 Sensitive Data Exposure
当网站未能妥善保护（或删除）最终用户的敏感明文信息时，就会发生敏感数据泄露；这些信息通常存在于网站的前端源代码中。
我们现在知道，网站是由许多 HTML 元素（标签）构建的，所有这些元素我们只需“查看页面源代码”即可看到。网站开发人员可能忘记删除登录凭据、指向网站私密部分的隐藏链接，或 HTML 或 JavaScript 中显示的其他敏感数据。
敏感信息可能会被攻击者利用，进一步访问 Web 应用程序的不同部分。例如，可能存在包含临时登录凭据的 HTML 注释，如果您查看页面源代码并发现这些注释，则可以使用这些凭据登录应用程序的其他部分（或者更糟的是，用于访问网站的其他后端组件）。
每当评估 Web 应用程序的安全性问题时，您应该做的第一件事就是检查页面源代码，看看是否可以找到任何暴露的登录凭据或隐藏链接。
你说有一个蜜罐但不知道放哪里好，放这里：
Task 5 HTML Injection
HTML 注入是一种漏洞，当未经过滤的用户输入显示在页面上时就会发生。如果网站未能对用户输入进行过滤（过滤用户输入的任何“恶意”文本），并且该输入在页面上使用，攻击者就可以将 HTML 代码注入易受攻击的网站。
输入过滤对于确保网站安全至关重要，因为用户输入到网站的信息通常会用于其他前端和后端功能。您将在另一个实验中探索一个漏洞，即数据库注入。您可以通过控制查询中直接使用的输入来操纵数据库查找查询，从而以其他用户身份登录。但现在，我们先来关注 HTML 注入（客户端）。
当用户可以控制其输入的显示方式时，他们可以提交 HTML（或 JavaScript）代码，浏览器会在页面上使用这些代码，从而允许用户控制页面的外观和功能。
上图展示了表单如何将文本输出到页面。用户在“你的名字是什么”字段中输入的内容都会传递给 JavaScript 函数并输出到页面。这意味着，如果用户在字段中添加了自己的 HTML 或 JavaScript，sayHi 函数会使用它并将其添加到页面中——这意味着您可以添加自己的 HTML（例如 <h1> 标签），它会将您的输入输出为纯 HTML。
一般规则是永远不要信任用户输入。为了防止恶意输入，网站开发人员应该在 JavaScript 函数中使用用户输入的所有内容之前对其进行过滤；在这种情况下，开发人员可以删除所有 HTML 标签。