网安快速入门之JS基础

举报
天启互联网工作室 发表于 2025/01/21 23:32:25 2025/01/21
【摘要】 网安快速入门之Js基础

网安快速入门之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,从而实现跳转。

常用属性和方法

  • location.href:获取或设置当前页面 URL。
  • location.protocol:获取当前协议(如 http:https:)。
  • location.host:获取当前主机部分(包含域名、端口号)。
  • location.pathname:获取当前页路径部分。
  • location.search:获取当前 URL 的查询字符串( ? 后面的部分)。
  • location.hash:获取当前哈希部分( # 后面的部分)。
  • location.reload():重新加载页面。
  • location.replace():替换当前页面,避免用户点击浏览器的后退按钮返回。

// 获取当前页面的完整 URL
console.log(window.location.href);
// 跳转到新的 URL
window.location.href = "https://www.test.com";

4. window.location.href

作用hreflocation 对象的一个属性,它表示完整 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. getElementById(id)

作用:通过 id 获取唯一的元素。返回指定 id 的元素对象。如果没有元素,则返回 null

let element = document.getElementById('myElement');

  1. getElementsByTagName(tagName)

作用:通过标签名获取页面所有元素,返回 HTMLCollection,它是一个动态的集合。

let divs = document.getElementsByTagName('div');

  1. getElementsByName(name)

作用:通过 name 获取所有具有指定 name 属性的元素,返回一个 NodeList,它是动态集合。

var elements = document.getElementsByName('myName');

  1. getElementsByClassName(className)

作用:通过类名获取所有具有指定类的元素,返回一个 HTMLCollection,它是动态集合。

var elements = document.getElementsByClassName('myClass');

  1. querySelectorAll(selector)

作用:通过 CSS 选择器获取所有匹配的元素,返回 NodeList,它是动态的集合。

var elements = document.querySelectorAll('.myClass');

  1. cookie

作用:获取文档所有 cookie 字符串。

var cookies = document.cookie;
console.log(cookies); // 输出所有 cookies

更改元素方法

  1. getAttribute(attributeName)

作用:获取指定元素的属性值。

let element = document.getElementById('myElement');
let attributeValue = element.getAttribute('href');

  1. innerHTML

作用:获取或者设置元素的 HTML 内容,包含标签、文本。

// 获取
let content = element.innerHTML;
// 设置
element.innerHTML = '<p>新内容</p>';

  1. innerText

作用:获取或设置元素的文本内容,不包括 HTML 标签。

// 获取
let text = element.innerText;
// 设置
element.innerText = '新文本';

  1. style

作用:通过 style 属性访问和修改元素的行内样式。

// 设置样式
element.style.color = 'red';
element.style.backgroundColor = 'yellow';
// 获取样式
let color = element.style.color;

  1. setAttribute(attributeName, value)

作用:设置指定元素属性值。如果该属性不存在,则创建新的属性。

element.setAttribute('class', 'newClass');

  1. value

作用:获取或设置表单元素的值,通常用于 inputselecttextarea 等表单控件。

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 请求方法(如 GETPOSTPUTDELETE 等)。
  • 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-TypeAuthorization 等,告诉如何处理请求内容。

  • 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=提交数据");

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。