Azure AD B2C自定义用户界面是否支持SVG？

好消息是，Azure AD B2C自定义用户界面完全支持SVG——你遇到的SVG标签被省略的问题，本质上是B2C内置的HTML内容安全清理机制在默认配置下过滤了SVG相关的标签和属性。

问题原因 #

Azure AD B2C为了防范注入类安全风险，会对自定义UI页面的HTML内容进行严格的sanitization（内容清理）。默认的规则列表里并没有包含svg、circle这类SVG专属标签，以及它们的属性（比如cx、cy、stroke-width等），所以这些元素会被自动移除。

解决办法 #

你有两种可行的方案来解决这个问题：

方案1：修改自定义策略的HTML清理规则

通过调整B2C自定义策略中的HtmlSanitizer配置，明确允许SVG相关的标签和属性。具体步骤如下：

1. 打开你的自定义策略XML文件
2. 找到对应页面的ContentDefinition（比如api.signuporsignin）
3. 添加或修改HtmlSanitizer节点，把需要的SVG标签和属性加入允许列表

示例配置片段：

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://your-custom-ui-host.com/signup.html</LoadUri>
  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.5</DataUri>
  <Metadata>
    <Item Key="DisplayName">Signin and Signup</Item>
  </Metadata>
  <HtmlSanitizer>
    <AllowedTags>
      <!-- 添加SVG相关标签 -->
      <Add>svg</Add>
      <Add>circle</Add>
      <!-- 如果用其他SVG元素（比如rect、path），也要在这里添加 -->
    </AllowedTags>
    <AllowedAttributes>
      <!-- 添加SVG属性 -->
      <Add>width</Add>
      <Add>height</Add>
      <Add>cx</Add>
      <Add>cy</Add>
      <Add>r</Add>
      <Add>stroke</Add>
      <Add>stroke-width</Add>
      <Add>fill</Add>
    </AllowedAttributes>
  </HtmlSanitizer>
</ContentDefinition>

修改完成后，重新上传自定义策略到Azure AD B2C，你的内联SVG就能正常渲染了。

方案2：将SVG转为Base64嵌入（无需修改策略）

如果不想调整自定义策略，你可以把内联SVG编码成Base64格式，然后用普通的<img>标签引用。这种方式不会触发B2C的内容过滤，因为img标签是默认允许的。

比如你提供的SVG可以转成如下Base64编码：

<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIHN0cm9rZT0iZ3JlZW4iIHN0cm9rZS13aWR0aD0iNCIgZmlsbD0ieWVsbG93Ii8+PC9zdmc+" alt="Yellow circle with green border" />

直接把这段代码替换原来的<svg>标签即可，页面在B2C流程中就能正常显示SVG图形了。

验证 #

无论用哪种方案，修改后都可以启动B2C用户流进行测试——如果是方案1，确保策略已正确上传；如果是方案2，确认自定义UI页面已更新并重新部署到托管服务器。

内容的提问来源于stack exchange，提问作者James Wood