Best Approach for Token-Based Prefill in AEM Forms via iFrame

[mancillaignAdobe]

Hi AEM Community,

I'm working on an AEM Forms implementation and need some guidance on the best approach for the following use case:

Requirements:

• The form is embedded in an iFrame on an external website
• The parent page URL contains a token parameter that needs to be captured
• This token must be used to make a backend API call to retrieve user data
• The API response should prefill specific form fields (name and email)

Flow:

Parent URL (with token) → iFrame loads AEM Form → Capture token → Backend API call → Prefill form fields

My Questions:

1. What's the recommended approach for this scenario in AEM Forms?
   • Custom Prefill Service vs Client-side implementation?
   • How to properly capture URL parameters from parent window when in iFrame?
2. Should I create a custom servlet/OSGi service to proxy the external API call, or can this be handled differently?
3. Are there any OOTB features in AEM Forms that would simplify this implementation?

Has anyone implemented a similar pattern? What approach worked best for you?

Any guidance, code samples, or best practices would be greatly appreciated!

Thanks in advance!

[muskaanchandwani]

Hello @mancillaignAdobe 
You can try the below :

You can :

- Use window.postMessage to securely send token from parent to iFrame.

// Parent page
const token = new URL(window.location.href).searchParams.get('token');
document.getElementById('aem-form-iframe').contentWindow
.postMessage({ token }, 'https://your-aem-domain.com');

// AEM Form (iFrame)
window.addEventListener('message', (event) => {
if (event.data.token) {
const token = event.data.token;
// Use token for API call
}
});

- Not expose external API or token client-side; send token to custom AEM servlet.

// iFrame JS (after receiving token)
fetch('/bin/userdata', {
method: 'POST',
body: JSON.stringify({ token }),
headers: { 'Content-Type': 'application/json' }
})
.then(r => r.json())
.then(data => {
// Prefill fields
document.getElementById('name').value = data.name;
document.getElementById('email').value = data.email;
});

- Implement Custom AEM Servlet to handle receiving token and fetching user data.

@SlingServlet(paths = "/bin/userdata", methods = "POST")
public class UserDataServlet extends SlingAllMethodsServlet {
protected void doPost(SlingHttpServletRequest req, SlingHttpServletResponse resp) throws IOException {
String token = req.getParameter("token");
// Fetch user info from backend API using token
// Return JSON: {"name":"John Doe", "email":"john@example.com"}
}
}

- After receiving user data, set form field values via JS:

document.getElementById('name').value = data.name;
document.getElementById('email').value = data.email;

You can also prefill using OOTB Prefill Service.
https://experienceleague.adobe.com/en/docs/experience-manager-learn/forms/adaptive-forms/prefill-ser...