从安全角度看，向Ajax请求传递JWT令牌的最优方案是什么？

开发者阿泽

2026-6-20

Ajax请求传递JWT的安全方案对比

方案1：请求头中手动携带JWT

这种方式需要先把JWT存在前端存储（比如localStorage、sessionStorage），再手动将令牌加入Authorization请求头。

安全风险点：

前端存储的JWT可被JS直接读取，一旦页面遭遇XSS攻击，恶意脚本能轻松窃取令牌，进而冒充用户发起请求。
你提到的“令牌在客户端响应中可见”并非核心风险，真正的隐患在于前端存储的可访问性。

代码示例：

$.ajax({  
    type: "POST",  
    url: "https://localhost:44360/test",  
    headers: {  
        Authorization: 'Bearer ' + 'token22334556....'
    },  
    dataType: 'json',  
    success: function (result, status, xhr) {  
        ShowData(result);  
    },  
    error: function (xhr, status, error) {  
         alert(error);  
    }  
});

方案2：HTTP Only Cookie存储JWT并自动传递

将JWT存入标记为HttpOnly的Cookie中，浏览器会自动随请求携带该Cookie，且JS无法读取这个Cookie。

安全优势：

彻底规避XSS窃取JWT的风险：因为HttpOnly Cookie禁止JS访问，恶意脚本拿不到令牌。
配合Cookie的Secure（仅HTTPS传输）、SameSite=Strict/Lax（限制跨站请求携带）属性，能进一步降低传输和跨站风险。

注意事项：

需要防范CSRF攻击：由于Cookie会自动随请求发送，后端要配套CSRF验证机制，比如要求请求同时提交存于前端的CSRF令牌，或者依赖SameSite属性限制跨站请求。

代码示例：

$.ajax({  
    type: "POST",  
    url: "https://localhost:44360/test",
    xhrFields: {
     withCredentials: true
   },
dataType: 'json',  
    success: function (result, status, xhr) {  
        ShowData(result);  
    },  
    error: function (xhr, status, error) {  
         alert(error);
    }  
});