如何在生成的.cshtml页面源代码中隐藏API调用所需的Authorization-Token令牌

结论 #

不存在完全对终端用户隐藏前端调用所需令牌的方法，只要令牌需要被前端JS读取并携带发起请求，终端用户就可以通过浏览器调试工具从静态资源、网络请求头中提取到令牌。你可以通过以下两种思路解决令牌泄露风险：

方案1：后端代理转发（推荐，从根源避免令牌泄露到前端） #

不要把令牌下发到前端，所有需要携带该令牌的API请求，都由你自己的后端服务代为转发：

1. 后端单独存储Authorization-Token，全程不对外暴露
2. 新增一个后端代理接口，接收前端的请求后，在服务端拼接请求参数、带上令牌，转发到目标API地址my-url
3. 后端拿到目标API的返回结果后，再透传给前端

前端不需要再携带任何令牌，代码调整为：

$.ajax({
    url: "/你的后端代理接口地址",
    type: "GET"
});

这个方案的令牌全程只存在于服务端，前端完全接触不到，彻底解决令牌泄露问题。

方案2：降低令牌泄露风险（无法做后端代理时的降级方案） #

如果受业务限制无法实现后端代理，可以通过以下措施降低泄露后的影响：

• 缩短令牌有效期：将令牌有效期设置为1~5分钟，用户拿到泄露的令牌也很快失效，无法长期滥用
• 缩小令牌权限：为该令牌开通当前业务场景所需的最小权限，避免令牌泄露后波及其他业务
• 绑定使用限制：签发令牌时绑定当前用户ID、客户端IP，服务端校验时如果信息不匹配直接拒绝请求
• 避免硬编码到静态资源：不要直接把令牌渲染到cshtml的静态代码里，改为页面加载后通过单独的接口动态获取临时令牌，同时给获取令牌的接口加上CSRF校验，只允许合法会话调用
• 混淆前端JS代码：增加用户从JS代码、请求中提取令牌的成本，注意这只能提高门槛，无法彻底防止令牌被获取

注意 #

只要令牌需要被前端用来发起请求，就不可能完全对用户隐藏。因此只要条件允许，优先选择后端代理方案。

内容的提问来源于stack exchange，提问作者AlexB