In Azure User Flows, when you enable Java Script on newer page layout version. The script has to be included in the header.

Question

We are using the built in (recommended) user flows. On the latest page layout versions selfasserted for example. The <script> tag is only allowed to be inserted in the header. Based on the following Microsoft Documentation:

With Azure Active Directory B2C (Azure AD B2C) HTML templates, you can craft your users' identity experiences. Your HTML templates can contain only certain HTML tags and attributes. Basic HTML tags, such as <b>, <i>, <u>, <h1>, and <hr> are allowed. More advanced tags such as <script>, and <iframe> are removed for security reasons.

However, when inserted in the header, the listener document.addEventListener('DOMContentLoaded', function()

fires before <div api> is loaded. A solution that I found online is using a mutation observer. Can I get guidance or a recommendation.

var observer = new MutationObserver(() => {
        var apiElement = document.getElementById("api");
        if (apiElement) {
          init(apiElement);
          observer.disconnect();
        }
      });
      observer.observe(document, {
        attributes: false,
        childList: true,
        characterData: false,
        subtree: true,
      });

      function init(apiElement) {
        var emailInput = document.querySelector('input[type="email"]');
        if (emailInput) {
          emailInput.readOnly = true;
        }
      }