#8220: Inject sandbox into document root instead of body

[mnholtz]

What does this PR do?

• Part of RENDER_NUNJUCKS not available within 3 seconds #8220
• Injects the sandbox iframe into the document root instead of the document body
• This is to address the hypothesis that web pages are removing the iframe from the DOM before the mod has the chance to use it (the assumption is that it is less likely for webpages to wipe things in the document root vs. the body)

Discussion/Demo

• I'm able to consistently confirm that in the case of Docusign, the sandbox is always removed from the page after a certain point, causing a race with the mod component runtime: https://www.loom.com/share/e9ec1521b66e46fab93457a6ae391699
• This change resolves the issue in the case of Docusign, at least

Future Work

• The next PR I'm preparing
  • will remove injectIframe memoization so that we can ensure the iframe can be re-added on future brick runs if it does happen to get removed
  • and either leverage the MutationObserver approach I used to confirm behavior in the repro video (see above) or add retries to more thoroughly ensure that the iframe is on the page before executing a brick
  • throw more specific error to report if the iframe is not present on the page

Checklist

• Added jest or playwright tests and/or storybook stories - It's possible to make a page on our playground that can replicate this scenario, but I'm not 100% if we want to write an e2e test for this before we know that this is the cause of the majority of user issues

For more information on our expectations for the PR process, see the
code review principles doc

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 74.25%. Comparing base (8318d74) to head (9ccb875).
Report is 30 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8777      +/-   ##
==========================================
+ Coverage   74.24%   74.25%   +0.01%     
==========================================
  Files        1332     1332              
  Lines       40817    40866      +49     
  Branches     7634     7642       +8     
==========================================
+ Hits        30306    30347      +41     
- Misses      10511    10519       +8     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

Playwright test results

 85 passed
 1 flaky
 2 skipped

Details

 Open report ↗︎
 88 tests across 31 suites
 14 minutes, 9 seconds
 9ccb875

Flaky tests

edge › tests/pageEditor/saveMod.spec.ts › can save a standalone trigger mod

Skipped tests

chrome › tests/runtime/googleSheetsIntegration.spec.ts › can activate a google spreadsheet mod with config options
edge › tests/runtime/googleSheetsIntegration.spec.ts › can activate a google spreadsheet mod with config options

[twschiller]

@fregante any thoughts on using documentElement vs. body for the sandbox parent?

[twschiller]

Update "the body" comment. Add comment explaining where we're adding to the documentElement vs. the body

[mnholtz]

Thanks for catching that

[fregante]

LGTM. We do the same for the sidebar and other widgets

[github-actions]

When the PR is merged, the first loom link found on this PR will be posted to #sprint-demo on Slack. Do not edit this comment manually.