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 标签。