React+Hasura架构下MSAL令牌存储安全及使用问题咨询

我当前采用前端React、后端Hasura的技术架构，使用Azure进行身份认证，在React中运用Microsoft Authentication Library (MSAL)的msal.js及acquireTokenSilent方法。根据官方文档，调用acquireTokenSilent时，令牌会默认缓存至浏览器的sessionStorage中。

据了解，将令牌存储在浏览器存储中存在安全风险，易遭受XSS攻击。因此我尝试通过设置带有httponly=True、secure=True、samesite='Strict'属性的Cookie来存储令牌，以下是后端服务中用于设置FE Cookie的Hasura Action代码：

@set_token_api.route('/set_token', methods=['POST'])
def set_token():
    try:
        # return make_response("OK", 200)
        token = request.headers.get('Authorization', '').split(' ')[1]

        # Optionally, validate the JWT here if needed
        if not is_valid_token(token):
            return jsonify({'message': 'Invalid token', "status": "401"})

        response_data = {
            "message": f'Token set successfully {token}',
            "status": "200"
        }
        response = jsonify(response_data)

        response.set_cookie('jwt', token, httponly=True, secure=True, samesite='Strict')

        return response
    except Exception as e:
        # Handle any unexpected errors
        return jsonify({'message': str(e), "status": "500"})

触发Cookie设置的FE请求代码如下：

fetch('/api/rest/set_token', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Authorization: 'Bearer ' + accessToken, // Bearer token format
          },
        })

目前令牌同时存在于sessionStorage/localStorage和Cookie中。我了解到当前设置的Cookie可防范CSRF攻击，而请求中的accessToken是通过acquireTokenSilent获取并缓存的。

现咨询以下两个问题：

1. 为避免XSS攻击，是否需要移除浏览器存储中的accessToken？
2. 后续向BE发起所有请求仍需提供令牌，是否需要每次从Cookie中获取令牌？

1. 是否需要移除浏览器存储中的accessToken？ #

是的，必须移除。

sessionStorage/localStorage属于前端JS可直接访问的存储，一旦页面遭遇XSS攻击，恶意脚本能轻松读取其中的令牌并外传，直接导致身份盗用风险。而你配置的HttpOnly Cookie是前端无法读取的，能从根源上避免这类XSS窃取令牌的问题。

操作上，你可以在成功将令牌存入Cookie后，主动调用MSAL的缓存清除方法（比如msalInstance.clearCache()），同时修改MSAL的初始化配置：将缓存位置设置为memory（cache.location: 'memory'），这样令牌仅存在内存中，页面刷新后自动消失，彻底切断前端存储令牌的可能。

2. 后续请求是否需要从Cookie中获取令牌？ #

不需要，也做不到。

因为你设置的是HttpOnly Cookie，前端JS没有权限读取它的值。正确的流程是：

• 前端发起同域请求时，浏览器会自动将符合Secure、SameSite=Strict规则的Cookie附加到请求中；
• 后端（比如Hasura）调整认证逻辑，从请求Cookie中提取JWT令牌进行验证，而非依赖Authorization请求头。

这种方式既保留了Cookie的CSRF防护能力，又避免了前端接触敏感令牌的风险。

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