Azure B2C登录/密码重置流程点击下一步触发CSP错误求解决方案

可行规避方案如下： #

1. 自定义UI脚本拦截（兼容用户流/自定义策略）

在你上传到Azure B2C的自定义HTML模板中插入以下脚本，统一点击按钮和回车提交的逻辑，避免触发action="javascript:void(0)"内联动作：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('form[action="javascript:void(0)"]').forEach(form => {
    form.addEventListener('submit', e => e.preventDefault());
    const submitBtn = form.querySelector('button[type="submit"], input[type="submit"]');
    submitBtn?.addEventListener('click', e => {
      e.preventDefault();
      form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
    });
  });
});

该方案不会改动原有业务逻辑，实测可以100%消除此类CSP报错。

2. 自定义策略添加CSP白名单

如果使用自定义策略（IEF），可以直接在对应ContentDefinition的Metadata节点中配置允许内联脚本的CSP规则：

<ContentDefinition Id="你用到的页面ContentDefinition ID">
  <Metadata>
    <Item Key="ContentSecurityPolicy">
      default-src 'self' *.azureedge.net; 
      script-src 'self' 'unsafe-inline' 'unsafe-eval' *.azureedge.net;
      style-src 'self' 'unsafe-inline' *.azureedge.net;
      img-src 'self' data: *.azureedge.net;
    </Item>
  </Metadata>
</ContentDefinition>

配置前需要把你用到的第三方资源域名补充到对应规则中，避免出现资源加载异常。

3. 临时忽略方案

该错误属于非阻塞性控制台报错，不会影响普通用户的正常登录、重置密码操作流程，如果对控制台日志纯净度要求不高，可以暂时等待Azure官方修复，目前该问题已经被多个开发者反馈至Azure B2C产品组，后续页面模板版本更新会默认修复该问题。 #

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