javascript安全指的是在javascript代码开发、运行过程中，通过一系列技术手段和策略，避免恶意代码执行、数据泄露、非法操作等安全风险，保障用户数据和页面功能正常运行。XSS即跨站脚本攻击，是javascript安全领域最常见的攻击类型，攻击者通过注入恶意脚本到正常页面中，当其他用户访问页面时，恶意脚本会在用户浏览器中执行，进而窃取cookie、篡改页面内容或者发起钓鱼攻击。
XSS攻击的常见类型
存储型XSS
存储型XSS的恶意脚本会被永久存储在目标服务器的数据库中，比如攻击者在一篇博客的评论区提交包含恶意脚本的内容，当其他用户访问这篇博客时，评论内容被加载到页面，恶意脚本就会执行。这种攻击的影响范围最广，因为所有访问对应页面的用户都会受到影响。
反射型XSS
反射型XSS的恶意脚本不会存储在服务器，而是作为请求参数的一部分发送到服务器，服务器把参数内容直接返回到页面中。比如攻击者构造一个包含恶意脚本的链接，诱导用户点击，服务器把链接中的恶意脚本反射回页面执行。
DOM型XSS
DOM型XSS的攻击过程不涉及服务器端的响应处理，完全是前端javascript操作DOM时导致的漏洞。比如页面通过javascript读取URL中的参数，直接把参数内容插入到DOM中，攻击者构造包含恶意脚本的参数，就会触发脚本执行。
XSS攻击的防范方案
输入验证
对所有用户输入的内容进行严格的格式校验，只允许符合预期格式的内容通过。比如手机号输入只允许数字和指定长度，评论内容不允许包含<script>、<iframe>等危险标签。
可以使用正则表达式对输入内容进行校验，以下是简单的输入验证示例：
// 验证输入内容是否包含危险标签
function validateInput(input) {
// 匹配script、iframe、object等危险标签的正则
const dangerReg = /<script|<iframe|<object|<embed/gi;
if (dangerReg.test(input)) {
return false;
}
// 其他自定义格式校验，比如长度限制
if (input.length > 500) {
return false;
}
return true;
}
const userInput = '<script>alert(1)</script>';
console.log(validateInput(userInput)); // 输出 false
输出编码
当把用户输入的内容输出到页面时，需要根据输出的上下文进行对应的编码，避免内容被浏览器解析为可执行的脚本。常见的输出场景和编码方式如下：
| 输出场景 | 编码方式 | 说明 |
|---|---|---|
| HTML正文 | HTML实体编码 | 把<转义为<，>转义为>，&转义为&等 |
| HTML属性 | 属性值编码 | 对属性值中的引号、尖括号等字符进行转义，属性值用引号包裹 |
| javascript上下文 | JS编码 | 把特殊字符转义为unicode编码，避免闭合JS语句注入脚本 |
| URL上下文 | URL编码 | 使用encodeURIComponent对参数进行编码 |
以下是HTML实体编码的实现示例：
// HTML实体编码函数
function encodeHTML(str) {
if (typeof str !== 'string') return str;
return str.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
const unsafeContent = '<img src=x onerror=alert(1)>';
const safeContent = encodeHTML(unsafeContent);
// 把safeContent插入到DOM中，不会被解析为可执行脚本
document.getElementById('content').innerHTML = safeContent;
使用CSP内容安全策略
CSP即内容安全策略，通过HTTP响应头或者<meta>标签配置，限制页面可以加载的资源来源和可执行的脚本来源，从根源上阻止非法脚本的执行。比如可以配置只允许加载同源的脚本，禁止内联脚本执行，禁止eval等动态执行代码的函数。
通过meta标签配置CSP的示例如下：
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">
上述配置的含义是：默认资源只允许同源加载，脚本只允许同源加载，样式允许同源和内联样式，图片允许同源和data协议的资源。
其他防范措施
- 避免使用
eval()、new Function()等可以动态执行字符串代码的函数，这些函数很容易被执行恶意注入的代码。 - 对cookie设置
HttpOnly属性，这样javascript就无法读取cookie内容，避免XSS攻击窃取cookie。 - 尽量避免把用户输入的内容直接通过
innerHTML插入到DOM中，优先使用textContent插入文本内容，textContent会自动对内容进行转义。 - 使用成熟的第三方库处理输入验证和输出编码，比如DOMPurify库，可以自动过滤掉HTML中的恶意脚本内容。
以下是使用DOMPurify处理用户输入的示例：
// 需要先引入DOMPurify库
// 假设用户输入的内容包含恶意脚本
const dirtyInput = '<div>正常内容</div><script>alert(1)</script>';
// 使用DOMPurify净化内容
const cleanInput = DOMPurify.sanitize(dirtyInput);
// 净化后的内容会去掉script标签，只保留安全的div内容
document.getElementById('user-content').innerHTML = cleanInput;
总结
javascript安全的核心是防范各类恶意代码注入和执行的风险，XSS攻击作为最常见的威胁，需要从输入验证、输出编码、CSP配置、安全编码习惯等多个层面共同防范。开发者在开发过程中需要始终保持安全意识，对用户输入的所有内容保持不信任态度，做好每一层的防护，才能有效降低XSS攻击的风险，保障应用和用户数据的安全。
javascript_securityXSSinput_validationoutput_encodingCSP修改时间：2026-06-15 09:51:19