Атрибут sandbox тега <iframe> — обмеження для вмісту
автор: с3с
Загальний опис
автор: NagarD
Синтаксис
<iframe sandbox="value">Атрибут sandbox може отримувати 7 значень:
-
без значення -
Застосовуються всі обмеження
автор: с3с -
allow-forms -
Дозволяється повторне подання форми.
автор: с3с -
allow-pointer-lock -
Дозволяє API,
автор: с3с -
allow-popups -
Дозволяє спливаючі вікна
автор: с3с -
allow-same-origin -
Зміст iframe слід розглядати як того ж походження
автор: с3с -
allow-scripts -
Дозволяє сценарії
автор: с3с -
allow-top-navigation -
Дозволяє відкривати посилання фрейма в батьківському документі.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 5 | 17 | 5 | 15 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 17 | 4 |
Приклади
+ запропонувати свій приклад у пісочниці
Дві однакові рамки з тим самим вмістом у srcdoc: у нижньої додано sandbox, і скрипт у ній не запустився.
HTML
<h3>Без sandbox — скрипт у рамці виконався</h3>
<iframe srcdoc="<p id='s' style='font:15px system-ui'>Скрипт заблоковано</p><script>document.getElementById('s').textContent='Скрипт виконався'</script>"></iframe>
<h3>З sandbox — той самий вміст, скрипт не запустився</h3>
<iframe sandbox srcdoc="<p id='s' style='font:15px system-ui'>Скрипт заблоковано</p><script>document.getElementById('s').textContent='Скрипт виконався'</script>"></iframe>CSS
h3 { font-size: 15px; margin: 12px 0 6px; }
iframe {
display: block;
width: 320px;
height: 56px;
border: 2px solid #94a3b8;
margin-bottom: 12px;
}<p>З атрибутом <code>sandbox="allow-top-navigation"</code> — рамці лишили тільки навігацію, скрипти заборонені:</p>
<iframe width="260" height="90" title="Рамка з sandbox" sandbox="allow-top-navigation"
srcdoc="<p id='s' style='font:14px sans-serif'>Скрипт НЕ виконався</p><script>document.getElementById('s').textContent = 'Скрипт виконався'</script>"></iframe>
<br>
<br>
<p>Без атрибута <code>sandbox</code> — рамка дістає ті самі права, що й сторінка навколо:</p>
<iframe width="260" height="90" title="Рамка без sandbox"
srcdoc="<p id='s' style='font:14px sans-serif'>Скрипт НЕ виконався</p><script>document.getElementById('s').textContent = 'Скрипт виконався'</script>"></iframe>Різниця між HTML 4.01 та HTML5
Атрибут sandbox з’явився тільки у HTML5.
Коментарі
Коментарів ще немає — будьте першим!