Azure AD B2C自定义登录页JavaScript无法运行问题排查

架构老林

2026-7-17

Azure AD B2C自定义登录页JavaScript不生效的排查与解决

核心问题分析

你的自定义页面在Blob存储中单独访问正常，但嵌入Azure AD B2C后JS失效，主要原因集中在B2C页面加载机制干扰原生事件和内容安全策略（CSP）限制内联脚本这两点。

具体解决步骤

1. 替换原生`onload`事件，适配B2C加载流程

Azure AD B2C的框架会接管页面加载逻辑，原生body onload事件会被延迟或覆盖，导致自定义函数无法触发。

修改代码，移除body标签的onload属性，改用DOMContentLoaded事件监听，并将脚本移至body末尾（确保DOM元素已加载）：

<!DOCTYPE html>
<html>
<head>
  <title>Login Page</title>
</head>
<body>
    <p id="welcomeText"></p>
    <div id="api"></div>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
      const welcomeText = document.getElementById('welcomeText');
      welcomeText.textContent = 'Welcome to the login page!';
    });
    </script>
</body>
</html>

2. 解决CSP对脚本的限制

Azure AD B2C默认的内容安全策略会拦截内联脚本，即使你已启用JavaScript，内联代码仍可能无法执行。有两种解决方式：

推荐方案：使用外部脚本文件
将脚本代码提取为单独的script.js文件，上传至同一Blob存储容器，在HTML中引用：
```
<script src="https://your-storage-account.blob.core.windows.net/your-container/script.js"></script>
```
临时测试方案：放宽CSP限制
在页面<head>中添加meta标签，允许内联脚本（注意：此方式存在安全风险，不建议生产环境使用）：
```
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';">
```