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

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

2024-07-02 23:07:26 前端知识 前端哥 557 392 我要收藏

目录

一、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操作有两个重要作用:一是获取和操作浏览器行为;其次还是浏览器和编程语言之间的接口

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13831.html
标签
web安全
评论
发布的文章

html左右两栏布局实现

2024-08-04 00:08:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!