【THM】JavaScript Essentials(JavaScript基本要点)-学习

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

本文相关内容：了解如何使用 JavaScript 为网站添加交互性并了解相关的漏洞。

image-20250107223421402

介绍

JavaScript (JS) 是一种流行的脚本语言，允许 Web 开发人员向包含 HTML 和 CSS（样式）的网站添加交互功能。在创建了 HTML 元素之后，你可以通过 JS 添加交互性，例如验证、onClick 操作、动画等。学习该语言与学习 HTML 和 CSS 同等重要。 JS 脚本主要将与 HTML 一起使用。

image-20250110225823885

本文内容旨在作为 JS 的入门概述，专门为 JS 经验有限的初学者量身定制。重点是从网络安全的角度教授 JS 基础知识以及如何利用JS的合法功能来实现恶意结果。

前置学习条件

学习目标

  • 了解 JS 基础知识；
  • 在 HTML 中集成 JS；
  • 滥用对话函数(Dialogue Function)；
  • 绕过控制流语句(Control Flow Statements)；
  • 探索JS中的压缩文件(Minified Files)。

tips：JS中的Minified Files是指经过压缩处理的JavaScript文件，通常以.min.js为扩展名。这些文件通过移除源代码中的注释、空格、换行符等不必要字符，以及缩短变量和函数名称等方式，减小文件体积，从而加快网页加载速度和提升用户体验。

部署实验机器

image-20250110225718059

在与本文相关的TryHackMe实验房间中，你可以通过单击Start Machine来启动实验虚拟机。虚拟机将会以分屏视图启动。如果实验虚拟机不可见，请使用实验房间页面左上角的蓝色Show Split View按钮。实验计算机系统完全启动后请再等待1-2分钟，以便让实验环境中的自动脚本成功运行。

注意：我们在与本文相关的实验环境中所创建的所有脚本都可以在实验虚拟机桌面上的exercise文件夹中找到，如下所示。如果你发现自己独自创建脚本有困难，可以直接使用实验环境所提供的现成脚本。

image-20250110225728068

让我们开始学习吧。

基本概念

Variables(变量)

变量是允许你在其中存储数据值的容器。与任何其他编程语言一样，JS 中的变量也类似于存储数据的容器。当你把东西存放在桶里时，你还需要给它贴上标签，以便以后可以轻松引用；同样，在JS中，每个变量都有一个名字，当我们在变量中存储某个值时，我们会为其分配一个名称以便稍后引用它。

JS 中声明变量的方式有var 、 let和const三种。var是函数作用域，而let和const都是块作用域，可以更好地控制特定代码块内的变量可见性。

image-20250110230021027

Data Types(数据类型)

在 JS 中，数据类型定义了变量可以保存的值的类型。示例包括string (text),、 number 、 boolean(true/false)、null、undefined和object(对于更复杂的数据还会使用数组arrays或对象objects等类型)。

Functions(函数)

函数表示旨在执行特定任务的代码块。在函数内部，你可以对需要执行类似任务的代码进行分组。例如，你正在开发一个 Web 应用程序，需要在网页上打印学生的成绩。理想的情况是创建一个函数PrintResult(rollNum) ，该函数将会接受用户的试卷号作为参数。

 <script>
        function PrintResult(rollNum) {
            alert("Username with roll number " + rollNum + " has passed the exam");
            // any other logic to display the result
        }

        for (let i = 0; i < 100; i++) {
            PrintResult(rollNumbers[i]);
        }
    </script>

因此，我们不会为所有学生编写相同的打印代码，而是会使用一个简单的函数来打印结果。

Loops(循环)

只要条件为true，循环就会允许你多次运行代码块。 JS 中常见的循环有for 、 while,和do...while ，它们用于执行重复任务，比如遍历项目列表。例如，如果我们要打印 100 个学生的成绩，我们可以通过编写 100 次来调用 PrintResult(rollNum) 函数 100 次，或者我们可以创建一个循环，从 1 迭代到 100 并调用函数PrintResult (rollNum)，如下所示。

        // Function to print student result
        function PrintResult(rollNum) {
            alert("Username with roll number " + rollNum + " has passed the exam");
            // any other logic to the display result
        }

        for (let i = 0; i < 100; i++) {
            PrintResult(rollNumbers[i]); // this will be called 100 times 它会被调用100次
        }

请求-响应周期

在 Web 开发中，请求-响应周期(Request-Response Cycle)是指用户的浏览器（客户端）向 Web 服务器发送请求，然后服务器以被请求的信息进行响应，这些信息可以是网页、数据或其他资源。你可以在这里了解更多相关信息。

答题

什么术语表示允许你多次运行代码块（只要满足给定的条件）？

loop(循环)

image-20250110230215099

JavaScript概述

在本小节中，我们将使用 JS 创建我们的第一个程序。 JS 是一种解释性语言，这意味着JS代码可以直接在浏览器中执行，而无需事先编译。下面是一个 JS 代码示例，它演示了 JS 中的一些关键概念，例如定义变量、理解数据类型、使用控制流语句以及编写简单函数。这些基本构建块有助于创建更加动态和交互式的Web应用程序。如果以下内容现在看起来有点新，请不要担心 - 我们稍后将详细讨论JS中每个关键的概念。

 // Hello, World! program
console.log("Hello, World!");

// Variable and Data Type
let age = 25; // Number type

// Control Flow Statement
if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}

// Function
function greet(name) {
    console.log("Hello, " + name + "!");
}

// Calling the function
greet("Bob");

JS 主要在客户端执行，这使得它直接在浏览器中检查HTML并与HTML进行交互变得很容易。我们将使用Google Chrome Console功能来运行我们的第一个 JS 程序，这使我们无需额外工具即可轻松编写和执行 JS 代码。请按照以下步骤开始：

  • 单击实验虚拟机桌面上的Google Chrome图标打开Google Chrome浏览器。

    image-20250110230329694

  • Chrome 浏览器被打开后，按下Ctrl + Shift + I组合键打开Console或者右键单击页面上的任意位置并选择Inspect 。

    image-20250110230349730

  • 然后，单击Console选项卡。该控制台(console)允许你直接在浏览器中运行 JS 代码，而无需安装额外的软件。

    image-20250110230406429

  • 让我们创建一个简单的 JS 程序，将两个数字相加并显示结果。下面是代码：

    let x = 5;
let y = 10;
let result = x + y;
console.log("The result is: " + result);

  • 在上面的代码中， x和y是保存数字的变量。 x + y是将两个数字相加的表达式，而console.log是用于将结果打印到控制台的函数。

  • 复制上述代码并按下Ctrl + V键以将其粘贴到控制台中。完成粘贴后，按下Enter键开始执行js代码 。你应该可以看到相应的结果显示：

    image-20250110230455771

恭喜！你已经成功创建了第一个 JS 程序。这只是一个开始，当我们在本文中深入研究 JS 时，还有更多的东西需要进行探索。

答题

结合本小节提供的示例，回答以下问题。

如果将 x 的值更改为 10，控制台中的代码输出会是什么？

let x = 10;
let y = 10;
let result = x + y;
console.log("The result is: " + result);

image-20250523155403518

The result is: 20

JavaScript 是编译型(compiled)语言还是解释型(interpreted)语言？

interpreted

image-20250110230556940

在HTML中集成JavaScript

本小节将假设你对 HTML 及其结构有基本的了解。本节将探讨如何将 JS 集成到 HTML 中。通常，JS不会被用于渲染内容；它会与 HTML 和 CSS 协同工作，一起创建动态且可交互的网页。如果你不熟悉 HTML，建议你学习TryHackMe提供的网站如何运作实验房间。将JS集成到HTML中有两种主要的方式：内部集成和外部集成。

内部JavaScript

内部JS是指将JS代码直接嵌入到HTML文档中。此方法更适合初学者，因为它允许他们了解脚本如何与 HTML 进行交互。将JS脚本插入到<script>标签之间。这些标签可以放置在<head>部分内，通常用于在渲染页面内容之前加载需要的脚本，也可以放置在<body>部分内，其中的JS脚本可用于与元素进行交互，当脚本被加载到网页上时。

示例

要创建使用了内部JS的HTML 文档，请右键单击实验虚拟机的Desktop界面并选择Create Document > Empty File 。将文件命名为internal.html 。接下来，右键单击internal.html文件并choose Open with Pluma以在文本编辑器中将其打开。

image-20250110230633932

打开编辑器后，粘贴以下代码：

 <!DOCTYPE html>
<html lang="en">
<head>
    <title>Internal JS</title>
</head>
<body>
    <h1>Addition of Two Numbers</h1>
    <p id="result"></p>

    <script>
        let x = 5;
        let y = 10;
        let result = x + y;
        document.getElementById("result").innerHTML = "The result is: " + result;
    </script>
</body>
</html>

成功粘贴好代码后，单击编辑器页面中的File并选择Save ，这会将文件内容保存到internal.html中 。双击该文件以便在Chrome浏览器中打开它，你将看到以下输出：

image-20250110230647832

在此HTML文档中，我们使用了内部JS，这意味着代码直接放置在 HTML 文件内的<script>标签内。该脚本会执行一个简单的任务：将两个数字（x 和 y）相加，然后将结果显示在网页上。 JS 通过选择一个元素（ <p> 和 id="result"）并使用document.getElementById("result").innerHTML更新其内容来与HTML进行交互 。当浏览器加载此HTML文件时，就会执行这个内部 JS。

外部JavaScript

外部 JS 涉及在以.js文件扩展名为结尾的单独文件中创建和存储 JS 代码。此方法可帮助开发人员保持 HTML 文档整洁且井井有条。外部JS文件可以与HTML文档一起被存储或托管在同一Web服务器上，或者被存储在外部Web服务器（例如云）上。

接下来，我们将使用相同的示例来介绍外部 JS ，但会将 JS 代码分离到不同的文件中。

首先，创建一个名为script.js的新文件，并将其保存在Desktop上，代码内容如下：

let x = 5;
let y = 10;
let result = x + y;
document.getElementById("result").innerHTML = "The result is: " + result;

接下来，创建一个名为external.html的新文件并粘贴以下代码（这里的HTML代码与上一个示例中的基本相同）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External JS</title>
</head>
<body>
    <h1>Addition of Two Numbers</h1>
    <p id="result"></p>

    <!-- Link to the external JS file -->
    <script src="script.js"></script>
</body>
</html>

现在，双击external.html 文件并检查结果。你可以看到有什么不同吗？实际上，输出结果将与前面的示例相同。

image-20250110230716057

我们所做的不同之处是使用<script>标签中的src属性从外部文件加载 JS。当浏览器加载上述页面时，它会查找script.js文件并将其内容加载到HTML文档中。这种方法使我们能够将 JS 代码与 HTML 分开，使代码更有组织性并且更易于维护，尤其是在处理较大的项目时。

验证内部或外部 JS

在对 Web 应用程序进行渗透测试时，检查网站是否在使用内部或外部JS非常重要。通过查看页面的源代码可以轻松地验证这一点。为此，请在Chrome中打开位于exercise文件夹中的external_test.html 页面，右键单击此页面上的任意位置，然后选择View Page Source以查看页面源代码 。

image-20250110230736212

这将显示负责渲染页面的 HTML 代码。在源代码内部，任何直接写在页面上的 JS 都会出现在<script>标签之间，并且不带src属性。如果你看到带有src属性的<script>标签，则表明该页面正在从单独的文件中加载外部 JS。

image-20250110230753750

我们可以看一个实例，在浏览器中访问https://tryhackme.com页面并检查其源代码，以确定网站如何在内部和外部源加载 JS 代码。

image-20250110230807831

答题

哪种类型的 JavaScript 集成会将JS代码直接放置在 HTML 文档中？

Internal-内部集成

哪种JS集成方法更适合跨多个网页重用 JS？

External--外部集成

external_test.html所调用的外部 JS 文件的名称是什么？

tips：部署实验虚拟机，然后在实验机器的桌面文件夹中找到该文件，最后用谷歌浏览器打开该文件并查看源代码页面即可。

image-20250523155548985

image-20250523155744499

thm_external.js

什么属性可以在<script> 标记中链接一个外部 JS 文件？

src

image-20250523155811608

滥用Dialogue Functions(对话函数)

JS 的主要目标之一是提供与用户交互的对话框并动态更新网页内容。 JS 提供了alert 、 prompt和confirm等内置函数来促进这种交互。这些函数允许开发人员显示消息、收集输入并获得用户确认。但是，如果不安全实施，攻击者可能会利用这些JS函数来执行跨站脚本 ( XSS ) 等攻击。

我们将在接下来的练习中使用Google Chrome console 。

Alert函数

Alert(警告)函数会在带有“ OK ”按钮的对话框中显示消息，它通常被用于向用户传达信息或警告提醒。例如，如果我们想向用户显示“ Hello THM ”这条信息，我们可以使用alert("HelloTHM");代码段。如果想尝试这一点，请打开Chrome的控制台，输入alert("Hello THM") ，然后按下Enter键，就可以看到屏幕上会出现一个包含该消息的对话框。

image-20250110231715009

Prompt函数

Prompt(提示)函数会显示一个对话框，要求用户进行输入。当用户单击“ OK ”时，它会返回用户所输入的值(前提是用户确实进行了输入操作)；如果用户选择单击“ Cancel ”，则会返回null。例如，如果要询问用户的姓名，我们可以使用prompt("What is your name?");代码段 。

要测试这一点，请打开 Chrome 控制台并粘贴以下内容，下面的代码段将要求用户输入用户名，然后向他打招呼。

name = prompt("What is your name?");
    alert("Hello " + name);

粘贴上述代码到Chrome 控制台并按下 Enter 键，接下来将出现一个对话框，输入用户名，然后点击ok按钮，之后用户所输入的值将会返回到控制台 并继续被传递给alert函数使用。

image-20250110231741791

Confirm函数

Confirm(确认)函数会显示一个带有消息的对话框和两个按钮："OK "和"Cancel" 。如果用户单击"OK"，则会返回 true；如果用户单击"Cancel"，则会返回 false。例如，如果想要求用户进行确认，我们可以使用confirm("Are you sure?");代码段 。若想尝试一下这样的操作示例，请打开Chrome的控制台，然后输入confirm("Do you want to proceed?")代码段 ，再按下Enter键即可。

image-20250110231811230

这将出现一个对话框，根据用户的单击选项——“ OK ”或“ Cancel ”，最终将返回 true 或 false 值到控制台。

如何恶意利用JS函数

想象一下，你收到一封来自陌生人的电子邮件，其中附有 HTML 文件。该文件看起来无害，但当你打开它时，你会发现它包含了能够破坏你的Web浏览体验的 JS。例如，以下代码段会弹出一个警告框，并且将显示三次“ Hacked ”消息：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hacked</title>
</head>
<body>
    <script>
        for (let i = 0; i < 3; i++) {
            alert("Hacked");
        }
    </script>
</body>
</html>

我们可以在实验虚拟机的桌面上进行操作测试，先创建一个名为invoice.html的文件并粘贴上述代码段内容，然后双击打开该文件，最后就可以看到浏览器会弹出3次警告信息，这将造成不良的用户体验。

image-20250110231847339

想象一下，如果一个恶意行为者向你发送了一个类似的文件，但不是显示三次警告信息，而是将显示警告消息的次数设置为500次。那么你将被迫不断地去关闭警告框。这是一个简单的例子，它可以说明恶意 JS 将会如何被用来制造一些使用户不便或更糟的情况。因此，确保只执行来自可信来源的 JS 文件对于避免这种不良的用户体验至关重要。

答题

结合本小节提供的示例，回答以下问题。

在文件invoice.html中，代码会显示多少次 Hacked 警告？

tips：你需要检查实验虚拟机上的 invoice.html 文件。

image-20250523160338118

5

应该使用哪个 JS 交互元素来显示 要求用户进行输入 的对话框？

Prompt

如果用户输入Tesla，那么在 carName=prompt("What is your car name?")? 的carName变量中会存储什么值？

carName = prompt("What is your car name?");
    alert("Hello " + carName);

image-20250523160745119

image-20250523160811720

Tesla

image-20250523160455979

绕过控制流语句

JS中的控制流是指语句和代码块根据一定条件执行的顺序。 JS 提供了多种控制流结构，例如使用if-else 、 switch语句来做出决策，以及使用循环语句，如for 、 while和do...while循环来重复操作。正确使用控制流可以确保程序能够有效地处理各种情况。

条件语句的实际应用

最常用的条件语句之一是if-else语句，它允许你根据条件的评估结果是true还是false来执行不同的代码块。

为了实际测试这一点，让我们在实验虚拟机的桌面上创建一个文件age.html，然后粘贴以下代码段作为文件的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Age Verification</title>
</head>
<body>
    <h1>Age Verification</h1>
    <p id="message"></p>

    <script>
        age = prompt("What is your age")
        if (age >= 18) {
            document.getElementById("message").innerHTML = "You are an adult.";
        } else {
            document.getElementById("message").innerHTML = "You are a minor.";
        }
    </script>
</body>
</html>

双击上述文件以在 Google Chrome 中将其打开，你将看到以下图像：

image-20250110231937617

在上面的代码中，会出现一个提示框询问你的年龄，如果你的年龄大于或等于18岁，它会显示一条消息：“ You are an adult. ”否则，它会显示不同的消息。此行为是由 if-else 语句控制的，该语句会检查age变量的值并根据不同的条件显示相应的消息。

绕过登录表单

假设开发人员在 JS 中实现了身份验证功能，只有用户名为“ admin ”以及密码与特定值匹配的用户才能登录。如果想查看相关示例的实际效果，请打开实验虚拟机桌面上的练习文件夹(exercises folder)中的login.html文件。

image-20250110231957003

当你双击上述login.html文件并在浏览器中打开它时，它将提示你输入用户名和密码。如果输入正确的凭据，它会显示一条消息确认你已成功登录，如下所示：

image-20250110232007906

答题

结合本小节提供的示例，回答以下问题。

如果你输入的年龄小于 18 岁，会显示什么消息？

tips：打开实验虚拟机上exercises 文件夹中的age.html文件。

image-20250523161057367

image-20250523161116336

You are a minor.

打开实验虚拟机上exercises 文件夹中的login.html文件并查看其源代码，用户admin的密码是什么？

image-20250523161255894

ComplexPassword

image-20250523161314389

探索JS中的Minified Files(压缩文件)

到目前为止，我们已经了解了 JS 的工作原理以及如何阅读它，但是如果文件不可读并且已经被压缩了该怎么办？

JS 中的压缩(Minification)是指通过删除所有不必要的字符（例如空格、换行符、注释，甚至缩短变量名称）来压缩 JS 文件的过程。这有助于减小文件大小并缩短网页的加载时间，尤其是在生产环境中。被缩小的文件可以使代码更加紧凑，更加难以被人类阅读，但是它们的功能与压缩之前仍然完全相同。

类似地，JS中的混淆(obfuscation)通常是指通过添加不必要的代码、将变量和函数重命名为无意义的名称、甚至插入伪代码来使得 JS 更加难以理解。

实例

在实验虚拟机的桌面上创建一个名为hello.html的文件，并粘贴以下 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Obfuscated JS Code</title>
</head>
<body>
    <h1>Obfuscated JS Code</h1>
    <script src="hello.js"></script>
</body>
</html>

然后，再创建另一个名为hello.js的文件并添加以下代码：

function hi() {
  alert("Welcome to THM");
}
hi();

现在，双击hello.html文件以在 Google Chrome 中打开它。此文件被打开后，你将看到一条警告消息“ Welcome to THM ”。

image-20250110232044131

单击OK关闭警告对话框。右键单击页面上的任意位置，然后点击Inspect以打开开发人员工具。在开发人员工具中，导航到Sources选项卡，然后再继续单击hello.js文件以查看其源代码。你会发现这个JS代码很容易访问和查看，如下所示：

image-20250110232057950

JS代码混淆的实际应用

现在，我们将尝试使用在线工具来压缩和混淆(obfuscate) JS 代码。访问obfuscator网站并复制hello.js的内容，然后将其粘贴到这个在线代码混淆网站的对话框中。该在线网站将压缩并混淆我们所粘贴的JS代码，最终将其变成一串乱码，如下图所示：

tips：https://codebeautify.org/javascript-obfuscator

image-20250110232113764

但如果我们告诉你这些乱码字符仍然会是功能齐全的JS代码怎么办？唯一的区别就是它们不是人类可读的表现形式，但是浏览器仍然可以正确地执行它们。这个在线代码混淆网站能够将我们的 JS 代码转换为以下代码：

(function(_0x114713,_0x2246f2){var _0x51a830=_0x33bf,_0x4ce60b=_0x114713();while(!![]){try
{var _0x51ecd3=-parseInt(_0x51a830(0x88))/(-0x1bd3+-0x9a+0x2*0xe37)*(parseInt(_0x51a830(0x94))/
(-0x15c1+-0x2*-0x3b3+0xe5d))+parseInt(_0x51a830(0x8d))/(0x961*0x1+0x2*0x4cb+0x4bd*-0x4)*
(-parseInt(_0x51a830(0x97))/(-0x22b3+0x16e9+0x1*0xbce))+parseInt(_0x51a830(0x89))/
(-0x631+0x20cd+0x8dd*-0x3)*(-parseInt(_0x51a830(0x95))/(-0x8fc+0x161+0x7a1))+-
parseInt(_0x51a830(0x93))/(-0x1c38+0x193+0x1aac)*(parseInt(_0x51a830(0x8e))/
(-0x1*-0x17a6+-0x167e+-0x3*0x60))+-parseInt(_0x51a830(0x91))/(-0x2*-0x1362+-0x4a8*0x5+-0xf73)*
(parseInt(_0x51a830(0x8b))/(-0xb31*0x2+0x493*0x5+0x1*-0x73))+parseInt(_0x51a830(0x8f))/
(-0x257a+-0x1752+0x3cd7)+parseInt(_0x51a830(0x90))/(-0x2244+-0x15f9+0x3849);if(_0x51ecd3
===_0x2246f2)break;else _0x4ce60b['push'](_0x4ce60b['shift']());}catch(_0x38d15c)
{_0x4ce60b['push'](_0x4ce60b['shift']());}}}(_0x11ed,-0x17d11*-0x1+0x2*0x2e27+0x100f*0x17));
function hi(){var _0x48257e=_0x33bf,_0xab1127={'xMVHQ':function(_0x4eefa0,_0x4e5f74)
{return _0x4eefa0(_0x4e5f74);},'FvtWc':_0x48257e(0x96)+_0x48257e(0x92)};_0xab1127[_0x48257e(0x8c)
](alert,_0xab1127[_0x48257e(0x8a)]);}function _0x33bf(_0xb07259,_0x5949fe){var _0x3a386b
=_0x11ed();return _0x33bf=function(_0x4348ee,_0x1bbf73){_0x4348ee=_0x4348ee-(0x11f7+-
0x1*0x680+-0x3a5*0x3);var _0x423ccd=_0x3a386b[_0x4348ee];return _0x423ccd;},_0x33bf
(_0xb07259,_0x5949fe);}function _0x11ed(){var _0x4c8fa8=['7407EbJESQ','\x20THM',
'2700698TTmqXC','10ILFtfZ','190500QONgph','Welcome\x20to',
'4492QOmepo','21623eEAyaP','65XMlsxw','FvtWc','2410qfnGAy','xMVHQ','321PfYXZg',
'8XBaIAe','1946483GviJfa','15167592PYYhTN'];_0x11ed=function(){return _0x4c8fa8;};return _0x11ed();}hi();

单击Copy to Clipboard （上述示意图中突出显示的标记2 ）按钮，如上述在线混淆网站上所示。然后，删除实验虚拟机上的hello.js的当前内容，并将混淆后的代码内容粘贴到原js文件中。

现在我们在 Google Chrome 中重新加载hello.html文件，并在Sources选项卡下再次检查js源代码。你会注意到JS代码现在已经被混淆了，但是它的功能仍然与以前完全相同。

image-20250110232139815

对JS代码进行反混淆

我们还可以使用在线工具对已经被混淆的JS代码进行反混淆(deobfuscate)处理。请访问deobfuscate网站，然后将被混淆的混乱代码粘贴到该网站页面所提供的对话框中。这个网站将为你生成等效的、人类可读的 JS 代码，使得你更加容易理解和分析原始的JS脚本。

tips：https://obf-io.deobfuscate.io/

image-20250110232159239

如上图所示，你现在可以看到我们是如何轻松地反混淆并检索原始JS代码的。

答题

结合本小节提供的示例，回答以下问题。

运行文件hello.html后所显示的警报消息是什么？

image-20250523161709266

Welcome to THM

以下被混淆的代码片段中的age变量的值是多少？

age=0x1*0x247e+0x35*-0x2e+-0x1ae3;

访问：https://obf-io.deobfuscate.io/

image-20250215231606330

21

image-20250523161447699

关于JS的最佳安全实践

本小节概述了评估网站或者为网站编写代码时与JS相关的最佳安全实践。如果你正在开发一个 Web 应用程序，那么你最终可能会在网站上使用 JS。以下实践将帮助你减少网站的攻击面并最大限度地减少网站被攻击的机会。

避免仅依赖客户端验证

JS 的主要功能之一是执行客户端验证。开发人员有时会使用它来验证表单并且完全依赖它，但这不是一个很好的做法。由于用户可以在客户端禁用/操纵JS，因此在服务器端执行验证也是必不可少的(而不能仅依赖于客户端验证)。

避免添加不受信任的库

正如本文前述小节中所讨论的那样，JS 允许你使用script标记内的src属性包含任何其他 JS 脚本。但是你是否考虑过我们所包含的库是否来自于可信来源？恶意攻击者可能会在互联网上上传一系列名称与合法名称相似的库，因此，如果你盲目地包含了一个恶意库，那么你将使得你的 Web 应用程序面临严重的安全威胁。

避免对秘密信息进行硬编码

切勿将API密钥、访问令牌或凭据等敏感数据硬编码(hardcode)到你的 JS 代码中，因为用户可以轻松地检查源代码并获取存储在JS代码中的密码。

// Bad Practice 不良实践
const privateAPIKey = 'pk_TryHackMe-1337';

压缩并混淆你的JS代码

压缩和混淆JS代码可以减少其大小，缩短加载时间，并可以使攻击者更难理解JS代码的逻辑。因此，在企业生产环境中使用JS代码时，请务必压缩(minify)和混淆(obfuscate)JS代码，虽然攻击者最终也可以尝试对其进行逆向工程，但这样攻击者在获得原始JS代码时至少需要经过一些努力。

答题

从任何来源 盲目地在代码中包含 JS 是一个好习惯吗（yea/nay，是/否）？

nay

image-20250110225435154

本文小结

在本文中，我们已经涵盖了关于JS基础的重要主题，例如 JS 基础知识、创建我们的第一个 JS 代码以及将 JS 集成到 HTML 中，而且，我们还讨论了 JS 的其他交互元素，例如调用prompts(提示)等函数以及攻击者如何滥用它们，然后，本文还重点介绍了控制流语句的用法以及如何在 JS 中绕过它们。

此外，我们还探索了如何使用压缩和混淆来处理 JS 文件，并学习了简单的JS代码反混淆方法(使用在线工具)，最后，我们介绍了一些你可以遵循的JS最佳安全实践，以确保你的Web应用程序免受一些不必要的网络威胁。

posted @ 2025-05-23 16:24  Hekeatsll  阅读(147)  评论(0)    收藏  举报