自定义登录页面无法执行JavaScript的问题求助

一、修复2.1.14版本的正则匹配错误 #

• 检查注入的<api>标签及内部JS代码，避免使用未转义的正则元字符（如/、*、+），需转义为\/、\*、\+这类格式。
• 确保<api>标签格式合规，内部脚本必须包裹在<script>标签中，无嵌套错误，示例：

  <api>
    <script>
      // 正确转义正则字符
      const validUrlRegex = /https?:\/\/example\.com\/user\/\d+/g;
    </script>
  </api>
  

• 核对Policy XML的ContentDefinition配置，确认DataUri准确指向2.1.14版本，无额外正则校验冲突：

  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>
    <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:unifiedssp:2.1.14</DataUri>
    <Metadata>
      <Item Key="DisplayName">Signin and Signup</Item>
    </Metadata>
  </ContentDefinition>
  

二、解决旧版本（2.1.1/2.1.10）JS不执行的问题 #

• 绑定JS到页面生命周期事件，避免直接执行顶级代码，示例：

  document.addEventListener('DOMContentLoaded', function() {
    console.log('页面加载完成，执行自定义逻辑');
    // 示例：修改页面元素内容
    const submitBtn = document.querySelector('button[type="submit"]');
    if (submitBtn) submitBtn.innerText = '自定义提交';
  });
  

• 确认Enable JavaScript enforcing page layout已开启，同时检查CSP（内容安全策略）限制，若有相关报错，在Policy的ContentDefinition中添加对应元数据：

  <ContentDefinition Id="api.signuporsignin">
    <!-- 其他配置 -->
    <Metadata>
      <Item Key="Content-Security-Policy">script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';</Item>
    </Metadata>
  </ContentDefinition>
  

  注意：生产环境需缩小CSP范围，替换unsafe-inline为脚本哈希或非ce值，降低安全风险。

• 确保<api>标签放置在页面模板的<body>内部，无提前闭合或被其他元素遮挡的情况。

三、通用排查步骤 #

• 查看浏览器控制台的所有报错（网络、JS、CSP），语法错误或依赖缺失常导致JS静默失败。
• 先测试极简代码（如console.log('test')）确认执行有效性，再逐步添加复杂逻辑。
• 检查自定义页面HTML模板的语法，未闭合标签、嵌套错误会导致页面解析异常，影响JS执行。

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