【网络安全】跨站脚本攻击漏洞—HTML前端基础

目录

一、HTML概述

1.1 head部分

1.2 body部分

1.3 HTML特殊符号

二、JavaScript概述

2.1 HTML中JavaScript的存在方式

2.2 DOM操作

2.3 BOM操作

跨站脚本攻击（Cross-site scripting，通常缩写为XSS）是一种常见的网络安全漏洞，攻击者利用这种漏洞在网站上注入恶意的客户端代码。当受害者访问这些页面时，恶意代码会在其浏览器中执行，从而允许攻击者窃取用户的敏感信息，如cookie、会话令牌等，或者以受害者的身份与网站进行交互

XSS攻击可以大致分为三类：

1. 反射型XSS：攻击者通过诱使用户点击一个链接，该链接包含恶意脚本，当用户点击后，恶意脚本随请求发送到服务器，并由服务器响应回用户浏览器执行2。
2. 存储型XSS：恶意脚本被存储在目标服务器上，例如在数据库中。当其他用户访问存储了恶意脚本的页面时，脚本会被加载并执行。
3. DOM型XSS：这种类型的XSS发生在客户端，恶意脚本通过修改DOM来执行，不经过服务器的直接响应。

XSS攻击的危害包括但不限于：

• 盗取用户账号和敏感信息。
• 控制企业数据，包括读取、修改、添加或删除敏感数据。
• 非法转账和强制发送电子邮件。
• 网站挂马和控制受害者机器发起其他攻击。

为了防止XSS攻击，开发者需要掌握一定的HTML前端基础，本章我们来介绍HTML前端基础。

一、HTML概述

1.1 head部分

1. <title> ：title标签定义文章的标题，显示在浏览器的标题栏和标题页上
2. <meta> ：定义文档的元数据，如字符集声明 <meta charset="UTF-8">

1.2 body部分

1. <p> ：段落标签
2. <a> ：超链接标签
3. <img> :图片标签
4. 布局标签：

• 1）<div> 块级标签：属于容器级的标签，div标签定义的是一个区域；加上css样式，实现网页布局重构
• 2)<span>行级标签：属于文本级的标签，只能存放文本，图片，表单元素

三种列表方式：

表格：

form表单：

1.3 HTML特殊符号

在HTML中有些字符是有特殊含义的，不能在浏览器中直接显示出来，例如：

<p>我是<h1>标签</p>  #<h1>被当作主标题

解决方式：实体字符（实体字符有很多，这里只举例左右尖括号）

<p>我是&lt;h1&gt;标签</p>

二、JavaScript概述

javaScript是一种可以在浏览器中运行的脚本语言。主要用来实现在浏览器端的动作：用户交互、数据处理等。和Java没有关系。

2.1 HTML中JavaScript的存在方式

1. <script></script>标签中

   <script>
     alert('Hello, World!');
   </script>

2. 在<script>的src属性或指定的外部文件中

   <script src="script.js"></script>

3. 在HTML事件处理器中，如onclock、onmouseover等

   <button onmouseover="alert('Mouse over!')">Hover over me</button>

2.2 DOM操作

文档对象模型（Document Object Model），访问和操作HTML文档的标准方法，通过利用javascript来访问、操作HTML

DOM操作—通过javascript改变网页内容：

1. 获取HTML元素内容

   // 通过ID获取元素
   var element = document.getElementById('myElement');
   
   // 通过标签名获取元素集合（HTMLCollection）
   var elements = document.getElementsByTagName('p');
   
   // 通过类名获取元素集合（NodeList）
   var elements = document.getElementsByClassName('myClass');
   
   // 通过查询选择器获取第一个匹配的元素
   var element = document.querySelector('.myClass');
   
   // 通过查询选择器获取所有匹配的元素（NodeList）
   var elements = document.querySelectorAll('.myClass');

2. 修改HTML元素内容

   // 设置属性
   element.setAttribute('data-custom', 'value');
   
   // 获取属性值
   var attributeValue = element.getAttribute('data-custom');
   
   // 删除属性
   element.removeAttribute('data-custom');

3. 创建动态效果
4. 添加页面交互效果

2.3 BOM操作

浏览器对象模型（Browser Object Model），它使JavaScript有能力与浏览器进行“对话”。

1. 窗口操作

   //获取窗口的尺寸
   var width = window.innerWidth;
   var height = window.innerHeight;
   
   //改变窗口的尺寸
   window.resizeTo(300, 300); // 将窗口大小调整为300x300像素

2. 导航

   //刷新页面
   window.location.reload();
   //跳转到新页面
   window.location.href = 'https://www.example.com';

3. 历史记录

   window.history.back();
   window.history.forward();

4. 滚动

   window.scrollTo(0, 0);  //滚动到页面顶部
   window.scrollTo(0, document.body.scrollHeight);  //滚动到页面底部（示例）

5. 弹出窗口

   //打开新窗口
   var newWindow = window.open('https://www.example.com', '_blank');
   //关闭新窗口
   if (newWindow) {
     newWindow.close();
   }

6. 监听事件

   //监听窗口大小变化
   window.addEventListener('resize', function() {
     console.log('Window size changed.');
   });
   //监听滚动事件
   window.addEventListener('scroll', function() {
     console.log('Window scrolled.');
   });

7. 定时器

   var timer = setTimeout(function() {
     console.log('This message is shown after 2 seconds.');
   }, 2000);

BOM操作有两个重要作用：一是获取和操作浏览器行为；其次还是浏览器和编程语言之间的接口