网安快速入门之JS基础
2026-10-23 18:39:07
网安快速入门之JS基础
JavaScript（简称“JS”）是一种轻量级、解释型或即时编译型的编程语言，以函数优先为特点。它最初作为开发Web页面的脚本语言而闻名，但如今也被广泛应用于非浏览器环境。JavaScript是一种基于原型编程、多范式的动态脚本语言，支持面向对象、命令式、声明式和函数式编程范式。简而言之，JS通过脚本让网站动起来。
基本语法
var：用于定义一个全局变量。例如：
var a = 123;var x = 10;console.log(x); // 输出 10if (true) { var y = 20;}console.log(y); // 输出 20，因为 y 的作用域是全局的let：用于定义一个块级变量，类似于局部变量。例如：
let b = 123;let x = 10;console.log(x); // 输出 10if (true) { let y = 20; console.log(y); // 输出 20}console.log(y); // 报错 ReferenceError: y is not defined// 这是因为y在逻辑语句里面定义的，不能在逻辑语句外面使用该变量function：用于定义一个函数。在JS中，函数可以拥有0个或多个参数，定义的函数相当于功能的封装，需要使用的时候就调用它。例如：
// 函数声明function greet(name) { return `Hello, ${name}!`;}console.log(greet("Alice")); // 输出 "Hello, Alice!"// 函数提升console.log(add(3, 4)); // 输出 7function 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漏洞挖掘过程中，经常使用BOM来发现XSS漏洞。简而言之，BOM提供了对浏览器环境的访问权限，使JavaScript能够与浏览器进行交互。
window.open()：打开新的浏览器窗口或标签页。例如：
// 打开一个新的空白窗口window.open('https://www.test.com', '_blank', 'width=500,height=300');window.close()：关闭当前浏览器窗口。例如：
// 关闭窗口window.close();注意：window.close()只会关闭由window.open()打开的窗口。
window.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()：替换当前页面，避免用户点击浏览器的“后退”按钮返回。
示例：
// 获取当前页面的完整 URLconsole.log(window.location.href);// 跳转到新的 URLwindow.location.href = "https://www.test.com";window.alert()：弹出警告框，用于显示消息给用户。警告框有“确定”按钮，用户点击才会关闭。例如：
window.alert("xss");window.confirm()：弹出一个框，显示消息并有“确定”和“取消”按钮。点击“确定”返回true，点击“取消”返回false。例如：
let result = window.confirm("xss");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 = '<p>新内容</p>';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(method, url, async)：初始化请求，指定请求方式（GET、POST、REQUEST等）、请求URL是否异步执行。例如：
var xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true);send(data)：发送请求。如果请求是GET，则不需传递数据；如果是POST或其他方法，则可以通过此参数传递数据（通常为字符串或FormData对象）。例如：
// 使用 GET 请求xhr.send();// 使用 POST 请求var data = JSON.stringify({ name: 'John', age: 30 });xhr.send(data);setRequestHeader(header, value)：设置请求头。这个方法通常在调用open()后、调用send()前使用。它允许设置HTTP请求头，如Content-Type、Authorization等，告诉服务器如何处理请求内容。例如：
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=提交数据");
热门标签
