MikTu

外观

网站如何工作？

约 2194 字大约 7 分钟

2024-12-01

网站如何工作？

当您访问网站时，您的浏览器（如Safari或Google Chrome）会向Web服务器发出请求，询问您正在访问的页面的相关信息。它将响应您的浏览器用于向您显示页面的数据; Web服务器只是世界上其他地方的专用计算机，用于处理您的请求。

一个网站有两个主要部分组成：

  • 前端(Front End): Client-Side
  • 后端(Back End): Server-Side 在浏览器向Web服务器发出请求时还涉及许多其他过程，但现在，您只需要了解您向服务器发出请求，它会响应浏览器用于向您呈现信息的数据。
哪个术语最好地描述了浏览器呈现的Web应用程序的组件？

答案 Front End

HTML

网站主要使用以下工具创建：

  • HTML 用于构建网站并定义其结构。
  • CSS 通过添加样式选项使网站看起来漂亮。
  • JavaScript 使用交互性在页面上实现复杂功能。 HTML语言（HTML）是网站编写的语言。元素Elements（也称为标记tags）是HTML页面的构建块，并告诉浏览器如何显示内容。下面的代码片段显示了一个简单的HTML文档，其结构对于每个网站都是相同的：
<!DOCTYPE html>  
	<!--定义页面是一个HTML5文档-->
<html> <!--元素是HTML页面的根元素-->
 	<head> <!--元素包含有关页面的信息（如页面标题）-->
		<title>Page Title</title> <!---->
	</head>
	<body> <!--定义了HTML文档的主体-->
	<h1>Example Heading</h1> <!--定义了一个大标题-->
    <p>Example paragraph..</p> <!--定义了一个段落-->

	</body>
</html>

相关信息

还有许多其他元素elements（tags）用于不同的目的。例如，有用于按钮（<button>）、图像（<img>）、列表等的标记。

tags可以包含诸如class属性之类的属性，该属性可以用于对元素进行样式化（例如，使标签具有不同的颜色）<p class="bold-text">，或者src属性，该属性在图像上用于指定图像的位置<img src="img/cat.jpg">。元素可以具有多个属性，每个属性具有其自己独特的目的，例如，<p attribute1="value1" attribute2="value2">.

元素也可以有一个id属性（<p id="example">），它对于元素是唯一的。与class属性不同，多个元素可以使用同一个类，一个元素必须有不同的id来唯一地标识它们。元素id用于样式化并由JavaScript标识。

您可以通过右键单击并选择View Page Source(Chrome、Firefox) 或者 Show Page Source(Safari)查看任何网站的HTML。

回答以下问题

🐱网页上的一个图像是坏的-修复它，图像将揭示隐藏的文本答案！

答案 HTMLHERO

<!DOCTYPE html>
<html>
    <head>
        <title>TryHackMe HTML Editor</title>
    </head>
    <body>
        <h1>Cat Website!</h1>
        <p>See images of all my cats!</p>
        <img src='img/cat-1.jpg'>
        <img src='./img/cat-2.jpg'>
        <!-- Add dog image here -->
    </body>
</html>

通过在第11行添加另一个(<img>)标签来添加一个狗的图像。狗图像的位置是img/dog-1.png。狗图片中的文字是什么？

答案 DOGHTML

<!DOCTYPE html>
<html>
    <head>
        <title>TryHackMe HTML Editor</title>
    </head>
    <body>
        <h1>Cat Website!</h1>
        <p>See images of all my cats!</p>
        <img src='img/cat-1.jpg'>
        <img src='img/cat-2.jpg'>
        <img src='img/dog-1.png'>
    </body>
</html>

JavaScript（JS）

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 脚本标签内部定义，而不直接在元素上定义。

回答以下问题

点击此任务上的 "View Site" 按钮。在右侧添加 JavaScript 代码，将 “demo” 元素的内容更改为 “Hack the Planet”。

答案 JSISFUN

在右侧的编辑器中添加此任务中提供的按钮 HTML 代码，该代码能在按钮被点击时将（元素element）的文本更改为 “Button Clicked”，通过点击 “渲染 HTML + JS 代码” 按钮来更新代码，然后再点击该按钮。
<!DOCTYPE html>
<html>
    <head>
        <title>TryHackMe Editor</title>
    </head>
    <body>
        <div id="demo">Hi there!</div>
        <script type="text/javascript">
        document.getElementById("demo").innerHTML = "Hack the Planet";
            // add your JavaScript here
        </script>
        <button onclick='document.getElementById("demo").innerHTML = "Button Clicked";'>Hack the Planet</button>
    </body>
</html>

敏感数据暴露

敏感数据泄露发生在网站没有正确保护（或删除）最终用户的敏感明文信息 时;通常在网站的前端源代码中发现。

我们现在知道，网站是使用许多HTML元素（标签）构建的，所有这些元素我们都可以通过“viewing the page source”来查看。网站开发人员可能忘记删除登录凭据、指向网站私密部分的隐藏链接或HTML或JavaScript中显示的其他敏感数据。

敏感信息可能会被利用来进一步攻击Web应用程序的不同部分。 例如，可能会有带有临时登录凭据的HTML注释，如果您查看了页面的源代码并发现了这一点，则可以使用这些凭据登录应用程序的其他位置（或者更糟，用于访问站点的其他后端组件）。

每当您评估Web应用程序的安全问题时，您应该做的第一件事就是检查页面源代码，看看是否可以找到任何暴露的登录凭据或隐藏的链接。

回答以下问题

查看网站在此连接上,源代码中隐藏的密码是什么？

答案: testpasswd

HTML注入

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

输入消毒 （Input sanitisation） 在保持网站安全方面非常重要，因为用户输入到网站中的信息通常用于其他前端和后端功能。您将在另一个实验中探索的一个漏洞是数据库注入，您可以通过控制直接用于查询的输入来操纵数据库查找查询以另一个用户身份登录-但现在，让我们专注于HTML注入（这是客户端）。

当用户可以控制如何显示他们的输入时，他们可以提交HTML（或JavaScript）代码，浏览器将在页面上使用它，允许用户控制页面的外观和功能。

上图显示了表单如何将文本输出到页面。无论用户在“What's your name”字段中输入什么，都会传递给一个JavaScript函数并输出到页面，这意味着如果用户在字段中添加自己的HTML或JavaScript，它会在sayHi函数中使用并添加到页面-这意味着您可以添加自己的HTML（例如h1标签），它会将您的输入输出为纯HTML。

一般规则是永远不要相信用户输入。为了防止恶意输入，网站开发人员应该在JavaScript函数中使用用户输入的所有内容之前对其进行清理;在这种情况下，开发人员可以删除任何HTML标记。

回答以下问题

查看此任务的网站并注入HTML，以便显示指向http://hacker.com的恶意链接。

答案: HTML_INJ3CTI0N

解析： Google how to create a HTML link and use it as input to the "What's your name" field.

<a href=http://hacker.com>Hi<a>