4.Web安全——JavaScript基础

一、JavaScript是什么？

JavaScript 是一种高级的、解释型的编程语言，广泛应用于网页开发和各种软件应用程序中。

二、为什么要学习JavaScript

XSS（跨站脚本攻击）防范

XSS 是一种常见的 Web 安全漏洞，攻击者将恶意脚本（通常是 JavaScript）注入到目标网站中。通过学习 JavaScript，安全人员能够深入理解攻击者是如何构造恶意脚本的。例如，反射型 XSS 可能会利用网站对用户输入参数处理不当，将用户输入的含有 JavaScript 代码的内容直接在页面中输出，从而执行恶意代码。
了解 JavaScript 的语法和特性，可以帮助安全人员识别可能导致 XSS 漏洞的代码模式。比如，在使用document.write()等函数输出用户输入内容时，如果没有进行适当的编码或过滤，就很容易引发 XSS 攻击。

CSRF（跨站请求伪造）攻击理解与防御

虽然 CSRF 主要是利用用户在被攻击网站的登录状态，但 JavaScript 在其中也起到辅助理解的作用。在某些复杂的 CSRF 场景中，攻击者可能会利用 JavaScript 来自动发起伪造请求。
掌握 JavaScript 能够更好地理解攻击者如何利用脚本隐藏攻击意图，比如通过动态创建标签并自动提交来发起伪造请求。并且可以帮助安全人员编写防御代码，如在服务器端验证请求来源和添加 CSRF 令牌等机制。

三、JavaScript基础

1.嵌入方式

1.内嵌式

理论上js可以写在任何第一个地方但是一般写在head标签里或者 body下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联 JavaScript 示例 - 页面头部脚本</title>
    <!-- 在HTML的<head>标签内嵌入JavaScript代码 -->
    <script>
        // 定义一个函数，用于显示警告框
        function showAlert() {
            alert('欢迎来到内嵌式 JavaScript 示例页面！');
        }
    </script>
</head>
<body>
    <h1>这是一个包含内嵌式 JavaScript 的页面</h1>
    <button onclick="showAlert()">点击我弹出警告框</button>
    <!-- 在HTML的<body>标签内也可以继续嵌入JavaScript代码 -->
    <script>
        // 获取页面中的某个元素（这里以获取第一个段落元素为例）
        const paragraph = document.getElementsByTagName('p')[0];
        // 修改段落元素的文本内容
        paragraph.textContent = '这段文本已被 JavaScript 修改。';
    </script>
    <p>初始文本内容。</p>
</body>
</html>

2.外链式

首先新建一个文件类型为.js的文件，然后在该文件中写js语句，通过script标签对引入到html
html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外链式 JavaScript 示例</title>
    <!-- 使用script标签引入外部的JavaScript文件，src属性指定文件路径 -->
    <script src="main.js"></script>
</head>
<body>
    <h1>外链式 JavaScript 演示页面</h1>
    <button onclick="toggleVisibility()">点击切换元素显示状态</button>
    <div id="myElement" style="display: none;">
        这是一个可以被切换显示状态的元素。
    </div>
</body>
</html>

JavaScript:

// 定义一个函数，用于对给定数组进行求和操作
function sumArray(arr) {
    let sum = 0;
    for (let num of arr) {
        sum += num;
    }
    return sum;
}
// 定义一个函数，用于在页面中展示数组元素和求和结果
function displayArrayInfo() {
    const myArray = [1, 2, 3, 4, 5];
    const sum = sumArray(myArray);
    const resultDiv = document.createElement('div');
    resultDiv.textContent = `数组 [${myArray}] 的元素之和为：${sum}`;
    document.body.appendChild(resultDiv);
}

3.行内式

直接书写在标签身上，是一个简写的事件，所以又称之为事件属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内式 JavaScript 示例 - 处理用户输入</title>
</head>
<body>
    <h1>行内式 JavaScript 互动演示页面</h1>
    <input type="text" id="userInput" placeholder="请输入内容">
    <button onclick="if (document.getElementById('userInput').value === '') { alert('您还未输入任何内容哦！'); } else { alert('您输入的内容是：' + document.getElementById('userInput').value); }">点击查看输入情况</button>
</body>
</html>

4.变量

1.变量的定义与声明

在 JavaScript 中，变量是用于存储数据的容器。可以使用var、let和const关键字来声明变量。
var关键字：这是 JavaScript 中最早用于声明变量的方式。例如：var age;，这里声明了一个名为age的变量。var声明的变量会被提升（hoisting）到函数作用域的顶部。这意味着变量可以在声明之前被访问，但其值是undefined。例如：

console.log(age); // 输出undefined
var age = 25;

let关键字：let是 ES6（ECMAScript 2015）引入的新的变量声明方式。与var不同，let声明的变量不存在变量提升。例如：

console.log(name); // 报错：ReferenceError: name is not defined
let name = 'John';

const关键字：用于声明常量。一旦用const声明了一个变量，就不能再重新赋值。例如：

const PI = 3.14159;
PI = 3.14; // 报错：TypeError: Assignment to constant variable.

不过需要注意的是，const声明的对象或数组，其内部的属性或元素是可以被修改的。例如：

const myArray = [1, 2, 3];
myArray.push(4); // 这是可以的，因为没有重新赋值整个数组
console.log(myArray); // 输出[1,2,3,4]

2.变量的命名规则和规范

规则：
变量名必须以字母（a - z或A - Z）、下划线（_）或美元符号（$）开头。
变量名可以包含数字（0 - 9），但不能以数字开头。
变量名不能是 JavaScript 中的保留关键字（如if、else、for、while等），不过可以包含保留关键字作为变量名的一部分。
规范：
通常采用小驼峰命名法（camelCase），即第一个单词小写，后面的单词首字母大写。例如：firstName、userAge。
变量名应该具有描述性，能够清楚地表达变量所存储的数据的含义。

3.变量的数据类型和初始化

数据类型：JavaScript 是一种动态类型语言，变量可以存储多种数据类型的值，包括数字（Number）、字符串（String）、布尔值（Boolean）、对象（Object）、数组（Array）、函数（Function）、null和undefined。
初始化：变量在声明时可以同时进行初始化，赋予初始值。例如：
数字类型：let temperature = 25;
字符串类型：let greeting = ‘Hello, World!’;
布尔类型：let isStudent = true;
对象类型：let person = {name: ‘Alice’, age: 30};
数组类型：let fruits = [‘apple’, ‘banana’, ‘cherry’];
函数类型：let addNumbers = function(x, y) {return x + y;};

4.变量的作用域

全局作用域：在函数外部声明的变量具有全局作用域，在整个 JavaScript 代码中都可以访问（在浏览器环境中，全局变量会成为window对象的属性）。例如：

var globalVariable = 'I am global';
function myFunction() {
    console.log(globalVariable);
}
myFunction(); // 输出I am global

函数作用域：用var或let声明的变量在函数内部有函数作用域。var声明的变量在整个函数内都可以访问，而let声明的变量在其声明后的代码块中可以访问。例如：

function anotherFunction() {
    var innerVar = 'I am inside with var';
    let innerLet = 'I am inside with let';
    console.log(innerVar);
    console.log(innerLet);
}
anotherFunction();
console.log(innerVar); // 报错：ReferenceError: innerVar is not defined
console.log(innerLet); // 报错：ReferenceError: innerLet is not defined

5.数据类型

数值型：number（凡是数字都是数值型，不区分整数和小数）
字符串：string（凡是引号包裹起来的内容全部都是字符串）
布尔：boolean（true、false）
对象类型：object（特殊取值null）
未定义型：undefined
对象类型数组字典

1.判断类型

var a = “iamstring.”;
- 这里使用 var 关键字声明了一个变量 a，并将其初始化为一个字符串值 “iamstring.”。在 JavaScript 中，字符串是一种基本数据类型，用于存储文本数据。
var b = 222;
- 通过 var 声明变量 b，并赋值为数字 222。数字类型（Number）用于表示数值，可以是整数、小数等，在 JavaScript 中也是常见的基本数据类型之一。
var c= [1,2,3];
- 声明变量 c 并初始化为一个数组。数组是一种复合数据类型（在 typeof 操作返回结果中归为 object 类型），它可以存储多个值，这里数组 c 中包含了三个数字元素 1、2 和 3。
var d = new Date();
- 使用 new 关键字创建了一个 Date 类型的对象，并赋值给变量 d。Date 对象用于处理日期和时间相关的操作，在 JavaScript 中，对象类型（Object）是一种复杂的数据结构，它可以包含多个属性和方法，这里 Date 对象就有很多用于获取年、月、日、时、分、秒等的方法，由于它属于对象类型，所以 typeof 操作对其返回 object。
var e = function(){alert(111);};
- 声明变量 e 并赋值为一个匿名函数。函数在 JavaScript 中是一等公民，可以像其他数据类型一样被赋值给变量、作为参数传递给其他函数或者作为函数的返回值等，在 typeof 操作时，返回 function 类型来标识它是函数。
var f = function(){this.name=“22”;};
- 同样是声明变量 f 并赋值为一个匿名函数，只不过这个函数内部使用了 this 关键字，用于在函数执行时设置对象的属性（在不同的调用方式下 this 的指向会有所不同），和变量 e 一样，typeof 操作对其返回 function 类型。
alert(typeof a) ------------> string
- typeof 是 JavaScript 中的操作符，用于判断给定变量的数据类型。当对变量 a（其值为字符串 “iamstring.”）使用 typeof 操作符时，按照 JavaScript 的类型判断规则，会准确返回 string，表明它是字符串类型的数据。
alert(typeof b) ------------> number
- 对于变量 b，其值为数字 222，typeof 操作符正确判断并返回 number，标识它属于数字类型。
alert(typeof c) ------------> object
- 尽管数组在概念上是一种特殊的数据结构，但在 JavaScript 中，typeof 操作符对数组进行判断时返回 object，因为从底层实现角度看，数组也是基于对象的一种形式，通过对象的属性来存储和访问各个元素。
alert(typeof d) ------------> object
- 如前面所述，Date 类型的对象在经过 typeof 操作时，同样返回 object，这是符合 JavaScript 对于对象类型判断的常规结果的。
alert(typeof e) ------------> function
- 当对存储函数的变量 e 使用 typeof 操作符时，会返回 function，清晰地表明该变量存储的是函数类型的数据，方便在代码中根据类型来进行不同的逻辑处理，比如判断是否是函数从而决定是否调用它等。
alert(typeof f) ------------> function
- 同理，变量 f 存储的也是函数，所以 typeof 操作返回 function，用于区分它与其他类型的数据，比如数字、字符串、对象等。

2.数字类型

只有一种数字类型，数字可以是小数，也可以的整数
以0开头默认使用8进制来表示我的这个数字
以0x开头默认使用16进制来表述我的这个数字
如果以-开头默认以负数
如果我带有e：以科学计数法来解析我的这个数字
parseInt(…) 将某值转换成数字，不成功则NaN
parseFloat(…) 将某值转换成浮点数，不成功则NaN
特殊值：
NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。

3.字符类型

只有一种数字类型，数字可以是小数，也可以的整数
以0开头默认使用8进制来表示我的这个数字
以0x开头默认使用16进制来表述我的这个数字
如果以-开头默认以负数
如果我带有e：以科学计数法来解析我的这个数字
parseInt(…) 将某值转换成数字，不成功则NaN
parseFloat(…) 将某值转换成浮点数，不成功则NaN
特殊值：
NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。
obj.length 长度

obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, …) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(
, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项

6.函数

1.JavaScript 函数语法

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数：
var x = myFunction(7, 8); // 调用函数，返回值被赋值给 x
function myFunction(a, b) {
return a * b; // 函数返回 a 和 b 的乘积
}

2.普通函数

// 定义一个函数，用于在控制台打印一条简单的问候语
function sayHello() {
    console.log("Hello!");
}
// 调用函数
sayHello();

3.匿名函数

// 将匿名函数赋值给变量add，该函数用于计算两个数的和
let add = function (num1, num2) {
    return num1 + num2;
};
// 使用变量add调用匿名函数，并将结果存储在变量result中
const result = add(5, 3);
console.log("两数之和为：", result);

4.自执行函数

// 这是一个简单的自执行函数，函数定义后立即执行，在函数内部可以定义变量、执行操作等
(function () {
    var message = "这是自执行函数内部的消息";
    console.log(message);
})();

7.字典

1.基本概念

对象作为字典：JavaScript 中的对象是一组无序的键 - 值对。键（key）是字符串（或者可以转换为字符串的 Symbol 类型），值（value）可以是任意数据类型，包括基本数据类型（如数字、字符串、布尔值等）和复杂数据类型（如数组、对象等）。这和字典的概念很相似，其中键就相当于字典中的词条，值相当于词条的解释。
创建字典对象
- 可以使用对象字面量来创建一个简单的字典，例如：
- ```
  let myDictionary = {
  "key1": "value1",
  "key2": 2,
  "key3": true
  };
```
- 这里创建了一个名为myDictionary的对象，它有三个键 - 值对。“key1"对应的值是"value1”，"key2"对应的值是数字2，"key3"对应的值是布尔值true。
访问字典中的值
- 通过键来访问值。例如，要访问myDictionary中"key1"对应的值，可以使用以下方式：
- ```
  let value = myDictionary["key1"];
  console.log(value); // 输出 "value1"
```
- 另外，还可以使用点（.）语法来访问，但这种方式要求键是合法的标识符（不能包含特殊字符，如空格、连字符等）。例如，如果键是key2，可以写成myDictionary.key2。不过，对于不符合标识符规则的键，就必须使用方括号（[]）语法。

2.字典的操作

1.添加键-值对

可以通过直接赋值的方式添加新的键-值对。例如：

myDictionary["key4"] = "new value";

现在myDictionary就有了一个新的键 - 值对"key4": “new value”。

2.修改值

要修改字典中某个键对应的值，只需重新赋值即可。例如，修改"key2"对应的值：

myDictionary["key2"] = 3;

此时myDictionary中的"key2"的值就从2变成了3。

3.删除键-值对

可以使用delete关键字来删除键-值对。例如：

delete myDictionary["key3"];

执行这个操作后，myDictionary中就不再有"key3"这个键和对应的true值了。

3.遍历字典

使用for…in循环
- for…in循环可以用来遍历对象的可枚举性（在字典中就是键）。例如：
- ```
  for (let key in myDictionary) {
    console.log(key + ": " + myDictionary[key]);
  }
```
- 这个循环会依次输出字典中的每个键 - 值对。在每次迭代中，key变量会被赋值为当前的键，然后通过myDictionary[key]可以访问到对应的值。

4.使用 ES6 的Map对象作为字典（进阶用法）

Map对象简介
- Map是 ES6 引入的一种新的数据结构，它和普通对象类似，也是用于存储键 - 值对。但Map对象的键可以是任意数据类型（包括对象、函数等），而不像普通对象的键只能是字符串（或 Symbol）。
创建Map对象
- 可以使用new关键词来创建Map对象。例如：
- ```
  let myMap = new Map();
  myMap.set("key1", "value1");
  myMap.set(2, "value2");
  myMap.set({name: "John"}, "value3");
```
- 这里先创建了一个Map对象myMap，然后通过set方法添加了三个键 - 值对。注意其中一个键是一个对象{name: “John”}。
访问Map中的值
- 使用get方法来访问Map中的值。例如：

let value = myMap.get("key1");
console.log(value); // 输出 "value1"

操作Map对象的方法
- has方法用于检查Map中是否存在某个键。例如：
- ```
  console.log(myMap.has("key1")); // 输出 true
```
- delete方法用于删除Map中的键 - 值对。例如：
- ```
  myMap.delete(2);
```
- size属性可以获取Map中键 - 值对的数量。例如：
- ```
   console.log(myMap.size); 		
```