网安快速入门之JS基础
JS定义
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。它以其作为开发Web页面的脚本语言而闻名，但也被广泛应用于非浏览器环境中。JavaScript是一种基于原型编程、多范式的动态脚本语言，支持面向对象、命令式、声明式和函数式编程范式。简言而知： JS -> 利用脚本，让网站动起来
基本语法
var 定义一个全局变量，如：
var a = 123;
var x = 10;
console.log(x); // 输出 10
if (true) {
var y = 20;
}
console.log(y); // 输出 20，因为 y 的作用域是全局的
let 定义一个块级变量，学过编程的都知道局部变量，这个就差不多相当于局部变量的使用。如：
let b = 123;
let x = 10;
console.log(x); // 输出 10
if (true) {
let y = 20;
console.log(y); // 输出 20
}
console.log(y); // 报错 ReferenceError: y is not defined
//这是因为y在逻辑语句里面定义的，不能在逻辑语句外面使用该变量
function 定义一个函数 ，在js里面，可以拥有0个或多个函数，定义的函数相当于功能的封装，需要使用的时候就调用它，非常方便。
定义格式为：
function 函数名称（形参）{
功能语句
}
// 函数声明
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("Alice")); // 输出 "Hello, Alice!"
// 函数提升
console.log(add(3, 4)); // 输出 7
function add(a, b) {
return a + b;
}
除了用 function 定义函数，还可以通过函数表达式定义匿名函数并赋值给变量。例如：
const greet = function(name) {
return `Hello, ${name}!`;
};
console.log(greet("Bob")); // 输出 "Hello, Bob!"
JavaScript BOM（浏览器对象模型）
BOM是一组与浏览器窗口交互的接口，它允许 JavaScript 操作浏览器的各个部分，除了网页本身的内容（DOM）。BOM 主要用于控制浏览器的窗口、历史记录、导航、客户端信息等。在后面的XSS漏洞挖掘过程，经常使用这个发现XSS漏洞，简而言之，BOM 提供了对浏览器环境的访问权限，使 JavaScript 能够与浏览器进行交互。
1. **window.open()**
作用：打开新的浏览器窗口或标签页，通常用来打开一个新的网页或执行某些任务，后面的XSS攻击通过弹窗检测是否存在XSS。
window.open(url, 新窗口的名称, 新窗口的特性);
示例：
// 打开一个新的空白窗口
window.open('https://www.test.com', '_blank', 'width=500,height=300');
2. **window.close()**
作用：关闭当前浏览器窗口。如果窗口是 window.open() 打开的，那么可以关闭窗口。如果窗口是由用户打开的，则无法关闭。
window.close();
例如：
// 关闭窗口
window.close();
注意：window.close() 只会关闭由 window.open() 打开的窗口。
3. **window.location**
作用：location 对象用于操作浏览器的地址栏，可以用来获取 URL 或修改 URL，从而实现跳转。
常用属性和方法：
- `window.location.href`：获取或设置当前页面 URL。
- `window.location.protocol`：获取当前协议（如 `http:` 、 `https:`）。
- `window.location.host`：获取当前主机部分（包含域名、端口号）。
- `window.location.pathname`：获取当前页路径部分。
- `window.location.search`：获取当前 URL 的查询字符串（ `?` 后面的部分）。
- `window.location.hash`：获取当前哈希部分（ `#` 后面的部分）。
- `window.location.reload()`：重新加载页面。
- `window.location.replace()`：替换当前页面，避免用户点击浏览器的“后退”按钮返回。
// 获取当前页面的完整 URL
console.log(window.location.href);
// 跳转到新的 URL
window.location.href = "https://www.test.com";
4. **window.location.href**
作用：href 是 location 对象的一个属性，它表示完整 URL。可以用来获取或设置当前的 URL，达到页面跳转的目的。
****获取当前页面的 URL：
console.log(window.location.href);
设置页面跳转：
window.location.href = "https://www.test.com";
// 跳转到指定的页面
window.location.href = "https://www.example.com";
5. **window.alert()**
作用：弹出警告框，用于显示消息给用户。警告框有“确定”按钮，用户点击才会关闭。
window.alert("xss");
6. **window.confirm()**
作用：弹出一个框，显示消息并有“确定”和“取消”按钮。点击“确定”是 true，点击“取消”返 false。
let result = window.confirm("xss");
7. **window.prompt()**
作用：弹出一个提示框，允许用户输入。提示框会显示输入框、“确定”按钮、“取消”按钮。返回值为用户输入，如果用户点击“取消”，返回 null。
let a = window.prompt(xss);
JS DOM（文档对象模型）
DOM（Document Object Model） 是浏览器提供的一个接口，它将网页中的 HTML 或 XML 文档结构表示为一棵对象树。DOM 是浏览器将网页转化为 JavaScript 可以操作的对象结构的方式，使得开发者能够通过 JavaScript 动态地访问和修改网页的内容、结构和样式。通过 DOM，JavaScript 可以修改网页上的元素、事件以及整个页面的结构。
**document.getElementById(id)**
作用：通过 id 获取唯一的元素。返回指定 id 的元素对象。如果没有元素，则返回 null。
let element = document.getElementById('myElement');
**document.getElementsByTagName(tagName)**
作用：通过标签名获取页面所有元素，返回 HTMLCollection，它是一个动态的集合。
let divs = document.getElementsByTagName('div');
**document.getElementsByName(name)**
作用：通过 name 获取所有具有指定 name 属性的元素，返回一个 NodeList，它是动态集合。
var elements = document.getElementsByName('myName');
**document.getElementsByClassName(className)**
作用：通过类名获取所有具有指定类的元素，返回一个 HTMLCollection，它是动态集合。
var elements = document.getElementsByClassName('myClass');
**document.querySelectorAll(selector)**
作用：通过 CSS 选择器获取所有匹配的元素，返回 NodeList，它是动态的集合。
var elements = document.querySelectorAll('.myClass');
**document.cookie**
作用：获取文档所有 cookie 字符串。
var cookies = document.cookie;
console.log(cookies); // 输出所有 cookies
更改元素方法
**getAttribute(attributeName)**
作用：获取指定元素的属性值。
let element = document.getElementById('myElement');
let attributeValue = element.getAttribute('href');
**innerHTML**
作用：获取或者设置元素的 HTML 内容，包含标签、文本。
// 获取
let content = element.innerHTML;
// 设置
element.innerHTML = '新内容
';
**innerText**
作用：获取或设置元素的文本内容，不包括 HTML 标签。
// 获取
let text = element.innerText;
// 设置
element.innerText = '新文本';
**style**
作用：通过 style 属性访问和修改元素的行内样式。
// 设置样式
element.style.color = 'red';
element.style.backgroundColor = 'yellow';
// 获取样式
let color = element.style.color;
**setAttribute(attributeName, value)**
作用：设置指定元素属性值。如果该属性不存在，则创建新的属性。
element.setAttribute('class', 'newClass');
**value**
作用：获取或设置表单元素的值，通常用于 input、select、textarea 等表单控件。
let input = document.getElementById('myInput');
// 获取值
let inputValue = input.value;
// 设置值
input.value = 123;
JS AJAX
AJAX 是一种可以让网页在不重新加载的情况下，与服务器交换数据并更新部分网页内容的技术。它通常使用 XMLHttpRequest 对象来实现异步的 HTTP 请求。AJAX 使得网页能够部分更新内容，提高用户体验。
使用到XMLHttpRequest对象：
方法：
open
send
setRequestHeader
1. **open(method, url, async)**
作用：初始化请求，指定请求方式（GET、POST、REQUEST 等）、请求 URL 是否异步执行。
- `method`：HTTP 请求方法（如 `GET`、`POST`、`PUT`、`DELETE` 等）。
- `url`：请求的 URL。
- `async`：布尔值，指定请求是否异步，默认为 `true`。如果为 `false`，为同步请求。
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
2. **send(data)**
作用：发请求，如果请求是 GET，则不需传递数据；如果是 POST 或其他方法，则可以通过此参数传递数据（通常为字符串或 FormData 对象）。
data：发给服务器的数据，对于 GET 请求为 null，对于 POST 请求是表单数据、字符串。
// 使用 GET 请求
xhr.send();
// 使用 POST 请求
var data = JSON.stringify({ name: 'John', age: 30 });
xhr.send(data);
3. **setRequestHeader(header, value)**
作用：设置请求头。这个方法通常调用 open() 后、调用 send() 前使用。它允许设 HTTP 请求头，如 Content-Type、Authorization 等，告诉如何处理请求内容。
- `header`：请求头的名。
- `value`：请求头值。
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer token');
xhr.send(JSON.stringify({ name: 'John', age: 30 }));
实战案例：
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","/admin/admin_manage.asp?act=add",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("admin=admin&password=admin666&password3=admin666&button=提交数据");