在Angular中通过MSAL对接Azure AD实现SSO时出现CSP错误

你的错误提示显示实际生效的CSP中connect-src仅包含'self' wss:，但你在index.html里明明配置了包含Azure AD token端点的规则，这说明配置未被正确应用，或存在其他冲突，以下是具体排查和解决方法：

• 检查CSP元标签语法正确性
  浏览器对CSP元标签格式敏感，换行、多余空格或引号错误都可能导致规则解析失败。建议将connect-src规则调整为紧凑格式，避免解析异常：

  <meta http-equiv="Content-Security-Policy"
    content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' https://login.microsoftonline.com; font-src 'self'; frame-src https://login.microsoftonline.com; img-src 'self'; manifest-src 'self'; media-src 'self'; worker-src 'none';">
  

• 排查服务器端是否存在CSP响应头
  若服务器（如NGINX、IIS、Azure App Service）也配置了CSP响应头，浏览器会合并元标签与响应头规则，取最严格限制。需检查服务器配置，要么移除服务器端CSP，要么在服务器端规则中添加Azure AD相关域名。

• 扩展CSP规则覆盖MSAL所有请求端点
  MSAL实现SSO时，不止会请求/token端点，还会用到授权、密钥发现等端点，直接添加整个login.microsoftonline.com域名更稳妥：

  • connect-src添加https://login.microsoftonline.com，覆盖令牌、授权、密钥发现等所有相关请求
  • frame-src添加https://login.microsoftonline.com，支持MSAL的静默登录（iframe方式）

• 验证实际生效的CSP规则
  打开浏览器开发者工具（F12），切换到「Network」标签，刷新页面后查看index.html的响应头，确认Content-Security-Policy内容与配置一致；或在「Console」标签查看完整CSP报错信息，确认触发限制的具体规则来源。

内容的提问来源于stack exchange，提问作者Akshay Kumar Sharma