部署到IIS后React+MSAL应用window.crypto.randomUUID错误的解决方法

问题重现 #

React项目使用MSAL实现单点登录（SSO），本地开发环境运行正常，但部署到IIS后浏览器控制台出现以下错误：

index.54ff3299.js:899 Authentication error: TypeError: window.crypto.randomUUID is not a function
    at di (index.54ff3299.js:899:22460)
    at zf.getRequestCorrelationId (index.54ff3299.js:899:145330)
    at zf.loginPopup (index.54ff3299.js:899:145548)
    at Ty.loginPopup (index.54ff3299.js:899:151621)
    at c (index.54ff3299.js:899:154359)
    at Object.Sk (index.54ff3299.js:29:9871)
    at Ck (index.54ff3299.js:29:10025)
    at Ek (index.54ff3299.js:29:10082)
    at o0 (index.54ff3299.js:29:31522)
    at fb (index.54ff3299.js:29:31939)

可能原因 #

• 浏览器版本不兼容：window.crypto.randomUUID是ES2021新增的API，仅支持Chrome 90+、Firefox 95+、Edge 90+等较新版本浏览器，若用户使用旧版浏览器（如IE11）会直接触发该错误。
• 非安全上下文限制：本地开发时localhost被浏览器视为安全上下文，即使HTTP协议也能正常访问crypto API；但IIS部署若使用HTTP协议，浏览器会限制crypto API的部分功能，导致randomUUID无法调用。
• MSAL版本依赖：较新版本的MSAL（如msal-react@2.x）默认使用randomUUID生成请求关联ID，若部署环境不支持该API则会报错。

解决方法 #

1. 添加randomUUID Polyfill #

通过第三方库补全旧环境的API支持，步骤如下：

• 安装uuid库：

  npm install uuid
  

• 在应用入口文件（如src/index.js）顶部添加polyfill代码：

  import { v4 as uuidv4 } from 'uuid';
  
  // 检查并补全randomUUID
  if (!window.crypto?.randomUUID) {
    window.crypto.randomUUID = () => uuidv4();
  }
  

2. 配置IIS使用HTTPS #

将IIS站点切换到HTTPS协议，确保运行在安全上下文：

• 在IIS管理器中找到目标站点，添加HTTPS绑定并配置对应的SSL证书。
• 同步更新前端应用的跳转地址、MSAL配置中的redirectUri等参数为HTTPS协议。

3. 调整MSAL版本或配置 #

• 若不想使用polyfill，可尝试降级到不依赖randomUUID的MSAL版本（如msal-react@1.x系列），注意验证版本兼容性。
• 部分MSAL版本支持自定义生成请求ID的方式，可通过配置替换默认的randomUUID调用逻辑。

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