网安快速入门之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，从而实现跳转。
常用属性和方法：
owindow.location.href：获取或设置当前页面 URL。
owindow.location.protocol：获取当前协议（如 http: 、 https:）。
owindow.location.host：获取当前主机部分（包含域名、端口号）。
owindow.location.pathname：获取当前页路径部分。
owindow.location.search：获取当前 URL 的查询字符串（ ? 后面的部分）。
owindow.location.hash：获取当前哈希部分（ # 后面的部分）。
owindow.location.reload()：重新加载页面。
owindow.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 可以修改网页上的元素、事件以及整个页面的结构。
1.document.getElementById(id)
作用：通过 id 获取唯一的元素。返回指定 id 的元素对象。如果没有元素，则返回 null。
let element = document.getElementById('myElement');
2.document.getElementsByTagName(tagName)
作用：通过标签名获取页面所有元素，返回 HTMLCollection，它是一个动态的集合。
let divs = document.getElementsByTagName('div');
3.document.getElementsByName(name)
作用：通过 name 获取所有具有指定 name 属性的元素，返回一个 NodeList，它是动态集合。
var elements = document.getElementsByName('myName');
4.document.getElementsByClassName(className)
作用：通过类名获取所有具有指定类的元素，返回一个 HTMLCollection，它是动态集合。
var elements = document.getElementsByClassName('myClass');
5.document.querySelectorAll(selector)
作用：通过 CSS 选择器获取所有匹配的元素，返回 NodeList，它是动态的集合。
var elements = document.querySelectorAll('.myClass');
6.document.cookie
作用：获取文档所有 cookie 字符串。
var cookies = document.cookie; console.log(cookies); // 输出所有 cookies
更改元素方法
1.getAttribute(attributeName)
作用：获取指定元素的属性值。
let element = document.getElementById('myElement'); let attributeValue = element.getAttribute('href');
2.innerHTML
作用：获取或者设置元素的 HTML 内容，包含标签、文本。
// 获取 let content = element.innerHTML; // 设置 element.innerHTML = '
新内容
';
3.innerText
作用：获取或设置元素的文本内容，不包括 HTML 标签。
// 获取 let text = element.innerText; // 设置 element.innerText = '新文本';
4.style
作用：通过 style 属性访问和修改元素的行内样式。
// 设置样式 element.style.color = 'red'; element.style.backgroundColor = 'yellow'; // 获取样式 let color = element.style.color;
5.setAttribute(attributeName, value)
作用：设置指定元素属性值。如果该属性不存在，则创建新的属性。
element.setAttribute('class', 'newClass');
6.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 是否异步执行。
omethod：HTTP 请求方法（如 GET、POST、PUT、DELETE 等）。
ourl：请求的 URL。
oasync：布尔值，指定请求是否异步，默认为 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 等，告诉如何处理请求内容。
oheader：请求头的名。
ovalue：请求头值。
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 }));
实战案例：
varxmlhttp; 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=提交数据");
原文始发于微信公众号（天启互联网实验室）：网安快速入门之JS基础
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论