Skip to content

Commit e62bd12

Browse files
simonwsimonw
authored
iframe-sandbox.html
https://gist.github.com/simonw/54f508d956acd4fb7ca30c3350de6e22
1 parent 720f22f commit e62bd12

File tree

1 file changed

+196
-0
lines changed

1 file changed

+196
-0
lines changed

‎iframe-sandbox.html

+196
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>iframe sandbox</title>
5+
<style>
6+
* {
7+
box-sizing: border-box;
8+
margin: 0;
9+
padding: 0;
10+
}
11+
12+
body {
13+
font-family: system-ui, -apple-system, sans-serif;
14+
padding: 20px;
15+
max-width: 1200px;
16+
margin: 0 auto;
17+
}
18+
19+
.container {
20+
display: flex;
21+
gap: 20px;
22+
margin-bottom: 20px;
23+
}
24+
25+
@media (max-width: 768px) {
26+
.container {
27+
flex-direction: column;
28+
}
29+
}
30+
31+
.editor {
32+
flex: 1;
33+
display: flex;
34+
flex-direction: column;
35+
gap: 10px;
36+
}
37+
38+
.preview {
39+
flex: 1;
40+
display: flex;
41+
flex-direction: column;
42+
gap: 10px;
43+
}
44+
45+
textarea {
46+
width: 100%;
47+
height: 400px;
48+
font-family: monospace;
49+
padding: 10px;
50+
border: 1px solid #ccc;
51+
border-radius: 4px;
52+
resize: vertical;
53+
}
54+
55+
iframe {
56+
width: 100%;
57+
height: 400px;
58+
border: 1px solid #ccc;
59+
border-radius: 4px;
60+
}
61+
62+
.controls {
63+
display: flex;
64+
flex-wrap: wrap;
65+
gap: 10px;
66+
margin-bottom: 10px;
67+
}
68+
69+
.checkbox-group {
70+
display: flex;
71+
align-items: center;
72+
gap: 5px;
73+
}
74+
75+
button {
76+
padding: 8px 16px;
77+
background: #0070f3;
78+
color: white;
79+
border: none;
80+
border-radius: 4px;
81+
cursor: pointer;
82+
}
83+
84+
button:hover {
85+
background: #0051a2;
86+
}
87+
88+
label {
89+
user-select: none;
90+
}
91+
</style>
92+
</head>
93+
<body>
94+
<div class="container">
95+
<div class="editor">
96+
<h3>iframe sandbox</h3>
97+
<textarea id="codeEditor"></textarea>
98+
<button id="updatePreview">Update Preview</button>
99+
</div>
100+
101+
<div class="preview">
102+
<iframe id="preview"></iframe>
103+
Sandbox controls
104+
<div class="controls" id="sandboxControls"></div>
105+
</div>
106+
</div>
107+
108+
<script>
109+
// Default HTML template
110+
const defaultHtml = `<!DOCTYPE html>
111+
<html>
112+
<head>
113+
<style>
114+
.output {
115+
margin: 20px;
116+
padding: 10px;
117+
border: 1px solid #ccc;
118+
}
119+
</style>
120+
</head>
121+
<body>
122+
<input type="text" id="userInput" placeholder="Type something...">
123+
<div class="output" id="output">Output will appear here</div>
124+
125+
<script>
126+
const input = document.getElementById('userInput');
127+
const output = document.getElementById('output');
128+
129+
input.addEventListener('input', (e) => {
130+
output.textContent = e.target.value;
131+
});
132+
<\/script>
133+
</body>
134+
</html>`;
135+
136+
// Sandbox options
137+
const sandboxOptions = [
138+
{ value: 'allow-forms', label: 'Forms' },
139+
{ value: 'allow-modals', label: 'Modals' },
140+
{ value: 'allow-orientation-lock', label: 'Orientation Lock' },
141+
{ value: 'allow-pointer-lock', label: 'Pointer Lock' },
142+
{ value: 'allow-popups', label: 'Popups' },
143+
{ value: 'allow-popups-to-escape-sandbox', label: 'Popups Escape Sandbox' },
144+
{ value: 'allow-presentation', label: 'Presentation' },
145+
{ value: 'allow-same-origin', label: 'Same Origin' },
146+
{ value: 'allow-scripts', label: 'Scripts' },
147+
{ value: 'allow-top-navigation', label: 'Top Navigation' }
148+
];
149+
150+
// Get DOM elements
151+
const codeEditor = document.getElementById('codeEditor');
152+
const preview = document.getElementById('preview');
153+
const updatePreviewBtn = document.getElementById('updatePreview');
154+
const sandboxControls = document.getElementById('sandboxControls');
155+
156+
// Set initial editor content
157+
codeEditor.value = defaultHtml;
158+
159+
// Create sandbox checkboxes
160+
sandboxOptions.forEach(option => {
161+
const div = document.createElement('div');
162+
div.className = 'checkbox-group';
163+
164+
const checkbox = document.createElement('input');
165+
checkbox.type = 'checkbox';
166+
checkbox.id = option.value;
167+
checkbox.checked = option.value === 'allow-scripts'; // Enable scripts by default
168+
169+
const label = document.createElement('label');
170+
label.htmlFor = option.value;
171+
label.textContent = option.label;
172+
173+
div.appendChild(checkbox);
174+
div.appendChild(label);
175+
sandboxControls.appendChild(div);
176+
});
177+
178+
// Update preview function
179+
function updatePreview() {
180+
const checkedOptions = Array.from(sandboxControls.querySelectorAll('input:checked'))
181+
.map(input => input.id)
182+
.join(' ');
183+
184+
preview.setAttribute('sandbox', checkedOptions);
185+
preview.srcdoc = codeEditor.value;
186+
}
187+
188+
// Event listeners
189+
updatePreviewBtn.addEventListener('click', updatePreview);
190+
sandboxControls.addEventListener('change', updatePreview);
191+
192+
// Initial preview
193+
updatePreview();
194+
</script>
195+
</body>
196+
</html>

0 commit comments

Comments
 (0)