Alternatives to Adaptive Form embedding in external web page

Hi All,

We are trying to embed an AEM Adaptive form in an external web page that is build using Angular. As per the official documentation, we tried the HTML injection using Ajax and Jquery. Though this worked, it opened up a lot of security questions as the HTML is being injected into the hosting page. This cannot be sanitized by Angular due to the JS and CSS existing. Also, them having to map the relative paths of client libs to AEM Server.

Alternatives discussed were using iFrame. My question is to understand your take on both the approaches and what can be followed.

We are also discussing headless delivery, we are on prem but this can be a longer term goal for us. My understanding is HTML injection how is Adobe recommending this approach with such security concerns around ? Are there any mitigation controls we can put in place.

Thanks,

Abhishek