仅使用浏览器开发人员工具手动检查 Web 应用程序是否存在安全问题。只需使用浏览器即可进行黑客攻击，无需任何工具或脚本。
1、任务 1 遍历应用程序
在这个房间中，您将学习如何仅使用浏览器中的内置工具手动检查 Web 应用程序的安全问题。通常，自动化安全工具和脚本会错过许多潜在的漏洞和有用的信息。
以下是您将在整个房间中使用的内置浏览器工具的简短细分：
-
View Source - Use your browser to view the human-readable source code of a website.
查看源代码 - 使用浏览器查看网站的人类可读源代码。 -
Inspector - Learn how to inspect page elements and make changes to view usually blocked content.
检查器 - 了解如何检查页面元素并进行更改以查看通常被阻止的内容。 -
Debugger - Inspect and control the flow of a page’s JavaScript
调试器 - 检查和控制页面 JavaScript 的流程 -
Network - See all the network requests a page makes.
网络 - 查看页面发出的所有网络请求。
启动此任务的虚拟机，等待 2 分钟，然后访问以下 URL：https://LAB_WEB_URL.p.thmlabs.com（此 URL 将在启动计算机后 2 分钟后更新）
2、任务 2 探索网站
作为渗透测试人员，您在审查网站或 Web 应用程序时的角色是发现可能易受攻击的功能，并尝试利用它们来评估它们是否易受攻击。这些功能通常是网站中需要与用户进行一些交互的部分。
查找网站的交互部分可以像查找登录表单一样简单，可以手动查看网站的JavaScript。一个很好的开始是用你的浏览器浏览网站，记下每个页面/区域/功能，并为每个页面/区域/功能做总结。
Acme IT Support网站的网站评论示例如下:
| Feature 特征 | URL | Summary 概括 |
|---|---|---|
| Home Page 主页 |
/ | This page contains a summary of what Acme IT Support does with a company photo of their staff. 此页面包含 Acme IT 支持人员如何处理其员工的公司照片的摘要。 |
| Latest News 最新消息 |
/news /消息 |
This page contains a list of recently published news articles by the company, and each news article has a link with an id number, i.e. /news/article?id=1 该页面包含该公司最近发布的新闻文章列表，每篇新闻文章都有一个带 id 号的链接，即 /news/article?id=1 |
| News Article 新闻文章 |
/news/article?id=1 /新闻/文章?id=1 |
Displays the individual news article. Some articles seem to be blocked and reserved for premium customers only. 显示个别新闻文章。有些文章似乎被屏蔽并仅供高级客户使用。 |
| Contact Page 联系页面 |
/contact /接触 |
This page contains a form for customers to contact the company. It contains name, email and message input fields and a send button. 此页面包含供客户联系公司的表格。它包含姓名、电子邮件和消息输入字段以及发送按钮。 |
| Customers 顾客 |
/customers /顾客 |
This link redirects to /customers/login. 此链接重定向到/customers/login。 |
| Customer Login 客户登录 |
/customers/login /客户/登录 |
This page contains a login form with username and password fields. 此页面包含一个带有用户名和密码字段的登录表单。 |
| Customer Signup 客户注册 |
/customers/signup /客户/注册 |
This page contains a user-signup form that consists of a username, email, password and password confirmation input fields. 此页面包含一个用户注册表单，其中包含用户名、电子邮件、密码和密码确认输入字段。 |
| Customer Reset Password 客户重置密码 |
/customers/reset /客户/重置 |
Password reset form with an email address input field. 带有电子邮件地址输入字段的密码重置表单。 |
| Customer Dashboard 客户仪表板 |
/customers /顾客 |
This page contains a list of the user’s tickets submitted to the IT support company and a “Create Ticket” button. 此页面包含提交给 IT 支持公司的用户票证列表和“创建票证”按钮。 |
| Create Ticket 创建票证 |
/customers/ticket/new /客户/票/新 |
This page contains a form with a textbox for entering the IT issue and a file upload option to create an IT support ticket. 此页面包含一个表单，其中包含用于输入 IT 问题的文本框和用于创建 IT 支持票证的文件上传选项。 |
| Customer Account 客户账户 |
/customers/account /客户/帐户 |
This page allows the user to edit their username, email and password. 该页面允许用户编辑他们的用户名、电子邮件和密码。 |
| Customer Logout 客户退出 |
/customers/logout /客户/注销 |
This link logs the user out of the customer area. 此链接使用户退出客户区。 |
我们将开始更深入地研究我们在下一个任务中发现的一些页面。
3、任务 3 查看页面源代码（Viewing The Page Source）
页面源是每次我们发出请求时从网络服务器返回到我们的浏览器/客户端的人类可读代码。
返回的代码由 HTML（超文本标记语言）、CSS（层叠样式表）和 JavaScript 组成，它告诉我们的浏览器要显示什么内容、如何显示它，并添加与 JavaScript 交互的元素。
出于我们的目的，查看页面源代码可以帮助我们发现有关 Web 应用程序的更多信息。
如何查看页面源代码？
1、查看网站时，您可以右键单击页面，然后您会在菜单上看到一个选项，显示“查看页面源代码”（View Page Source）。
2、大多数浏览器支持将 view-source: 放在 URL 前面，例如 view-source:https://www.google.com/
3、在浏览器菜单中，您将找到查看页面源代码的选项。此选项有时可能位于子菜单中，例如开发人员工具或更多工具。
让我们查看一些页面源代码！
尝试查看 Acme IT 支持网站主页的页面源代码。不幸的是，解释您在这里看到的所有内容远远超出了本房间的范围，您需要研究网站设计/开发课程才能完全理解它。我们能做的就是挑选出对我们重要的信息。
Acme IT 页面源代码：
<!--
This page is temporary while we work on the new homepage @ /new-home-beta
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Acme IT Support - Home</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-ekOryaXPbeCpWQNxMwSWVvQ0+1VrStoPJq54shlYhR8HzQgig1v5fas6YgOqLoKz" crossorigin="anonymous">
<link rel="stylesheet" href="/assets/bootstrap.min.css">
<link rel="stylesheet" href="/assets/style.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Acme IT Support</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="/news">News</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/customers">Customers</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav><div class="container" style="padding-top:60px">
<h1 class="text-center">Acme IT Support</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center">
<img src="/assets/staff.png">
<p class="welcome-msg">Our dedicated staff are ready <a href="/secret-page">to</a> assist you with your IT problems.</p>
</div>
</div>
</div>
<script src="/assets/jquery.min.js"></script>
<script src="/assets/bootstrap.min.js"></script>
<script src="/assets/site.js"></script>
</body>
</html>
<!--
Page Generated in 0.03720 Seconds using the THM Framework v1.2 ( https://static-labs.tryhackme.cloud/sites/thm-web-framework )
-->
在页面顶部，您会注意到一些以 <!-- 开头并以 --> 结尾的代码，这些是注释。注释是网站开发人员留下的消息，通常是为了向其他程序员解释代码中的某些内容，甚至是为自己提供注释/提醒。这些评论不会显示在实际网页上。此评论描述了在开发新主页时主页是临时的。查看评论中的网页以获得您的第一个旗帜。
This page is temporary while we work on the new homepage @ /new-home-beta
# 翻译
这个页面是临时的，因为我们正在开发新的主页@ /new-home-beta
# 新页面地址，即在原有网站`url`后拼接`/new-home-beta`
# 即`10.10.194.239/new-home-beta`
至此获取flag1!
HTML 中不同页面的链接写入锚标记（这些是以 <a 开头的 HTML 元素），并且您将定向到的链接存储在 href 属性中。
例如，您将在第 31 行看到联系页面链接：
如果您进一步查看页面源代码，会发现一个隐藏链接，指向以“secr”开头的页面，查看此链接即可获取另一个标志。在现实情况下，您显然不会获得标志，但您可能会发现企业使用一些私人区域来存储公司/员工/客户信息。
点击此secr开头的连接，进入下述页面网站
至此获取flag2!
外部文件，如CSS, JavaScript和图像可以使用HTML代码包含。在本例中，您将注意到这些文件都存储在同一个目录中。如果您在web浏览器中查看此目录，则会出现配置错误。应该显示的是一个空白页面或403 Forbidden页面，并提示您无权访问该目录。相反，已经启用了目录列表特性，它实际上列出了目录中的每个文件。有时这不是问题，目录中的所有文件都可以安全地供公众查看，但在某些情况下，备份文件、源代码或其他机密信息可能存储在这里。在本例中，我们在flag.txt文件中获得一个标志。
根据提示，发现CSS、JavaScript、图像等都存储在/assets目录，网站url拼接此目录地址，即10.10.194.239/assets
访问上述拼接地址
发现flag.txt，打开此文件
（此目录下其他文件不一定没有作用，后续遇到实际场景，建议逐个点击查看，说不定会有意外收获！）
至此获取flag3!
如今，许多网站都不是从头开始制作的，而是使用所谓的框架。框架是预制代码的集合，允许开发人员轻松包含网站所需的常见功能，例如博客、用户管理、表单处理等等，从而节省开发人员数小时或数天的开发时间。
查看页面源代码通常可以为我们提供线索，了解某个框架是否正在使用，如果使用，是哪个框架，甚至是什么版本。了解框架和版本可能是一个强有力的发现，因为框架中可能存在公共漏洞，并且网站可能没有使用最新版本。在页面底部，您将找到有关正在使用的框架和版本的评论以及该框架网站的链接。查看该框架的网站，您会发现我们的网站实际上已经过时了。阅读更新通知并使用您找到的信息来发现另一个标志。
发现框架版本 v1.2
框架网站链接 https://static-labs.tryhackme.cloud/sites/thm-web-framework
访问框架网站链接，根据提示，阅读网站更新通知
阅读新版本通知
我们遇到了一个问题，我们的备份过程在网络目录中创建了一个名为/tmp.zip的文件，该文件可能会被网站访问者读取。该文件现在存储在公众无法读取的区域中。
访问/tem.zip文件，在原有url后拼接，即10.10.194.239/tmp.zip，访问此链接
解压此压缩包
# 解压命令
unzip tmp.zip
至此获取flag4!
回答以下问题文章来源：https://www.toymoban.com/news/detail-832386.html
4、任务 4 开发人员工具 - 检查器（Developer Tools - Inspector）
Developer Tools 开发者工具
每个现代浏览器都包含开发人员工具；这是一个工具包，用于帮助 Web 开发人员调试 Web 应用程序，并让您深入了解网站的底层情况，了解正在发生的情况。作为渗透测试人员，我们可以利用这些工具来更好地理解 Web 应用程序。我们特别关注开发人员工具包的三个功能：检查器、调试器和网络。
Opening Developer Tools 打开开发者工具
每个浏览器访问开发人员工具的方式都不同。如果您不确定如何访问它，请单击此任务右上角的“查看站点”按钮，获取有关如何访问浏览器工具的说明。（用到的时候在查！）
Inspector 检查器
页面源并不总是代表网页上显示的内容；这是因为 CSS、JavaScript 和用户交互可以更改页面的内容和样式，这意味着我们需要一种方法来查看此时浏览器窗口中显示的内容。 Element Inspector 通过向我们提供网站当前内容的实时呈现来协助我们完成此任务。
除了查看实时视图之外，我们还可以编辑页面元素并与之交互，这有助于 Web 开发人员调试问题。
在 Acme IT 支持网站上，单击新闻部分，您将在其中看到三篇新闻文章。
前两篇文章是可读的，但第三篇文章已被屏蔽，内容上方有一条浮动通知，说明您必须成为高级客户才能查看该文章。这些阻挡页面内容的浮动框通常被称为付费墙，因为它们在您希望看到的内容前面竖起了一堵隐喻的墙，直到您付费为止。
右键单击高级通知（付费专区），您应该能够从菜单中选择“检查”选项，该选项将根据您的浏览器或偏好在底部或右侧打开开发人员工具。您现在将看到构成网站的元素/HTML（类似于下面的屏幕截图）。
找到类 premium-customer-blocker 的 DIV 元素并单击它。您将在样式框中看到应用于此元素的所有 CSS 样式，例如 margin-top: 60px 和 text-align: center 。**我们感兴趣的样式是 display: block 。如果单击单词 block ，您可以键入自己选择的值。尝试输入 none ，这将使该框消失，显示其下方的内容和一个标志。如果该元素没有显示字段，您可以单击最后一个样式下方并添加您自己的样式。**尝试一下元素检查器，您会发现可以更改网站上的任何信息，包括内容。请记住，这仅在您的浏览器窗口中编辑，当您按刷新时，一切都会恢复正常。
步骤：
至此获取flag!
回答以下问题
5、任务 5 开发人员工具 - 调试器(Developer Tools - Debugger)
Developer Tools - Debugger
开发人员工具中的这个面板旨在用于调试 JavaScript，对于想要找出某些内容可能无法正常工作的 Web 开发人员来说，这又是一项出色的功能。但作为渗透测试人员，它使我们可以选择深入挖掘 JavaScript 代码。在 Firefox 和 Safari 中，此功能称为“调试器”，但在 Google Chrome 中，它称为“源”
在 Acme IT 支持网站上，单击联系页面，每次加载页面时，您可能会注意到屏幕上快速闪烁红色。我们将使用调试器来弄清楚这个红色闪光是什么以及它是否包含任何有趣的东西。作为渗透测试人员，调试红点不会是您在现实世界中要做的事情，但它确实允许我们使用此功能并习惯调试器。
在这两种浏览器中，您都可以在左侧看到当前网页正在使用的所有资源的列表。如果单击资产文件夹，您将看到一个名为 flash.min.js 的文件。单击此文件将显示 JavaScript 文件的内容。
很多时候，当查看 javascript 文件时，您会注意到所有内容都在一行上，这是因为它已被最小化，这意味着所有格式（制表符、空格和换行符）都已被删除以使文件更小。该文件也不例外，而且它也被混淆了，故意使其难以阅读，因此其他开发人员无法轻松复制它。
我们可以使用“Pretty Print”选项返回一些格式，该选项看起来像两个大括号 { } 以使其更具可读性，尽管由于混淆，仍然很难理解文件中发生的情况。如果滚动到 flash.min.js 文件的底部，您将看到以下行： flash['remove']();
这一点 JavaScript 就是从页面中删除红色弹出窗口的原因。我们可以利用调试器的另一个功能，称为断点。这些是代码中我们可以强制浏览器停止处理 JavaScript 并暂停当前执行的点。
如果单击包含上述代码的行号，您会发现它变成蓝色；您现在已在此行上插入了一个断点。现在尝试刷新页面，您会发现红色框保留在页面上而不是消失，并且它包含一个标志。
步骤：
1、
2、
3、
4、flash.min.js文件显示在一行，拉取至该行末尾，发现flash['remove']();
5、点击下述按钮，让flash.min.js格式化输出
格式化输出效果如下：
6、在flash['remove']();处设置断点
7、刷新页面，发现flag
回答以下问题
6、任务 6 开发者工具 - 网络（Developer Tools - Network）
Developer Tools - Network
开发人员工具上的网络选项卡可用于跟踪网页发出的每个外部请求。如果单击“网络”选项卡，然后刷新页面，您将看到该页面请求的所有文件。
尝试在联系页面上执行此操作；如果列表有点过多，您可以按垃圾桶图标删除该列表。
打开“网络”选项卡，尝试填写联系表单并按“发送消息”按钮。您将注意到network选项卡中的一个事件，这是使用AJAX方法在后台提交的表单。AJAX是一种在web应用程序后台发送和接收网络数据的方法，不需要改变当前的web页面。
检查联系表单创建的网络选项卡上的新条目，并查看数据发送到的页面以显示标志。
步骤
1、进入Developer Tools - Network选项，随便填写信息
2、点击Send Message后，在Developer Tools - Network处发现contact-msg文件
3、点击此文件，查看内容
至此获取flag!
回答以下问题
文章来源地址https://www.toymoban.com/news/detail-832386.html
到了这里，关于第二章：Introduction to Web Hacking —— 00 Walking An Application 行走应用程序的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
