会不定时扩充与完善文章内容
更新日期:2020年12月24日
JavaScript 是属于 HTML 和 Web 的编程语言。
JavaScript 能够改变 HTML 内容。
案例:
JavaScript 能够改变 HTML 属性
本例通过改变 <img> 标签的 src 属性(source)来改变一张 HTML 图像:
通过 HTML DOM,JavaScript 能够访问和改变 HTML 文档的所有元素。
HTML DOM(文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被结构化为对象树:
对象的 HTML DOM 树
通过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量:
HTML DOM 是 HTML 的标准对象模型和编程接口,它定义了:
换言之:HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
HTML DOM Document 对象
HTML DOM Element 对象
HTML DOM Attribute 对象
HTML DOM Event 对象
学无止境
未便于理解进行了分类归纳:
蠕虫式挂马攻击、刷广告、刷流量、破坏网上数据......
通过案例进行讲解
在使用搜索功能时发现信息存在"驻留"现象
打开浏览器调试工具分析
元素
查看js代码
发现输入的数据有驻留但在标签内
输入测试
输入特殊字符闭合标签
闭合成功,输入内容以js代码形式执行
分析:
输入"> 闭合了标签<a 并使之后的数据可不在标签内显示
正常测试,查看元素
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能做什么?<
/
h2>
<p>JavaScript 能够改变 HTML 属性值。<
/
p>
<p>在本例中,JavaScript 改变了图像的 src 属性值。<
/
p>
<button onclick
=
"document.getElementById('myImage').src='/i/eg_bulbon.gif'"
>开灯<
/
button>
<img
id
=
"myImage"
border
=
"0"
src
=
"/i/eg_bulboff.gif"
style
=
"text-align:center;"
>
<button onclick
=
"document.getElementById('myImage').src='/i/eg_bulboff.gif'"
>关灯<
/
button>
<
/
body>
<
/
html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能做什么?<
/
h2>
<p>JavaScript 能够改变 HTML 属性值。<
/
p>
<p>在本例中,JavaScript 改变了图像的 src 属性值。<
/
p>
<button onclick
=
"document.getElementById('myImage').src='/i/eg_bulbon.gif'"
>开灯<
/
button>
<img
id
=
"myImage"
border
=
"0"
src
=
"/i/eg_bulboff.gif"
style
=
"text-align:center;"
>
<button onclick
=
"document.getElementById('myImage').src='/i/eg_bulboff.gif'"
>关灯<
/
button>
<
/
body>
<
/
html>
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
在 HTML DOM 中,Element 对象表示 HTML 元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
NodeList 对象表示节点列表,比如 HTML 元素的子节点集合。
在 HTML DOM 中,Element 对象表示 HTML 元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
NodeList 对象表示节点列表,比如 HTML 元素的子节点集合。
在 HTML DOM 中,Attr 对象表示 HTML 属性。
HTML 属性始终属于 HTML 元素。
在 HTML DOM 中,Attr 对象表示 HTML 属性。
HTML 属性始终属于 HTML 元素。
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用,函数不会在事件发生前被执行!
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用,函数不会在事件发生前被执行!
发出请求时,XSS代码出现在URL中,作为输入提交到服务端,服务端解析后响应,在响应内容中出现这段XSS代码,最后浏览器解析执行。这个过程就像一次反射,故称为反射型XSS。
发出请求时,XSS代码出现在URL中,作为输入提交到服务端,服务端解析后响应,在响应内容中出现这段XSS代码,最后浏览器解析执行。这个过程就像一次反射,故称为反射型XSS。
存储型XSS和反射型XSS的差别仅在于:提交的XSS代码会存储在服务端(不管是数据库、内存还是文件系统等),下次请求目标页面时不用再提交XSS代码。
存储型XSS和反射型XSS的差别仅在于:提交的XSS代码会存储在服务端(不管是数据库、内存还是文件系统等),下次请求目标页面时不用再提交XSS代码。
DOM XSS的XSS代码并不需要服务器解析响应的直接参与,触发XSS靠的就是浏览器端的DOM解析,可以认为完全是客户端的事情。
DOM XSS的XSS代码并不需要服务器解析响应的直接参与,触发XSS靠的就是浏览器端的DOM解析,可以认为完全是客户端的事情。
$(
'.search-ipt'
).on(
'input'
,function () {
let val
=
localStorage.getItem(
'record'
)||''
if
(val!
=
''){
$(
'.history'
).css(
'display'
,
'block'
)
$(
'.history'
).html(
'<a href="/?search='
+
val
+
'">'
+
val
+
'</a>'
)
}
else
{
$(
'.history'
).css(
'display'
,
'none'
)
}
})
$(
'.search-btn'
).click(function () {
let val
=
$(
'.search-ipt'
).val()
localStorage.setItem(
'record'
,val)
}
)
发现将数据存储在localStorage
$(
'.search-ipt'
).on(
'input'
,function () {
let val
=
localStorage.getItem(
'record'
)||''
if
(val!
=
''){
$(
'.history'
).css(
'display'
,
'block'
)
$(
'.history'
).html(
'<a href="/?search='
+
val
+
'">'
+
val
+
'</a>'
)
}
else
{
$(
'.history'
).css(
'display'
,
'none'
)
}
})
$(
'.search-btn'
).click(function () {
let val
=
$(
'.search-ipt'
).val()
localStorage.setItem(
'record'
,val)
}
)
发现将数据存储在localStorage
<script>alert(
"xss测试"
)<
/
script>
<script>alert(
"xss测试"
)<
/
script>
$(
'.search-ipt'
).on(
'input'
,function () {
if
($(
'.search-ipt'
).val()
=
=
''){
$(
'.history'
).css(
'display'
,
'none'
)
}
else
{
$(
'.history'
).css(
'display'
,
'block'
)
}
let val
=
$(
'.search-ipt'
).val()
$(
'.history'
).html(
'<a href="/?search='
+
val
+
'">暂无搜索结果</a>'
)
})
发现取内容放在<a标签内
$(
'.search-ipt'
).on(
'input'
,function () {
if
($(
'.search-ipt'
).val()
=
=
''){
$(
'.history'
).css(
'display'
,
'none'
)
}
else
{
$(
'.history'
).css(
'display'
,
'block'
)
}
let val
=
$(
'.search-ipt'
).val()
$(
'.history'
).html(
'<a href="/?search='
+
val
+
'">暂无搜索结果</a>'
)
})
发现取内容放在<a标签内
$(
'.url-btn'
).click(function () {
let val
=
$(
'.search-ipt'
).val()
if
(val
=
=
'') {
$(
'.url-box'
).css(
'display'
,
'none'
)
}
else
{
val
=
val.toLocaleLowerCase().replace(
/
script
/
g,'
').replace(/</g,'
').replace(/>/g,'
')
$(
'.url-box'
).css(
'display'
,
'block'
)
$(
'.url-box'
).html(
'<span style="padding-left: 2px">生成的链接为:<a class="url" href="'
+
val
+
'">'
+
val
+
'</a></span>'
)
}
}
)
发现将数据存储在<a标签href属性内
$(
'.url-btn'
).click(function () {
let val
=
$(
'.search-ipt'
).val()
if
(val
=
=
'') {
$(
'.url-box'
).css(
'display'
,
'none'
)
}
else
{
val
=
val.toLocaleLowerCase().replace(
/
script
/
g,'
').replace(/</g,'
').replace(/>/g,'
')
$(
'.url-box'
).css(
'display'
,
'block'
)
$(
'.url-box'
).html(
'<span style="padding-left: 2px">生成的链接为:<a class="url" href="'
+
val
+
'">'
+
val
+
'</a></span>'
)
}
}
)
发现将数据存储在<a标签href属性内
<a> 标签的 href 属性用于指定超链接目标的 URL。
href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段。如果用户选择了 <a> 标签中的内容,那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档,或者执行 JavaScript 表达式、方法和函数的列表。
<a> 标签的 href 属性用于指定超链接目标的 URL。
href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段。如果用户选择了 <a> 标签中的内容,那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档,或者执行 JavaScript 表达式、方法和函数的列表。
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
HTML
4.0
的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为。
HTML
4.0
的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为。
支持该事件的 HTML 标签:
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>,
<caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>,
<form>, <h1> to <h6>, <hr>, <i>, <img>, <
input
>, <kbd>, <label>, <legend>,
<li>, <
map
>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>,
<tr>, <tt>, <ul>, <var>
支持该事件的 HTML 标签:
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>,
<caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>,
<form>, <h1> to <h6>, <hr>, <i>, <img>, <
input
>, <kbd>, <label>, <legend>,
<li>, <
map
>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>,
<tr>, <tt>, <ul>, <var>
[培训]内核驱动高级班,冲击BAT一流互联网大厂工作,每周日13:00-18:00直播授课