目标: 持续输出！每日分享关于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=防御方法： 对于接收的URL参数，对内容进行适当的验证、过滤和输出转义，确保恶意脚本无法执行。另外，设置合适的CSP策略，限制页面可以执行的脚本来源。
- 社交媒体攻击：
攻击者在社交媒体上发布带有恶意脚本的链接，当用户点击这些链接时，恶意脚本会在受害者浏览器中执行。
示例链接：
http://www.example.com/page?message=防御方法：
在显示或处理来自用户的输入数据时，确保对内容进行适当的验证、过滤和输出转义，防止恶意脚本的执行。
- 恶意广告链接：
攻击者可以在恶意广告中插入包含恶意脚本的链接，当用户点击广告时，恶意脚本会被执行。
防御方法： 对于接收的广告内容，对内容进行适当的验证、过滤和输出转义，限制不受信任的内容的执行。
- 钓鱼攻击：
攻击者伪装成合法网站，并在URL参数中注入恶意脚本，诱使用户点击链接并执行恶意脚本。
示例链接：
http://www.example-legit-site.com?redirect=防御方法： 针对重定向或跳转的参数，对内容进行适当的验证、过滤和输出转义，确保不会触发恶意脚本的执行。
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#攻击方式： 当用户访问带有上述URL的页面时，浏览器会解析URL中的参数，并将其插入到页面的DOM结构中。
防御方法： 不信任来自URL中的参数，确保在将参数插入到DOM之前对其进行适当的验证和转义。尽量避免使用JavaScript从URL中提取参数并操作DOM。
- 操作URL参数：
攻击者通过修改URL中的参数值来触发恶意代码的执行，从而影响页面的行为。
示例URL：
http://www.example.com/page?message=攻击方式： 攻击者将恶意脚本注入到URL参数中，页面中的JavaScript解析该参数并执行恶意代码。
防御方法： 对于来自URL参数的输入数据，进行适当的验证、过滤和输出转义，确保恶意脚本无法执行。不要在页面的JavaScript中直接操作未经验证的URL参数。
- 用户操作引发攻击：
攻击者通过诱使用户进行特定的操作，触发恶意代码的执行。例如，攻击者可能要求用户在输入框中输入内容，然后将该内容插入到页面中。
示例：
攻击方式： 用户输入包含恶意脚本，点击“Submit”按钮时，恶意脚本被执行。
防御方法： 在将用户输入插入到DOM之前，对其进行适当的验证、过滤和输出转义，确保不会执行恶意脚本。
本文由mdnice多平台发布