A3 embeds enhancements

[busbyk]

Description

We still needed a few things for A3 embeds but #675 was already too big.

Those things are:

• Auto resize iframes
• Make sure custom background color for embeds works as expected (needed to add custom text color)
• Make sure PostHog analytics work as expected when embeds routes are embedded in iframes on third-party sites

Related Issues

Resolves #317

Key Changes

• Moves /embeds routes into their own route group (embeds) so we can use a different html skeleton for those routes

• Uses a different persistence setting for PostHog on /embeds route

• Adds textColor query param to /embeds/providers and /embeds/courses

• Adds a CustomEmbedStyles component which sets the custom background and text colors on the html and body tags as well to avoid a flash of transparent/white background when the iframe is resizing. This was particularly necessary for when closing a providers accordion.

• Uses IframeResizer for all GenericEmbed components.

  • I learned that all script tags were getting stripped out via two mechanisms:
    1. DOMPurify was ignoring the script tag set in ALLOWED_TAGS without also setting FORCE_BODY=true
    2. dangerouslySetInnerHTML removes script tags! Didn't know that.
  • It makes sense to just sandbox the html set for the GenericEmbed block in an iframe for security reasons. So now that we can auto-resize it to the content height, we might as well take this approach.
  • The only downside is that content will always render as height: 0 initially until @open-iframe-resizer has updated the height to fit the content height. This is opposed to content just being added directly to the DOM initially.

Future enhancements / Questions

I think we should add an optional initial height field to the GenericEmbed component. We had height at one point but I want to depend on open-iframe-resizer to set the height of the content. Initial height would allow a user to set a min-height on the containing iframe to help with avoiding layout shift. We'll need to be thorough in our description of the field so it won't be misused but would be very nice if we could get users to use it.

[github-actions]

Preview deployment: https://a3-embeds-enhancements.preview.avy-fx.org

[rchlfryn]

I took a look at education/classes/courses-by-external-providers locally or on preview, and the a3 embeds aren't working.. can you see them?

[rchlfryn]

Otherwise, it might be nice to add all the available options (like textColor etc.) to the see script, just so we remember. Or maybe we can just capture this in the docs

[rchlfryn]

Just a note: The embed was not leading on preview because of a mixed content error. This is low priotity

Mixed Content: The page at 'https://nwac.a3-embeds-enhancements.preview.avy-fx.org/education/classes/courses-by-external-providers' was loaded over HTTPS, but requested an insecure frame 'http://a3-embeds-enhancements.preview.avy-fx.org/embeds/providers'. This request has been blocked; the content must be served over HTTPS.