0

0

如何安全地在 JavaScript 中处理动态跳转逻辑以防止 XSS 攻击

碧海醫心

碧海醫心

发布时间:2026-02-26 20:36:04

|

615人浏览过

|

来源于php中文网

原创

如何安全地在 JavaScript 中处理动态跳转逻辑以防止 XSS 攻击

本文详解如何修复因动态拼接 url 导致的潜在 xss 风险,重点针对 window.location.href 赋值场景,提供输入校验、白名单机制与安全编码实践。

本文详解如何修复因动态拼接 url 导致的潜在 xss 风险,重点针对 window.location.href 赋值场景,提供输入校验、白名单机制与安全编码实践。

在 Web 开发中,JavaScript 代码若直接将不可信数据(如服务端返回的字段)拼入重定向逻辑,极易触发跨站脚本(XSS)漏洞。你提供的代码片段:

if (dataX['var1'] == '1.1' || dataX['var1'] == '2.1') {
    window.location.href = '<domain>';
}

表面看只是跳转,但一旦 的值来源于用户可控输入(例如:后端 PHP 未过滤的数据库字段、URL 参数、AJAX 响应体),攻击者就可能注入恶意 payload。例如,若 实际被替换为:

javascript:alert(document.cookie)

或更隐蔽的:

https://trusted.com/#<script>fetch('/steal?c='+btoa(document.cookie))</script>

虽然现代浏览器对 javascript: 协议在 location.href 中的执行有严格限制(多数主流浏览器已默认禁用),但# 后内容仍可被用于 DOM 操作劫持、历史记录污染、配合前端框架(如 Vue/React)的 hash-based 路由触发 XSS,或诱导用户点击伪造链接——这正是 XSStrike 发出警告的根本原因。

立即学习Java免费学习笔记(深入)”;

Yarnit | Digital Stories
Yarnit | Digital Stories

Yarnit带来了最好的讲故事和AI技术,快速和大规模地创建内容

下载

✅ 正确修复方案(三步走)

1. 永远不信任客户端接收的任意字符串

不要将 dataX['var1'] 或任何来自服务端的响应字段(尤其是 domain)直接赋值给 location.href。必须先校验其格式与来源。

2. 使用白名单 + URL 构造函数双重防护

推荐做法:仅允许预定义的安全域名,并通过 URL 构造函数验证合法性:

// ✅ 安全示例:白名单 + URL 校验
const ALLOWED_DOMAINS = ['https://example.com', 'https://app.yoursite.com'];

function safeRedirect(target) {
    try {
        const url = new URL(target);
        // 检查协议是否为 https/http(禁止 javascript:、data: 等危险协议)
        if (!['http:', 'https:'].includes(url.protocol)) return false;
        // 检查主机是否在白名单内
        if (!ALLOWED_DOMAINS.some(allowed => allowed.startsWith(url.origin))) return false;
        // 可选:进一步限制路径/参数(如只允许根路径或特定路径)
        if (url.pathname !== '/' && !url.pathname.startsWith('/dashboard')) return false;
        return url.toString();
    } catch (e) {
        return false;
    }
}

// 使用方式
if (dataX?.var1 === '1.1' || dataX?.var1 === '2.1') {
    const safeUrl = safeRedirect(dataX.domain); // 注意:dataX.domain 应为后端传入的完整 URL 字符串
    if (safeUrl) {
        window.location.href = safeUrl;
    } else {
        console.warn('Blocked unsafe redirect attempt');
        // 可选:降级处理,如跳转至首页或显示错误提示
        window.location.href = '/error';
    }
}

3. 服务端配合:绝不返回未经校验的跳转地址

PHP 后端在构造 AJAX 响应时,应对 domain 字段做前置过滤:

<?php
// PHP 示例:强制限定跳转目标
$allowed_domains = [
    'https://example.com',
    'https://app.yoursite.com'
];
$requested_domain = $_POST['target_domain'] ?? '';
$safe_domain = in_array($requested_domain, $allowed_domains) ? $requested_domain : '/';

echo json_encode(['domain' => $safe_domain]);
?>

⚠️ 重要提醒

  • ❌ 不要使用 Object.freeze() 或 const 声明来“加固”变量——它们无法阻止运行时注入,纯属误解;
  • ❌ 避免正则匹配或字符串 includes() 过滤(易被绕过,如 hTtP://、https://evil.com/..%2ftrusted.com);
  • ✅ 始终优先采用 URL 构造函数 + 白名单 + 协议校验组合策略;
  • ✅ 对所有用户输入(含 AJAX 响应、URL 参数、Cookie、localStorage)执行相同安全策略。

总结

XSS 风险不在于“跳转本身”,而在于将不可信数据当作代码上下文执行。window.location.href 是一个典型的“反射入口点”。修复核心是:切断不可信数据与执行环境的直接关联,用结构化校验代替字符串拼接。遵循上述方案,即可彻底消除该漏洞,同时保持代码简洁与可维护性。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

166

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

168

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

124

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

248

2024.09.24

cookie
cookie

Cookie 是一种在用户计算机上存储小型文本文件的技术,用于在用户与网站进行交互时收集和存储有关用户的信息。当用户访问一个网站时,网站会将一个包含特定信息的 Cookie 文件发送到用户的浏览器,浏览器会将该 Cookie 存储在用户的计算机上。之后,当用户再次访问该网站时,浏览器会向服务器发送 Cookie,服务器可以根据 Cookie 中的信息来识别用户、跟踪用户行为等。

6486

2023.06.30

document.cookie获取不到怎么解决
document.cookie获取不到怎么解决

document.cookie获取不到的解决办法:1、浏览器的隐私设置;2、Same-origin policy;3、HTTPOnly Cookie;4、JavaScript代码错误;5、Cookie不存在或过期等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

365

2023.11.23

阻止所有cookie什么意思
阻止所有cookie什么意思

阻止所有cookie意味着在浏览器中禁止接受和存储网站发送的cookie。阻止所有cookie可能会影响许多网站的使用体验,因为许多网站使用cookie来提供个性化服务、存储用户信息或跟踪用户行为。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

439

2024.02.23

cookie与session的区别
cookie与session的区别

本专题整合了cookie与session的区别和使用方法等相关内容,阅读专题下面的文章了解更详细的内容。

97

2025.08.19

Golang 实际项目案例:从需求到上线
Golang 实际项目案例:从需求到上线

《Golang 实际项目案例:从需求到上线》以真实业务场景为主线,完整覆盖需求分析、架构设计、模块拆分、编码实现、性能优化与部署上线全过程,强调工程规范与实践决策,帮助开发者打通从技术实现到系统交付的关键路径,提升独立完成 Go 项目的综合能力。

1

2026.02.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.1万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号