红队渗透笔记之红队前端语言基础

文章目录

HTML基础
- HTML语法
- 常用标签介绍
- - <！DOCTYPE>标签
  - < head> 标签
  - < title> 标签
  - < body> 标签
  - < div>标签
  - < a> 标签
- HTML 文件路径
- - 文件引入
  - - 绝对文件路径
    - 相对路径
CSS基础
- CSS语法
- CSS 选择器
- - CSS 元素选择器
  - CSS id 选择器
  - CSS 类选择器
  - CSS 通用选择器·通用选择器（*）选择页面上的所有的 HTML 元素。
Javascript基础
- Javascript基本结构
- Javascript核心语法
- - 变量的赋值
  - 逻辑控制语句
  - - 条件语句
    - - if-else语句
      - switch语句
    - 循环语句
    - 中断语句
    - - break跳出当前循环，即中断循环
      - continue跳过当前循环
  - 操作HTML（基于DOM）
  - - 查找 HTML 元素
    - 改变 HTML 元素
    - 添加和删除元素
    - 添加事件处理程序
  - 操作浏览器（基于BOM）
  - Javascript内容输出
  - - Javascript自定义函数
    - 函数的调用的方式

了解前端语言能够是我们更好的理解和挖掘前端漏洞，在社工过程中也可以利用前端技术构建水坑攻击或者是钓鱼攻击。

前端页面的设计思路通常会把页面分为三个层次，即：结构层(HTML)、表示层(CSS)、行为层(Javascript)。如果把前端页面比作一个完整的人，那么Html就是人的肉身，CSS就是皮相、Javascript就是灵魂，一个人不论是失去了灵魂还是皮相都不能称之为一个健康的人，同样HTML，CSS，JavaScript对于前端而言也是同样重要。

1、什么是HTML（超文本标记语言 Hyper Text Markup Language），HTML 是用来描述网页的一种语言。
2、CSS(层叠样式表 Cascading Style Sheets),样式定义如何显示 HTML 元素，语法为：selector {property：value} (选择符 {属性：值})
3、JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行

HTML基础

HTML是目前世界上，网络领域应用最为广泛的一种语言，也是构成文档的主要语言。HTML文档是由HTML标签组成的描述性文本，HTML标签可以标识文字、图形·、动画、声音、表格、链接等。

HTML语法

在了解HTML语言基础之前需要先明确几点内容

1、网页可以理解成由元素和标签组成的容器。

2、每个标签都是成对组成，第一个标签（如）表示表示的开始位置，而第二个标签（如）表示标识的结束位置。标签包含和标签，而标签是并列排行。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>//文档元信息
</head>
<body>//网页内容主体
</body>
</html>

3、所有标签都包含在"<“和”>"起止标识符中。在HTML文档中，绝大多数元素都有起始标签和结束标签，在起始标签和结束标签之间包含的是元素主体。

例如：<body>和</body>中间包含的就是网页内容主体。

4、起始标签包含元素的名称，以及可选属性，也就是说元素的名称和属性都必须在起始标签中。结束标签以反斜杠开始，然后附加上元素名称。

例如：<a href="http://www.baidu.com" target="_self">点击一下，你就知道</a>

少数元素的属性也不可能不包含属性值，仅包含一个属性名称。这类属性从逻辑上讲，可以将其视为布尔值，如果标志存在，则为true，否则为false。

如：

这个段落应该被隐藏。

5、标签可相互嵌套，形成文档结构。HTML文档所有信息必须包含在中，所有文档元信息应包含在子标签中，而HTML传递信息和网页显示内容应包含在子标签中。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>红队笔记之红队前端语言基础</title>
</head>
<body><div style="color: brown;"><p>红队笔记之红队前端语言基础</p></div>
</body>
</html>

常用标签介绍

<！DOCTYPE>标签

它是用来告知 Web 浏览器页面使用了哪种 HTML 版本

< head> 标签

是所有头部元素的容器，必须包含文档的标题（title），可以包含脚本、样式、meta 信息以及其他更多的信息

< title> 标签

作为< head>中唯一要包含的标签，说明这个网页的标题，在红队的信息收集过程可以通过判断标签基本判断网站的业务是什么。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>红队笔记之红队前端语言基础</title>
</head>
<body></body>
</html>

< body> 标签

HTML的主体，包含文档的所有内容，比如文本、超链接、图像、表格和列表等等

< div>标签

div可以将一份文档风格为独立的区域，它可以用作网页严格的组织工具，通常使用id 或 class来标记div这样更加容易统识别和操作div的属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>红队笔记之红队前端语言基础</title>
</head>
<body>
<div id = "div1" style="background-color: blue;height: 400px;width: 400px;padding: 10px"><a href="http://www.baidu.com" target="_self">蓝队</a>
</div>
<div id = "div2" style="background-color: red;height: 400px;width: 400px;padding: 10px"><a href="http://www.baidu.com" target="_self">红队</a>
</div>
</body>
</html>

< a> 标签

用于从一个页面链接到另一个页面。元素最重要的属性是 href 属性，它指示链接的目标

<a href="http://https://blog.csdn.net/CoreNote"></a>

路径	描述
< img src=“picture.jpg”>	picture.jpg 位于与当前网页相同的文件夹
< img src=“images/picture.jpg”>	picture.jpg 位于当前文件夹的 images 文件夹中
< img src="/images/picture.jpg">	picture.jpg 当前站点根目录的 images 文件夹中
< img src="…/picture.jpg">	picture.jpg 位于当前文件夹的上一级文件夹中

HTML 文件路径

文件路径描述了网站文件夹结构中某个文件的位置。

文件路径会在链接外部文件时被用到：

网页
图像
样式表
JavaScript

文件引入

绝对文件路径

绝对文件路径是指向一个因特网文件的完整 URL：

实例

<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">

标签以及 src 和 alt 属性在 HTML 图像这一章做了讲解。

相对路径

相对路径指向了相对于当前页面的文件。

在本例中，文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件：

实例

<img src="/images/picture.jpg" alt="flower">

在本例中，文件路径指向了位于当前文件夹中 images 文件夹里的一个文件：

实例

<img src="data:images/picture.jpg" alt="flower">

在本例中，文件路径指向了位于当前文件夹的上一级文件夹中 images 文件夹里的一个文件：

实例

<img src="../images/picture.jpg" alt="flower">

更多内容参考w3school

CSS基础

因为HTML 语言的设计目的是描述网页的内容，其最初并不具备描述样式的能力，在HTML 3.2 规范后，程序员们可以通过标签或者属性来设置文本的样式，这也正是噩梦的开始，因为针对大型网站来讲修改每个页面，每个标签的样式及其繁琐和让人崩溃，为了解决这个问题，万维网联盟（W3C）创建了 CSS。css通过选择器的方式有效解决程序员每个标签改属性的麻烦。

CSS语法

CSS 规则集（rule-set）由选择器和声明块组成：

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

多条 CSS 声明用分号分隔，声明块用花括号括起来。

如下，让所有

元素都将居中对齐，并带有红色文本颜色：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p {color: red;text-align: center;}</style>
</head>
<body>
<div><p>红队笔记之红队前端语言基础</p>
</div>
</body>
</html>

CSS 选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

CSS 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

如让页面上的所有

元素都将居中对齐，并带有红色文本颜色

p {text-align: center;color: red;
}

CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

如让 id=“para1” 的 HTML 元素居中对齐，并带有红色文本颜色

#para1 {text-align: center;color: red;
}

CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

如让带有 class=“center” 的 HTML 元素居中对齐，并带有红色文本颜色

.center {text-align: center;color: red;
}

CSS 通用选择器·通用选择器（*）选择页面上的所有的 HTML 元素。

如让每个 HTML 元素居中对齐，并带有红色文本颜色

* {text-align: center;color: blue;
}

更多内容参考w3school

Javascript基础

JavaScript是一种解释性脚本语言，插入 HTML 页面后，可以为页面添加交互行为，Javascript由三大核心组成，这些核心赋予了Javascript不同类型的能力。

ECMAScript 描述了该语言的语法和基本对象

DOM 描述了处理网页内容的方法和接口

BOM 描述了与浏览器进行交互的方法和接口

Javascript基本结构

在Html文本中添加< script>标签即可声明一段JavaScript代码，可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载即可。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script type="text/javascript"><!--JavaScript 语句--></script >
</body>
</html>

Javascript核心语法

变量的赋值

JavaScript是弱类型语言，其没有类似Java等强类型语言的类型要求，其统一使用var来声明变量，例如

var name = "1"; //string
var number = 1;  //int
var array = [1,2,3,4,5,6];  //array

逻辑控制语句

条件语句

if-else语句

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script type="text/javascript">if (条件) {//条件为 true 时执行的代码块} else { // 条件为 false 时执行的代码块}</script >
</body>
</html>

switch语句

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script type="text/javascript">switch(表达式) {case n:代码块break;case n:代码块break;default:默认代码块}</script >
</body>
</html>

循环语句

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script type="text/javascript">for (语句 1; 语句 2; 语句 3) {要执行的代码块}</script >
</body>
</html>

中断语句

break跳出当前循环，即中断循环

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script type="text/javascript">for(i=0;i<=5;i++){if(i==3){break;}document.write("这个数字是："+i+"<br/>");}</script >
</body>
</html>

continue跳过当前循环

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script type="text/javascript">for(i=0;i<=5;i++){if(i==3){continue;}document.write("这个数字是："+i+"<br/>");}</script >
</body>
</html>

操作HTML（基于DOM）

查找 HTML 元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

改变 HTML 元素

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

添加事件处理程序

方法	描述
document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

例、改变HTML元素属性（配合xss+钓鱼使用）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>红队笔记之红队前端语言基础</title>
</head>
<body>
<li id='old'><a href="http://www.w3school.com.cn/index.html">旧的节点</a>
</li>
<script>document.getElementById("old").innerHTML = "<a href=\"http://blog.csdn.net/CoreNote\">旧的节点</a>";
</script>
</body>
</html>

例、添加元素（配合xss+钓鱼使用）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>红队笔记之红队前端语言基础</title>
</head>
<body>
<div id="main"><p>红队笔记之红队前端语言基础</p>
</div>
<script>// 利用createElement创建一个p标签var add = document.createElement('a');// 给p标签设置属性add.innerHTML = "<a href=\"http://blog.csdn.net/CoreNote\">红队笔记之红队前端语言基础</a>";// 获取id为main的元素var main = document.getElementById('main');// 将新建的p标签添加到id为main的元素中main.appendChild(add);
</script>

4、监听浏览器事件并做出处理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>红队笔记之红队前端语言基础</title>
</head>
<body>
<button id="myBtn">别点我</button>
<script>//监听id为myBtn的点击动作，并执行函数document.getElementById("myBtn").addEventListener("click", attack);function attack() {//这里为你的攻击代码演示方便这里以死循环alert代替var arrays = [1,2,3];for (var i=0;i<arrays.length;){window.alert("别点我")}}
</script>
</body>
</html>

操作浏览器（基于BOM）

打开某页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>红队笔记之红队前端语言基础</title>
</head>
<body>
<script>// 以弹出方式打开网页（一般会被浏览器拦截）window.open("http://blog.csdn.net/CoreNote")// 直接在当前打开页面location.href="http://blog.csdn.net/CoreNote"</script>
</body>
</html>

获取网站cookie

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>红队笔记之红队前端语言基础</title>
</head>
<body>
<script>document.cookie = "初始化一个cookie，正常网站自己生成"var cookie = document.cookie;// 此处使用alert进行演示，实战中可能会将cookie发送给攻击者window.alert(cookie)
</script>
</body>
</html>

Javascript内容输出

输出大多情况用于程序的调试，jsp的输出方式主要有三种

//当前窗口弹出
window.alert("具体参数")
//在doc写入
document.write("具体参数")
//在控制台输出（F12）
console.log("具体参数")

Javascript自定义函数

函数是被设计为执行特定任务的代码块。函数一般在被调用时被执行

函数的基本语法

1、JavaScript 函数通过 function 关键词进行定义，

2、function 后是我们定义的函数名

3、函数名后的 ()为调用函数需要传入的参数，当不需要参数时括号也可为为空

function name(参数 1, 参数 2, 参数 3) {// 要执行的代码
}

函数的调用的方式

1、当事件发生时（当用户点击按钮时）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>红队笔记之红队前端语言基础</title>
</head>
<body>
<button id="myBtn" onclick="attack()">别点我</button>
<script>function attack() {//这里为你的攻击代码演示方便这里以死循环alert代替var arrays = [1,2,3];for (var i=0;i<arrays.length;){window.alert("别点我")}}
</script>
</body>
</html>

2、当 JavaScript 代码调用时

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>红队笔记之红队前端语言基础</title>
</head>
<body>
<button id="myBtn">别点我</button>
<script>//监听id为myBtn的点击动作，并执行函数document.getElementById("myBtn").addEventListener("click", attack);function attack() {//这里为你的攻击代码演示方便这里以死循环alert代替var arrays = [1,2,3];for (var i=0;i<arrays.length;){window.alert("别点我")}}
</script>
</body>
</html>

3、自调用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>红队笔记之红队前端语言基础</title>
</head>
<body>
<button id="myBtn" onclick="attack()">别点我</button>
<script>(function(/*这里是参数的形参*/){var arrays = [1,2,3];for (var i=0;i<arrays.length;){window.alert("别点我")}})(/*这里实际调用时需要传的实参*/)
</script>
</body>
</html>

本文只为技术交流。为了您和您家人的幸福，请不要利用文中技术在用户未授权情况下开展渗透测试！！！

《中华人民共和国刑法》

第二百八十五条
违反国家规定，侵入国家事务、国防建设、尖端科学技术领域的计算机信息系统的，处三年以下有期徒刑或者拘役。
第二百八十六条
违反国家规定，对计算机信息系统功能进行删除、修改、增加、干扰，造成计算机信息系统不能正常运行，后果严重的，处五年以下有期徒刑或者拘役；后果特别严重的，处五年以上有期徒刑。

违反国家规定，对计算机信息系统中存储、处理或者传输的数据和应用程序进行删除、修改、增加的操作，后果严重的，依照前款的规定处罚。
故意制作、传播计算机病毒等破坏程序，影响计算机系统正常运行，后果严重的，依照第一款的规定处罚