跨站脚本攻击漏洞-前端知识

HTML和Javascript概述

HTML知识

Javascript概述

Javascript知识

什么是javascript

是一种可以在浏览器中运行的脚本语言。
主要用来实现在浏览器端的动作:
用户交互、数据处理

和java的关系

八竿子打不着的关系。
Java 需要编译,在虚拟机运行
Javascript 是解释性语言,源代码放在html中

HTML中javascript的存在方式有几种

1.在script标签中
跨站脚本攻击漏洞-前端知识_第1张图片
2.在script的src属性或者指定的外部文件中
跨站脚本攻击漏洞-前端知识_第2张图片3.在某个HTML事件处理器中如onclick、onmoiuseovber等
跨站脚本攻击漏洞-前端知识_第3张图片

什么是DOM

全称:文档对象模型( DocumentObject Model ) 。访问和操作HTML文档的标准方法,通过利用javascript来访问、操作HTML。
跨站脚本攻击漏洞-前端知识_第4张图片

获取HTML元素内容

1.获取元素:getElementByld()通过ID获取元素
x=document .getElementById(“name”);
跨站脚本攻击漏洞-前端知识_第5张图片
2.获取内容:innerHTML获取对于的内容
alert(‘id为name的内容是’+x。innerHTML);
跨站脚本攻击漏洞-前端知识_第6张图片

修改HTML元素内容

1.获取元素:getElementByld()通过ID获取元素
x=document .getElementById(“name”);
跨站脚本攻击漏洞-前端知识_第7张图片
2.修改内容:innerHTML赋值修改元素内容
x.innerHTML=“javascript真好玩”;跨站脚本攻击漏洞-前端知识_第8张图片
通过上面解析我们可以知道 先写一个p标签里面有个id叫class的 我们写一个script 定义一个x x等于从这个文档里面读取id为class的 alert是浏览器中弹出一个警示框 这样子写可以让警示框出现p标签叫id的内容
跨站脚本攻击漏洞-前端知识_第9张图片
跨站脚本攻击漏洞-前端知识_第10张图片

这里我们让x.innerHTML=“Javascript” 他会输出这个字符串Javascript
跨站脚本攻击漏洞-前端知识_第11张图片
跨站脚本攻击漏洞-前端知识_第12张图片

创建动态效果

document.write(写入到HTML页面中)
在这里插入图片描述
跨站脚本攻击漏洞-前端知识_第13张图片

添加页面交互效果

利用事件属性,比如onclick
跨站脚本攻击漏洞-前端知识_第14张图片
跨站脚本攻击漏洞-前端知识_第15张图片
跨站脚本攻击漏洞-前端知识_第16张图片

常用事件

跨站脚本攻击漏洞-前端知识_第17张图片

什么是BOM

全称: 浏览器对象模型(Browser biect Model)。它使JavaScript有能力与浏览器进行”对话”
浏览器弹出警告(通常用来证明漏洞的存在比如xss)
alert0 : 警告弹窗
confirm0: 确定弹窗
prompt(): 提示弹窗
跨站脚本攻击漏洞-前端知识_第18张图片
跨站脚本攻击漏洞-前端知识_第19张图片
跨站脚本攻击漏洞-前端知识_第20张图片

获取Cookie

document.cookie
alert(document.cookie)
自己创建的网页没有cookie 我以哔哩哔哩为例
跨站脚本攻击漏洞-前端知识_第21张图片

获取浏览器信息

屏幕信息(window.)screen
跨站脚本攻击漏洞-前端知识_第22张图片

获取/控制页面信息

(window.)location
在这里插入图片描述

你可能感兴趣的:(网络安全,前端,网络安全)