Skip to content

Generic embeds failing on chromium - switch to blob #952

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
rchlfryn wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

Generic embeds failing on chromium - switch to blob #952

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6a93de6
Add key to see if will sidestep chromes caching
rchlfryn Feb 18, 2026
c815dc3
Cache-busting via DOMPurify
rchlfryn Feb 18, 2026
726cf25
Add logging to understand
rchlfryn Feb 18, 2026
98ce32c
Retry hook and remove logs
rchlfryn Feb 18, 2026
01c4140
Remove hook and try script replace
rchlfryn Feb 18, 2026
d5bd814
Injects a fresh script element rather than relying on the browser to …
rchlfryn Feb 18, 2026
60b0e21
Add cache-busting to bypass Chrome's MemoryCache for module scripts i…
rchlfryn Feb 18, 2026
373437a
Add timestamp to url
rchlfryn Feb 18, 2026
bfe8b17
completely sidestep srcDoc
rchlfryn Feb 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 13 additions & 6 deletions src/blocks/GenericEmbed/Component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const GenericEmbedBlockComponent = ({
className,
isLexical = true,
}: Props) => {
const [sanitizedHtml, setSanitizedHtml] = useState<string | null>(null)
const [blobUrl, setBlobUrl] = useState<string | null>(null)

const bgColorClass = `bg-${backgroundColor}`
const textColor = getTextColorFromBgColor(backgroundColor)
Expand All @@ -29,7 +29,7 @@ export const GenericEmbedBlockComponent = ({
if (typeof window === 'undefined' || !html) return

// Normalize problematic quotes that are parsed incorrectly by DOMParser and DOMPurify
const normalizedHTML = html.replaceAll('"', '"').replaceAll('"', '"')
const normalizedHTML = html.replaceAll('\u201C', '"').replaceAll('\u201D', '"')

const sanitized = DOMPurify.sanitize(normalizedHTML, {
ADD_TAGS: ['iframe', 'script', 'style', 'dbox-widget'],
Expand Down Expand Up @@ -67,10 +67,17 @@ export const GenericEmbedBlockComponent = ({
</style>
`

setSanitizedHtml(sanitized + styleOverrides)
// Use a blob URL instead of srcDoc because Chromium doesn't re-execute
// scripts in srcDoc iframes after SPA client-side navigation.
const fullHtml = `<!DOCTYPE html><html><head></head><body>${sanitized}${styleOverrides}</body></html>`
const blob = new Blob([fullHtml], { type: 'text/html' })
const url = URL.createObjectURL(blob)
setBlobUrl(url)

return () => URL.revokeObjectURL(url)
}, [html])

if (sanitizedHtml === null) return null
if (blobUrl === null) return null

return (
<div className={cn(bgColorClass, textColor)}>
Expand All @@ -87,10 +94,10 @@ export const GenericEmbedBlockComponent = ({
<IframeResizer
id={String(id)}
title={`Embedded content ${id}`}
srcDoc={sanitizedHtml}
src={blobUrl}
sandbox="allow-scripts allow-presentation allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox"
className="w-full border-none m-0 p-0 transition-[height] duration-200 ease-in-out"
height={0} // This iframe will resize to it's content height - this initial height is to avoid the iframe rendering at the browser default 150px initially
height={0}
/>
</div>
</div>
Expand Down
Loading