Skip to content
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

chore: simulate cross-origin iframe in editor demo page #4460

Merged
merged 4 commits into from
Feb 10, 2025
+52 −36
Merged

chore: simulate cross-origin iframe in editor demo page #4460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4c83cd3
chore: simulate cross-origin iframe in editor demo page
LarsTheGlidingSquirrel Feb 5, 2025
3306f53
fix: use wildcard in iframe `allow`
LarsTheGlidingSquirrel Feb 5, 2025
c331b70
chore(editor-dev): simluate cross origin with one dev server
elbotho Feb 6, 2025
96be9ea
Merge pull request #4462 from serlo/simplified-cross-origin-demo
LarsTheGlidingSquirrel Feb 6, 2025
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
15 changes: 15 additions & 0 deletions packages/editor/demo/iframed-editor-and-preview/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!doctype html>
<html lang="en" style="height: 100%">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Editor & Preview (iframed)</title>
</head>
<body style="margin: 0; height: 100%">
<div id="root" style="height: 100%"></div>
<script
type="module"
src="/src/___dev-demo/iframed-editor-and-preview.tsx"
></script>
</body>
</html>
31 changes: 0 additions & 31 deletions packages/editor/demo/react-iframe/index.html
View file
Open in desktop

This file was deleted.

15 changes: 10 additions & 5 deletions packages/editor/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,18 @@
<body>
<main>
<h1>🐦 ✏️ 🚀</h1>
Test the editor code with hot reload

<h4>hot-reloads the editor:</h4>
<a href="/demo/react/">react</a> (edit only)<br />
<a href="/demo/react-preview/">react</a> (with preview)<br />
<a href="/demo/react-iframe/">iframed react</a> (edit only)
<h4>React component (hot-reloads the editor)</h4>
<a href="/demo/iframed-editor-and-preview/">editor & preview (iframed)</a
><br />
In the LTI integration the editor can be in a cross-origin iframe limiting
what it can do. Please check if your changes work here.<br />
<br />
<a href="/demo/react/">only editor</a><br />
<a href="/demo/react-preview/">editor & preview</a><br />

<h4>hot-reloads the component (but not the editor):</h4>
<h4>Web component (hot-reloads the component but not the editor)</h4>
<a href="/demo/web-component/">web component</a> (edit only)<br />
<a href="/demo/lit/">lit</a> (with preview)
</main>
Expand Down
27 changes: 27 additions & 0 deletions packages/editor/src/___dev-demo/iframed-editor-and-preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('root')!).render(
<iframe
style={{ width: '100%', height: '100%', borderWidth: '0' }}
// Embedding from subdomain (cross-origin-mock) on host page localhost:5173 simulates cross-origin.
// Important because a lot of iframe, cookie, CSP security measures are only in effect for cross-origin iframes.
src="http://cross-origin-mock.localhost:5173/demo/react-preview/"
sandbox={`
allow-downloads
allow-forms
allow-modals
allow-popups
allow-popups-to-escape-sandbox
allow-presentation
allow-same-origin
allow-scripts
allow-storage-access-by-user-activation
`}
allow={`
clipboard-read *;
clipboard-write *;
fullscreen *;
autoplay *
`}
></iframe>
)