THM-Walking An Application(遍历web应用程序)-学习

THM-Walking An Application(遍历web应用程序)-学习

Hekeatsll
  2024-01-27 11:17:55 2024-01-27 11:17:55 Created   2024-01-27 11:22:25 2024-01-27 11:22:25 Updated      4.6k Words  16 Mins  

本文相关的TryHackMe实验房间链接：https://tryhackme.com/room/walkinganapplication

通过学习相关知识点：仅使用你的浏览器开发工具手动检查 Web 应用程序的安全问题，仅使用你的浏览器进行攻击，而无需工具或脚本。

简介

在本文中，你将学习如何仅使用浏览器中的内置工具手动检查 Web 应用程序的安全问题。 通常情况下，自动化安全工具和脚本会遗漏许多潜在的漏洞和有用的信息。

以下是你将在本文中使用的浏览器内置工具的简要分类：

  • View Source - 查看源代码 - 使用你的浏览器查看网站页面的人工可读源代码。
  • Inspector - 检查器 - 了解如何检查网站页面元素并进行更改以便查看通常会被阻止的内容。
  • Debugger - 调试器 - 检查和控制网站页面 JavaScript 的流程
  • Network - 网络 - 查看网站页面发出的所有网络请求。

在此知识点对应的TryHackMe房间内启动目标虚拟机，等待 2 分钟，然后访问以下 URL：https://LAB_WEB_URL.p.thmlabs.com（此 URL 将在你启动目标机的 2 分钟后更新）

探索目标网站

作为渗透测试人员，你在审查网站或 Web 应用程序时的职责是发现可能存在漏洞的功能并尝试利用，以此来评估它们是否存在漏洞。 这些功能通常是网站的一部分，需要与用户进行一些交互。

查找网站的交互部分就像发现登录表单然后手动查看网站的 JavaScript 一样简单。 一个很好的起点是使用你的浏览器访问目标网站，了解该网站的各个页面/区域/功能，并为每个页面/区域/功能做简单的信息记录。

Acme IT Support 示例站点的审查如下所示：

image-20221111232410243

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
此页面包含 Acme IT Support 对其员工的公司照片所做处理的摘要。

此页面包含公司最近发布的新闻文章列表，每篇新闻文章都有一个带有id号的链接，即/news/article?id=1

显示单个新闻文章。有些文章似乎被阻止并且仅为高级客户保留访问权限。

此页面包含客户联系公司的表格。它包含姓名、电子邮件和消息输入字段以及一个发送按钮。

此链接重定向到 /customers/login。

此页面包含一个带有用户名和密码字段的登录表单。

此页面包含一个用户注册表单，其中包含用户名、电子邮件、密码和密码确认输入字段。

带有电子邮件地址输入字段的密码重置表单。

此页面包含提交给 IT Support 公司的用户工单列表和“创建工单”按钮。

此页面包含一个带有用于输入 IT 问题的文本框的表单和一个用于创建 IT Support业务票据的文件上传选项。

此页面允许用户编辑他们的用户名、电子邮件和密码。

此链接将允许用户从客户区注销（登出）。

查看网页源代码

网页源代码是每次我们发出请求时从 Web 服务器返回给我们的浏览器/客户端的可读代码。

返回的代码由 HTML（超文本标记语言）、CSS（级联样式表）和 JavaScript 组成，它告诉我们的浏览器要显示什么内容，以及如何显示它并添加与 JavaScript 交互的元素。

查看网页源代码可以帮助我们发现有关 Web 应用程序的更多信息。

如何查看网页源代码？

  1. 在浏览网站时，你可以右键单击当前网页，然后你会在菜单上看到一个显示“查看页面源”的选项。

  2. 大多数浏览器都支持将 view-source: 放在 URL 前面以显示网页源码，例如 view-source:https://www.google.com/

  3. 在你的浏览器菜单中，你可以找到一个查看页面源代码的选项，此选项有时可以在子菜单中显示，例如开发者工具或更多工具。

让我们查看一些网页源代码！

尝试查看 Acme IT Support 网站（目标站点）主页的页面源代码。 不幸的是，解释你在这里看到的一切都超出了本文的范围，你需要研究网站设计/开发课程才能完全理解它。 我们能做的，就是挑选一些对我们很重要的信息。

在源代码页面的顶部，你会注意到一些以 < !- -开头并以- - > 结尾的代码，这些是注释。 源代码中的评论是网站开发者留下的信息，通常是为了向其他程序员解释代码中的某些内容，甚至是给自己的注释/提醒，这些评论不会显示在实际网页上。 我们可以看到此评论描述了开发者在开发新主页时是如何选择临时主页的，在本次实验环境下，你可以查看此评论中的网页以获得第一个flag。

HTML 中不同页面的链接会写在锚标记中（以 <a 开头的 HTML 元素），你将被定向到 存储在href属性中的链接。

例如，你将在网页源码的第 31 行看到contact 页面链接：

image-20221112100241526

（在本次实验环境下）如果你进一步查看网页源代码，则能发现一个以“secr”开头的页面的隐藏链接，你可以查看此链接以获取第二个flag。 你显然不会在现实环境下获得flag，但通过查看隐藏链接 你可能会发现一些企业用于存储公司/员工/客户信息的私人区域。

在网页源代码中可以使用 HTML 代码包含一些外部文件，如 CSS、JavaScript 和图像。在此示例中，你会注意到这些外部文件都存储在同一个目录中。如果你可以在 Web 浏览器中查看此目录，则意味着目标网站出现了配置错误。因为正常情况下，此目录页面应该显示为空白页面或 403 禁止页面，还将显示一个你无权访问该目录的错误提示。

我们可以看到示例中的目标站点已启用目录列表功能，并且我们可以看到 相关页面已经列出了目录中的每个文件。有时候目录中的所有文件都可以安全地被公众查看，但在某些情况下，备份文件、源代码或其他机密信息（这类文件不应该被公众查看到）也可能会存储在该目录中。

在本例中，我们能够在目录中发现 flag.txt 文件，并可查看其内容以获取第三个flag。

如今，许多网站都不是从零开始制作的，而是使用所谓的框架来进行网站开发。 网站框架是预制代码的集合，开发人员可以轻松地使用网站框架包含网站所需的常见功能，例如博客、用户管理、表单处理等，从而节省开发人员数小时或数天的开发时间。

查看网页源代码通常可以为我们提供有关网站所使用框架的线索，如果使用了框架，那么是使用哪个框架，框架版本又是什么。目标网站所使用的框架及其版本可能是一个重要的信息，因为目标网站可能没有使用最新版本的框架，而当前使用的框架版本中可能存在一些已经公开的漏洞。

（在本次实验环境下）查看源码页面底部，你会找到有关目标站点正在使用的框架和版本的评论以及指向该框架网站的链接。 查看框架相关的网站，你会发现我们的目标网站使用的框架实际上已经过时了，阅读更新通知并使用你找到的信息来发现第四个flag。

答题

image-20221112102307094

启动目标机器，然后访问目标站点，并完成答题：https://10-10-37-231.p.thmlabs.com

右键单击目标站点主页页面，在菜单上点击“查看页面源”选项，浏览网页源代码页面顶部，查看注释评论中的网页以获得第一个flag。

image-20221112103931186

image-20221112104157944

image-20221112104223634

THM{HTML_COMMENTS_ARE_DANGEROUS}

进一步查看网页源代码，发现一个以“secr”开头的页面的隐藏链接，查看此链接以获取第二个flag。

image-20221112104334672

image-20221112104437721

THM{NOT_A_SECRET_ANYMORE}

外部文件都存储在同一个目录中，你可以尝试在 Web 浏览器中查看此目录，在目录中发现 flag.txt 文件，查看其内容以获取第三个flag。

image-20221112104644170

image-20221112104710153

image-20221112104743468

THM{INVALID_DIRECTORY_PERMISSIONS}

查看源码页面底部，找到有关目标站点正在使用的框架和版本的评论以及指向该框架网站的链接。 查看框架相关的网站，阅读更新通知找到第四个flag。

image-20221112105144595

image-20221112105234523

image-20221112105446889

image-20221112105644716

THM{KEEP_YOUR_SOFTWARE_UPDATED}

Developer Tools - Inspector（检查器）

Developer Tools（开发者工具）

每个现代浏览器都包含开发者工具，这是一个工具包，能用于帮助 Web 开发人员调试 Web 应用程序，并帮助你窥视网站的底层，以了解网站正在发生的事情。 作为一名渗透测试者，我们可以利用这些工具来更好地理解 Web 应用程序。 我们主要关注开发者工具包的三个功能点：Inspector、Debugger 和 Network。

Opening Developer Tools（打开开发者工具）

每个浏览器访问开发者工具的方式都不同。

Firefox

要在 Firefox 中打开开发者工具，请单击浏览器右上角的 Firefox 菜单，然后选择 Web Developer，然后在子菜单中选择 Web Developer Tools 即可。

image-20221112110846518

Chrome

要在 Chrome 中打开开发者工具，请单击浏览器右侧的 Chrome 菜单，然后选择更多工具，然后选择开发者工具即可。

image-20221112110913058

Safari

要在 Safari 中打开开发人员工具，你首先需要启用开发菜单。在 Safari 打开首选项中，单击高级选项卡，然后勾选底部标记为在菜单栏中显示开发菜单的复选框。

image-20221112110940413

在Safari 浏览器顶部，你现在将拥有“开发”菜单，单击“显示 Web 检查器”以打开开发者工具即可。

image-20221112111002516

Edge

要在 Microsoft Edge 中打开开发人员工具，请单击浏览器右侧的 Edge 菜单，然后选择更多工具，然后选择开发人员工具即可。

image-20221112111034014

Internet Explorer

要在 Internet Explorer 中打开开发人员工具，请单击浏览器右侧的 cog 菜单，然后选择 F12 Developer Tools即可。

image-20221112111110269

Inspector（检查器）

页面源代码并不总是代表网页上将显示的内容，这是因为 CSS、JavaScript 和用户交互可以改变网页页面的内容和样式，这意味着我们需要一种方法来查看此时浏览器窗口中显示的内容，而 Element 检查器可以通过为我们提供当前网站网页上的实时显示内容来协助我们。

除了查看实时视图，我们还可以编辑页面元素并与之交互，这有助于 Web 开发人员调试问题。在 Acme IT Support 网站上（目标示例站点），单击新闻部分，你将在其中看到三篇新闻文章。

前两篇文章是可读的，但第三篇被阻止阅读，其内容上方有一条浮动通知，提示你必须是高级客户才能查看该文章。 这些阻止页面内容的浮动框通常被称为付费墙，因为该网站在你希望看到的内容前面设置了一堵隐喻性的墙，直到你付费为止。

image-20221112111930439

右键单击高级通知 ( 高级通知即paywall )，你应该能够从菜单中选择 Inspect 选项，这将根据你使用浏览器种类或偏好在底部或右侧打开开发者工具，然后你将看到构成网站的elements(元素)/HTML（类似于下面的屏幕截图）。

image-20221112112220176

找到具有premium-customer-blocker类 的 DIV 元素并单击它。你将在样式框中看到适用于该元素的所有 CSS 样式，例如margin-top: 60px和text-align: center。

我们感兴趣的样式是display: block。 如果我们单击单词block，则可以键入自己选择的值，尝试输入 none，这将使得之前的浮动框消失，并显示其下方的内容和一个flag 。如果该元素没有显示字段，你可以在最后一个样式下方单击并添加自己的样式。

试一试元素检查器，你会发现你可以更改网站上的任何信息，包括内容。请记住，这仅在你的浏览器窗口中进行编辑，当你按下刷新时，你在浏览器中正在查看的网页的一切内容都会恢复正常。

答题

image-20221112113111494

启动目标机器，然后访问目标站点，并完成答题：https://10-10-125-101.p.thmlabs.com

浏览目标示例站点，单击新闻部分，第三篇被阻止阅读，其内容上方有一条浮动通知。

image-20221112113834680

image-20221112113904472

右键单击浮动通知，从菜单中选择 Inspect 选项，你将看到构成网站的elements(元素)/HTML。

image-20221112114012933

修改block的值为none，查看第三篇新闻文章的内容并获取flag：

image-20221112114237841

THM{NOT_SO_HIDDEN}

Developer Tools - Debugger（调试器）

Debugger（调试器）

开发者工具中的这个面板是用来调试 JavaScript 的，对于想要弄清楚为什么有些东西可能不工作的 Web 开发者来说，这是一个很好的功能；但作为渗透测试人员，它为我们提供了深入挖掘 JavaScript 代码的选项。在 Firefox 和 Safari 中，此功能称为Debugger，但在 Google Chrome 中，它被称为Sources。

在 Acme IT Support 网站（目标站点）上，单击 contact 页面，每次加载页面时，你可能会注意到屏幕上会有快速闪烁的红色。 我们将使用调试器来确定这个红色闪光是什么以及它是否包含任何有趣的内容。调试这个红点并不会是你在现实世界中作为渗透测试人员会做的事情，该示例只是允许我们了解Debugger功能。

在浏览器的左侧，你会看到当前网页正在使用的所有资源的列表。单击资产（assets ）文件夹，你将看到一个名为 flash.min.js 的文件，继续单击此文件将显示此 JavaScript 文件的内容。

在浏览器中查看 javascript 文件时，你可能会注意到所有内容都在一行上，因为它已被最小化，这意味着所有格式（制表符、间距和换行符）都已被删除以使文件更小。 这个js文件也不例外，而且它被混淆了，这使得它很难被阅读，以保证它不能被其他开发者轻易复制。

我们可以通过使用“Pretty Print”选项对js的内容应用格式，这个功能选项的标志像两个大括号 { } ，它能使js文件更具可读性。滚动到 flash.min.js 文件的底部，你将看到以下行：flash['remove']();

image-20221112120411788

这行JS代码就是当前网页会出现红色闪烁的原因。 我们可以利用调试器的另一个特性，这个特性被称为断点，我们可以利用断点 强制浏览器停止执行 JavaScript 并暂停至当前已经执行到的的代码点。

单击上述关键js代码的行号，你会注意到它变为蓝色，这表示你现在已经在这一行插入了一个断点。 现在尝试刷新页面，你会注意到红色框停留在页面上而不是消失，并且其中还包含一个flag。

答题

image-20221112120857186

浏览目标站点，进入contact 页面，打开调试器：

image-20221112121123899

使用“Pretty Print”选项对js的内容应用格式，这个功能选项的标志像两个大括号 { } ，它能使js文件更具可读性：

image-20221112121312210

滚动到 flash.min.js 文件的底部，在flash['remove']();处设置一个断点（点击该代码的行号即可设置断点）：

image-20221112121700362

刷新网页页面，查看flag内容：

image-20221112121748837

THM{CATCH_ME_IF_YOU_CAN}

Developer Tools - Network（网络）

Network（网络）

开发者工具上的网络选项卡可用于跟踪网页发出的每个外部请求。 如果你在开发者工具栏中单击“网络”选项卡，然后刷新页面，你将看到有关该页面请求的所有文件。

尝试在目标站点的 contact 页面上执行此操作，如果列表的内容有点繁杂，你可以按垃圾桶图标清除列表。

在网络选项卡打开的情况下，尝试在网页上填写联系表格并按下发送消息按钮，你会注意到网络选项卡中会出现一个相关的事件，该事件会包含一个在后台使用称为 AJAX 的方法提交的表单。 AJAX 是一种在 Web 应用程序后台发送和接收网络数据的方法，通过更改当前网页无法进行干扰。

image-20221112122434790

当使用网页创建并发送contact 表单之后，检查在网络选项卡中出现的新的相关条目，通过查看数据发送之后的响应消息以显示flag。

答题

image-20221112122641084

浏览目标站点的 contact 页面，打开开发者工具的网络选项卡，清除列表内容，创建新的contact 表单并点击发送：

image-20221112123858951

image-20221112124109287

查看在网络选项卡中出现的和contact 表单相关的新条目，查看响应消息以获取flag：

image-20221112124445374

THM{GOT_AJAX_FLAG}

  • Title: THM-Walking An Application(遍历web应用程序)-学习
  • Author: Hekeatsll
  • Created at : 2024-01-27 11:17:55
  • Updated at : 2024-01-27 11:22:25
  • Link: https://hekeatsll.github.io/2024/01/27/THM-Walking An Application(遍历web应用程序)-学习/
  • License: This work is licensed under CC BY-NC-SA 4.0.
Comments
On this page
THM-Walking An Application(遍历web应用程序)-学习
  1. 简介
  2. 探索目标网站
  3. 查看网页源代码
  4. Developer Tools - Inspector（检查器）
  5. Developer Tools - Debugger（调试器）
  6. Developer Tools - Network（网络）