【网络安全前端XSS防护】一文带你了解HTML的特殊字符转义及编码_xss特殊字符替换

2401_84970385

于 2024-05-13 12:10:52 发布

阅读量787

点赞数 19

分类专栏：程序员文章标签：前端 web安全 xss

本文链接：https://blog.csdn.net/2401_84970385/article/details/138796992

版权

程序员专栏收录该内容

29 篇文章 0 订阅

订阅专栏

+ [前端XSS的危害及转义用处](#XSS_16)
+ [如何进行特殊字符转义及编码？](#_114)
+ [常见的特殊字符转义及编码](#_185)

为什么要进行特殊字符转义及编码？

在 HTML 中，有一些特殊字符不可直接使用，需要使用转义字符或实体编码来表示。这是为了避免这些字符与 HTML 标签和语法产生冲突。同时，也是为了防范前端XSS。

例如，有些特殊字符（如 < 和 >）作为HTML标签的一部分，要是没有被特殊处理可能被恶意XSS。

前端XSS的危害及转义用处

HTML的特殊字符转义及编码在防范跨站脚本攻击（Cross-Site Scripting, XSS）方面起到关键作用。XSS是一种常见的安全漏洞，攻击者通过在受信任网站上插入恶意脚本，使其在用户浏览器中执行。

HTML的特殊字符转义及编码的作用如下：

（1）阻止脚本注入：

假设一个博客网站允许用户发表评论，并将评论内容直接显示在页面上。如果没有进行转义或编码处理，攻击者可以在评论中插入恶意脚本。例如：

用户评论：<script>alert('XSS Attack');</script>

如果评论内容未经过转义或编码，这段恶意脚本将在其他用户浏览该页面时被执行。

接下来以XSS-Labs靶场为例，成功执行XSS时将弹窗“完成的不错”

由于后端无任何过滤及转义处理，可以看到，XSS语句执行成功：

在这里插入图片描述

然而，通过将特殊字符转义为实体编码，将评论内容显示为普通文本，如下所示：

<script>alert('XSS Attack');</script>

这样，评论内容不再被解释为可执行的脚本，保护了页面和用户的安全。

（2）防止HTML标签和属性的滥用：

假设一个社交媒体网站允许用户在个人简介中添加自我介绍。如果用户输入的内容未经过转义或编码处理，并且在个人简介页面上直接显示，那么攻击者可以在自我介绍中插入恶意HTML标签或属性。例如：

用户输入：<img src="javascript:alert('XSS Attack');" />

如果该内容未经过任何处理，则图像标签会被解释并执行其中的JavaScript代码。

举个例子：

在这里插入图片描述

通过将特殊字符转义为实体编码，将自我介绍内容显示为普通文本，如下所示：

<img src="javascript:alert('XSS Attack');" />

这样，HTML标签和属性不再被解析为可执行的代码，保护了页面和用户的安全。

同时，我们可以看到，在一些程序中，输入XSS语句之后并不会被转义，也不会被执行：

在这里插入图片描述

这是运用了更高级XSS防护技术的缘故。

（3）防止URL注入：

假设一个电子商务网站允许用户在评论中包含链接，并直接将这些链接显示在页面上。如果URL未经过适当的编码处理，攻击者可以在URL中注入恶意脚本或其他恶意内容。例如：

用户评论：https://www.example.com?param=<script>alert('XSS Attack');</script>

如果该评论未经过任何处理，链接将会被解释并执行其中的JavaScript代码。

通过对URL进行编码，如下所示：

https://www.example.com?param=%3Cscript%3Ealert('XSS%20Attack')%3C/script%3E

这样，URL中的特殊字符被转义为实体编码，防止了恶意代码的执行。

（4）XSS过滤器的辅助作用：

例如，当浏览器检测到页面中的特殊字符被正确转义或编码时，它们会将其视为纯文本，不会将其解析为HTML标签或脚本。这有助于识别和阻止潜在的XSS攻击。

下面列举两个常见的浏览器XSS过滤器：

1.Chrome浏览器：

XSS Auditor：Chrome浏览器内置了名为XSS Auditor的过滤器，它尝试检测和阻止反射型XSS攻击。
Sanitizer：Chrome还使用了一种HTML Sanitizer来处理和过滤用户输入，以防止XSS攻击。

2.Firefox浏览器：

Content Security Policy (CSP)：Firefox支持Content Security Policy，这是一种通过声明策略限制内容加载和执行的机制。CSP可用于阻止XSS攻击。
部分自动XSS过滤：Firefox也提供了一些内置的自动XSS过滤功能，用于检测和阻止潜在的XSS攻击。

如何进行特殊字符转义及编码？

（1）使用内置函数或方法：

大多数编程语言和框架提供了内置的函数或方法来进行字符转义和编码。例如：

在JavaScript中，可以使用encodeURIComponent()或encodeURI()来对URL进行编码，使用innerHTML或innerText属性来进行HTML转义。
在PHP中，可以使用htmlspecialchars()或htmlentities()来进行HTML转义。
在Java中，可以使用URLEncoder.encode()来对URL进行编码，使用StringEscapeUtils.escapeHtml()来进行HTML转义。

举个使用内置函数或方法的例子（JavaScript）：

// URL编码
let url = 'https://www.example.com/?param=' + encodeURIComponent('<script>alert("XSS Attack");</script>');
console.log(url);
// 输出：https://www.example.com/?param=%3Cscript%3Ealert(%22XSS%20Attack%22);%3C/script%3E

// HTML转义
let userInput = '<script>alert("XSS Attack");</script>';
let escapedHtml = document.createElement('div');
escapedHtml.textContent = userInput;
console.log(escapedHtml.innerHTML);
// 输出：&lt;script&gt;alert("XSS Attack");&lt;/script&gt;

（2）使用专门的编码库：

有一些专门用于字符转义和编码的开源库，可以提供更强大和全面的功能。例如：

OWASP Java Encoder：适用于Java的开源库，提供各种编码器和解码器，用于对URL、HTML、JavaScript等进行编码和解码。
PHP HTML Purifier：适用于PHP的开源库，用于过滤和转义HTML，以防止XSS攻击。
Python Bleach：适用于Python的开源库，提供HTML标签过滤、标签属性过滤和标签内容转义等功能。

举个例子（Java）：

import org.owasp.encoder.Encode;

// URL编码
String url = "https://www.example.com/?param=" + Encode.forUriComponent("<script>alert(\"XSS Attack\");</script>");
System.out.println(url);
// 输出：https://www.example.com/?param=%3Cscript%3Ealert(%22XSS%20Attack%22);%3C/script%3E

// HTML转义
String userInput = "<script>alert(\"XSS Attack\");</script>";
String escapedHtml = Encode.forHtml(userInput);
System.out.println(escapedHtml);
// 输出：&lt;script&gt;alert(&quot;XSS Attack&quot;);&lt;/script&gt;

（3）手动实现转义规则：

可以创建自定义的转义表或函数来执行特殊字符的转义。这需要仔细研究和了解特殊字符的转义规则，并编写相应的代码来替换字符。

转义时应考虑多重编码：当字符传输经过多个层级或环节时，确保在每个层级或环节上都进行了正确的编码和转义处理。

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数网络安全工程师，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年网络安全全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上网络安全知识点！真正的体系化！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

73441779)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上网络安全知识点！真正的体系化！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84970385

关注

19
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
【网络安全前端XSS防护】一文带你了解HTML的特殊字符转义及编码_xss特殊字符替换

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数网络安全工程师，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年网络安全全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上网络安全知识点！真正的体系化！
复制链接

扫一扫