❝
「目标」: 持续输出！每日分享关于web前端常见知识、面试题、性能优化、新技术等方面的内容。篇幅不会过长，方便理解和记忆。
❞
❝
「主要面向群体：」前端开发工程师（初、中、高级）、应届、转行、培训等同学
❞
Day2-今日话题
想必大家经常会在面试中或者工作生活中听到跨站脚本攻击（XSS）相关的问题或者话题，那么今天我将从以下三个方面聊聊跨站脚本攻击：
-
-
-
跨站脚本攻击是什么？
跨站脚本攻击（Cross-Site Scripting，简称XSS）是一种网络安全漏洞，攻击者通过在受害者的浏览器中注入恶意脚本，从而在受害者浏览器中执行恶意代码。这种攻击将让攻击者窃取用户敏感信息、劫持用户会话、篡改网页内容以及执行其他恶意行为。XSS攻击通常在用户与一个被攻击的网站进行交互时发生，攻击者利用网站未充分过滤或验证用户输入的漏洞，将恶意脚本嵌入到网页中，然后让受害者浏览器执行这些脚本。
XSS攻击可以分为三种主要类型：
「存储型XSS（Stored XSS）」： 攻击者将恶意脚本存储在网站服务器上，当其他用户访问包含这些恶意脚本的页面时，恶意脚本从服务器加载并在受害者浏览器中执行。
「反射型XSS（Reflected XSS）」： 攻击者将恶意脚本作为参数注入到URL中，当用户点击包含恶意参数的链接时，服务器将参数的内容反射回浏览器并执行。
「DOM型XSS（DOM-based XSS）」： 攻击者通过修改页面的DOM结构来触发漏洞，这种类型的XSS攻击不会将恶意代码传递给服务器。
跨站脚本攻击有什么危害？
「窃取敏感信息」： 攻击者可以通过注入恶意脚本，窃取用户的敏感信息，如用户名、密码、Cookie等。这些信息可以用来冒充用户身份进行恶意操作。
「劫持会话」： 攻击者通过窃取用户的会话令牌或Cookie，能够劫持用户的会话，实施未经授权的操作，如修改账户信息、发表言论等。
「篡改网页内容」： 攻击者可以通过注入恶意脚本，修改网页上的内容，向用户展示虚假信息、欺骗性的广告、恶意链接等，影响用户的体验和信任。
「钓鱼攻击」： 攻击者可以伪造合法网站，诱使用户输入敏感信息，如银行账户密码、信用卡信息等，从而实施钓鱼攻击。
「恶意操作」： 攻击者可以在用户浏览器中执行恶意脚本，例如发起DDoS攻击、改变用户设置、执行未授权操作等，从而对用户和网站造成实际损害。
「信任破坏」： 如果用户发现网站存在XSS漏洞，可能会对该网站产生质疑并失去信任，导致用户流失。
「传播恶意代码」： 攻击者可以利用XSS漏洞传播恶意软件、病毒或恶意脚本，进一步扩大攻击范围。
「破坏隐私」： 用户的隐私可能会被泄露，从而导致个人、财务等方面的损失。
如何预防XSS
「输入验证和过滤」： 对于所有用户输入的数据，包括表单提交、URL参数等，进行严格的验证和过滤。确保只允许合法和预期的输入通过。可以使用白名单过滤、正则表达式匹配等方法来防止不安全的输入。
「输出转义」： 在将用户输入数据插入到HTML页面时，使用适当的输出转义机制，将特殊字符转换为它们的HTML实体形式。这样可以防止浏览器将输入内容解释为代码。
「使用安全的编码库」： 使用安全的编码库来处理用户输入和输出，这些库会自动执行必要的输入验证、过滤和输出转义，从而减少开发者的出错机会。
「Content Security Policy（CSP）」： CSP是一种安全策略，可以在HTTP头中设置，用于限制页面可以加载的资源和执行的脚本。通过设置合适的CSP规则，可以有效减少XSS攻击的风险。
「HttpOnly和Secure标记」： 在设置Cookie时，使用HttpOnly标记确保Cookie不能被JavaScript访问，使用Secure标记确保Cookie只在HTTPS连接中传输。
「使用框架和库」： 使用流行的Web开发框架和库（如React、Angular、Vue.js等），这些框架通常有内置的安全机制，可以减少XSS攻击的风险。
「教育用户」： 提高用户的网络安全意识，让他们了解XSS攻击的风险和如何避免受到攻击。
「定期安全审计」： 定期检查和审计代码，查找潜在的XSS漏洞，及时修复。
「最小化权限」： 在数据库和服务器上使用最小权限原则，限制应用程序和用户的访问权限，减少攻击者能够获取的敏感信息。
「避免内联脚本」： 尽量避免使用内联脚本，而是使用外部JavaScript文件。这样可以帮助隔离用户输入和执行的代码。
「使用HTTPOnly Cookie」： 使用HTTPOnly Cookie可以防止通过JavaScript访问Cookie，从而减少攻击者窃取会话令牌的可能性。
「安全开发实践」： 遵循安全的开发实践，编写安全的代码，不信任用户输入，使用最新的漏洞库和工具进行代码审查和漏洞扫描。
拓展
1. 存储型XSS
存储型XSS攻击是一种利用网站漏洞将恶意脚本存储在服务器上，然后在其他用户访问包含恶意脚本的页面时执行的攻击。攻击者通常通过网站上的表单提交、评论区、用户上传的内容等方式将恶意脚本注入到服务器上。
以下是一些存储型XSS攻击的示例，以及如何防御这些攻击：
-
攻击者在网站的评论区提交恶意评论，其中包含恶意脚本。当其他用户查看评论时，恶意脚本会被加载并在其浏览器中执行。
「防御方法：」 在显示用户提交的内容之前，对内容进行适当的转义，将特殊字符转换为HTML实体，从而防止恶意脚本的执行。
-
攻击者上传一个包含恶意脚本的文件（如图像、文档等），然后其他用户下载或查看这些文件时，恶意脚本会被执行。
「防御方法：」 对用户上传的文件进行严格的验证和过滤，确保只允许安全的文件类型和内容上传，并在文件展示时进行适当的转义。
-
攻击者在用户个人资料或设置中注入恶意脚本，当其他用户查看该用户的资料或设置时，恶意脚本会被执行。
「防御方法：」 在展示用户个人资料或设置内容之前，对内容进行适当的验证、过滤和转义，确保不会执行恶意脚本。
-
攻击者在购物网站的订单备注或其他字段中注入恶意脚本，当其他用户查看订单详情时，恶意脚本会被执行。
「防御方法：」 对订单信息等敏感数据进行适当的过滤和转义，确保不会执行恶意脚本。
-
如果网站允许用户提交动态内容，如动态状态、文章等，攻击者可以在这些内容中注入恶意脚本。
「防御方法：」 对用户提交的动态内容进行适当的验证、过滤和转义，确保恶意脚本无法执行。
2. 反射型XSS
反射型XSS攻击是一种将恶意脚本作为参数注入到URL中，然后通过诱使用户点击恶意链接，使恶意脚本在受害者浏览器中执行的攻击。攻击者通常会通过诱导用户点击链接或者访问特定的URL来触发这种攻击。
以下是一些反射型XSS攻击的示例，以及如何防御这些攻击：
-
攻击者创建一个包含恶意脚本的URL，然后通过社交媒体、电子邮件等途径将这个URL传递给受害者。当受害者点击链接时，恶意脚本会在URL参数中执行。
「示例URL：」
http://www.example.com/search?query=<script>alert('XSS Attack!');</script>
「防御方法：」 对于接收的URL参数，对内容进行适当的验证、过滤和输出转义，确保恶意脚本无法执行。另外，设置合适的CSP策略，限制页面可以执行的脚本来源。
-
攻击者在社交媒体上发布带有恶意脚本的链接，当用户点击这些链接时，恶意脚本会在受害者浏览器中执行。
「示例链接：」
http://www.example.com/page?message=<script>steal_user_info()</script>
「防御方法：」 在显示或处理来自用户的输入数据时，确保对内容进行适当的验证、过滤和输出转义，防止恶意脚本的执行。
-
攻击者可以在恶意广告中插入包含恶意脚本的链接，当用户点击广告时，恶意脚本会被执行。
「防御方法：」 对于接收的广告内容，对内容进行适当的验证、过滤和输出转义，限制不受信任的内容的执行。
-
攻击者伪装成合法网站，并在URL参数中注入恶意脚本，诱使用户点击链接并执行恶意脚本。
「示例链接：」
http://www.example-legit-site.com?redirect=<script>steal_user_credentials()</script>
「防御方法：」 针对重定向或跳转的参数，对内容进行适当的验证、过滤和输出转义，确保不会触发恶意脚本的执行。
3.DOM型XSS
DOM型XSS（Document Object Model Cross-Site Scripting）是一种XSS攻击类型，攻击者通过操纵页面的DOM（文档对象模型）来实现攻击，而不是直接向服务器提交恶意脚本。这种攻击通常涉及使用JavaScript来修改页面的DOM结构，从而触发恶意代码的执行。DOM型XSS攻击不涉及向服务器发送恶意脚本，而是利用浏览器在解析和执行JavaScript时的行为。
以下是一些DOM型XSS攻击的示例，以及如何防御这些攻击：
-
攻击者构造一个恶意URL，其中包含参数，该参数被JavaScript解析并用于修改页面的DOM结构，从而触发恶意代码的执行。
「示例URL：」
http://www.example.com/page#<script>malicious_code()</script>
「攻击方式：」 当用户访问带有上述URL的页面时，浏览器会解析URL中的参数，并将其插入到页面的DOM结构中。
「防御方法：」 不信任来自URL中的参数，确保在将参数插入到DOM之前对其进行适当的验证和转义。尽量避免使用JavaScript从URL中提取参数并操作DOM。
-
攻击者通过修改URL中的参数值来触发恶意代码的执行，从而影响页面的行为。
「示例URL：」
http://www.example.com/page?message=<script>malicious_code()</script>
「攻击方式：」 攻击者将恶意脚本注入到URL参数中，页面中的JavaScript解析该参数并执行恶意代码。
「防御方法：」 对于来自URL参数的输入数据，进行适当的验证、过滤和输出转义，确保恶意脚本无法执行。不要在页面的JavaScript中直接操作未经验证的URL参数。
-
攻击者通过诱使用户进行特定的操作，触发恶意代码的执行。例如，攻击者可能要求用户在输入框中输入内容，然后将该内容插入到页面中。
「示例：」
<input type="text" id="inputField">
<button onclick="displayInput()">Submit</button>
<script>
function displayInput() {
var userInput = document.getElementById("inputField").value;
document.getElementById("output").innerHTML = userInput; // 没有过滤用户输入
}
</script>
「攻击方式：」 用户输入包含恶意脚本，点击“Submit”按钮时，恶意脚本被执行。
「防御方法：」 在将用户输入插入到DOM之前，对其进行适当的验证、过滤和输出转义，确保不会执行恶意脚本。
