PortSwigger篇：Cross-site scripting 跨站脚本攻击——1

前情概要

要想理解“跨站脚本攻击”（又叫XSS）的原理，就得回到其产生的根本——JS传参语句的设计缺陷
什么是JS？JS是怎么实现的？他跟网站又有什么关系？别急，让我们一步一步来

基础知识

要想理解JS的工作原理，以及其与网站的联系，就需要知道网站是怎么工作的

简而言之，我们之所以能够看到现在的网页，正是浏览器渲染的功劳
而一个完整的网页，一般都包括但不限于两种标记语言和一种编程语言，他们分别是HTML、CSS和Javascript

要想具体深入我们的XSS脚本漏洞使用，就需要先理解一下这三者之间的联系和作用分别是什么
下面我们就开始对这三者展开简单讨论

HTML

HTML是一种用于创建网页的标准标记语言，可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Red的教程(redshome.top)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

这是一段简单的HTML标记语句，每一个<>包括其中的内容都叫一个标签，而正常需要使用一对标签进行配对，将需要进行的动作放置在这对标签的中间，中间的这些动作就能具备这对标签的属性

如果我们将其使用.html或.htm后缀文件的形式用浏览器打开后，会发现他们二者都是可以正常打开的

所以这里我们便得到了第一个结论，html和htm是同一种格式的文件

下面我们来对各个部分进行一下解释

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

更多的标签使用，可以参考菜鸟教程上的HTML教程

CSS

CSS又叫层叠样式表，是一种用来添加HTML文件如字体、间距等样式的标记语言。扩展名固定为.css
CSS的使用与HTML紧密联系。让我们先来看一段HTML标记

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Red的教程(redshome.top)</title>
<style>
body {
    background-color:#d0e4fe;
}
h1 {
    color:orange;
    text-align:center;
}
p {
    font-family:"Times New Roman";
    font-size:20px;
}
</style>
</head>

<body>

<h1>CSS 实例!</h1>
<p>这是一个段落。</p>

</body>
</html>

我们可以看到他的效果如下图所示

首先我们先来介绍一下CSS的常见使用方法以及CSS的基础知识。
先来看一下CSS的语句结构

如上面代码所示的方法，我个人将这种使用方法称为“直接定义”。这种方法的好处就是能够将所有标签全设置为统一样式而达到省事的目的，但通常我们在同一种标签中需要多种样式，那要怎么样来实现呢？

下面，我们将介绍两种利用特定的选择器来对需要对应样式的标签进行修饰

ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=“para1”

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

Class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 “.” 号显示
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中

.center {text-align:center;}

注意：不管是ID还是Class，定义名称时第一个字符不能使用数字！否则无法在 Mozilla 或 Firefox 中起作用

当然，一个完整的网页通常都有不止一个CSS文件构成。在style这对标签中的内容，都能交由CSS文件进行托管。这里我们介绍三种最常见的调用方式

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

更多的CSS使用，可以参考菜鸟教程上的CSS教程

Javascript

如果说HTML定义了网页的内容，CSS描述了网页的布局，那么Javascript(简称js)的作用就是控制了网页的行为

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Red的教程(redshome.top)</title>
<script>
function displayDate(){
    document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>

<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>

<button type="button" onclick="displayDate()">显示日期</button>

</body>
</html>

我们可以在上面看到，对于需要定义的Javascript函数，我们可以将其放在一对<script>标签中
而上面这段代码执行后，你可以在页面上看到一个用以显示日期的按钮。

实现这个功能最重要的几句就是：

...
...
<script>
function displayDate(){
    document.getElementById("demo").innerHTML=Date();
}
</script>
...
...
<p id="demo">这是一个段落</p>
<button type="button" onclick="displayDate()">显示日期</button>
...
...

我们可以使用onclick属性对script标签对中定义的函数进行调用。其中，displayDate为函数名，document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码，innerHTML =是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。Date()的Javascript中内置的日期调用函数。
Javascript同其他编程语言一样，内置了许多类似像Date()这样的函数。为了方便我们下面对靶场的介绍，下面再介绍一个alert()函数。他的作用是跳出一个弹窗，具体用法如下：

<script>
alert("我的第一个 JavaScript");
</script>

执行效果如下

到这里可能你会有困惑，不是只能将<script>标签写在head标签中呢？并不是，你可以将它放在任何位置，甚至是在<html>外，它也能够实现。重要的是，在不论你将它放在哪个位置，你都会发现，在执行完代码后，你的网页都会先跳出弹窗再显示其他内容，因此这里又涉及到一个结论就是：javascript代码的执行顺序不一定按代码的放置先后进行

这里再介绍一个叫做<input>的标签。它的作用就是显示一个输入框，并且可以利用type属性来让输入框中的输入后显示的内容变得特殊
这里我们对一个登录输入框进行简单的模拟。你可以这样写：

<input type="text" ></input><br>
<input type="password"></input><br>
<input type="submit"></input>

你就可以在你的页面中看到这个效果

这里，我输入的内容都为123。但可以看到，我的第二行密码被做了隐藏

当然，和CSS一样，一个具备众多功能的网页中不止有一个Javascript文件。用以储存Javascript文件的后缀名为.js
更多的js使用，可以参考菜鸟教程上的JS教程

前情概要#

基础知识#

HTML#

CSS#

ID选择器#

Class选择器#

外部样式表#

内部样式表#

内联样式#

Javascript#