about:srcdoc — служебный адрес документа, который браузер собрал из атрибута srcdoc у тега <iframe>. Внешнего сайта за ним нет: HTML-код фрейма записан прямо в странице-родителе, и браузеру нужно хоть как-то назвать такой документ. Отсюда и строка about:srcdoc в консоли, в инструментах разработчика и в location.href внутри фрейма.
Ниже разберём, где этот адрес встречается, как встроить HTML через srcdoc и какие ошибки ловят новички. Если вы только начинаете с разметкой, сначала пригодится разбор что такое HTML и как устроена страница, а системно язык разбирают на курсах HTML.
CheckroiПодборка курсов по HTML208 курсов • 42 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Откуда в браузере берётся about:srcdoc
Адрес появляется сам, как только на странице есть фрейм с атрибутом srcdoc. Так его называет стандарт HTML, и так он подписан в документации Chromium по особым адресам.
Чаще всего его видят в трёх местах:
- Консоль DevTools. Сообщение или ошибка из скрипта внутри фрейма подписаны источником about:srcdoc вместо адреса сайта.
- Выпадающий список контекстов в консоли Chrome: фрейм с
srcdocстоит там отдельной строкой. - JavaScript внутри фрейма.
location.hrefиdocument.URLвозвращают строкуabout:srcdoc.
На вирус или сбой браузера такой адрес не указывает. Так работают редакторы писем, онлайн-песочницы кода, превью шаблонов и виджеты, которые рисуют свой HTML внутри чужой страницы.
Как заглянуть внутрь about:srcdoc через DevTools
Содержимое фрейма видно в инструментах разработчика Chrome, открыть их можно клавишей F12. Удобнее всего идти так:
- Во вкладке Elements найдите тег
<iframe>и раскройте его. Под ним лежит#document: это и есть собранный из srcdoc документ. - Во вкладке Console откройте выпадающий список контекстов над строкой ввода (по умолчанию в нём стоит
top) и выберите фрейм. Теперь команды выполняются внутри него, иlocation.hrefвернётabout:srcdoc. - Если фрейм засыпает консоль сообщениями, в настройках консоли включите Selected context only: останутся только сообщения выбранного контекста.
Оба приёма описаны в справке Chrome DevTools по консоли. Пример там как раз про рекламный фрейм, который шумит в чужой консоли.
Канал основателя Checkroi Вани Буявца3 700 человек читают мой Телеграм-канал про нейросетиСобрал промпты для Claude Code и ChatGPT, разборы ИИ-инструментов и лайфхаки по продвижению бизнеса в одном местеПрисоединитьсяКак встроить HTML через srcdoc: пошаговая инструкция
Для проверки хватит одного файла. Если ещё не создавали его руками, вот как создать HTML-файл и открыть его в браузере.
- Создайте файл
index.htmlи добавьте в него тег<iframe>. - В атрибут
srcdocзапишите разметку, которую нужно показать во фрейме. Полный документ с<!doctype>и<body>писать не обязательно, хватит содержимого body. - Задайте ширину и высоту, иначе фрейм займёт 300 на 150 пикселей.
- Откройте файл в браузере и убедитесь, что текст появился внутри рамки.
- Усложните содержимое: внутри srcdoc работают те же теги, что на обычной странице, например таблицы или списки.
<iframe
width="400"
height="120"
srcdoc="<p>Привет из srcdoc</p>">
</iframe>Мы прогнали этот пример в Chrome 154: внутри фрейма document.body.innerText вернул «Привет из srcdoc», а location.href вернул about:srcdoc.
Чем srcdoc отличается от src и data-адреса
Все три способа кладут во фрейм документ, но ведут себя по-разному. Главное отличие srcdoc: фрейм живёт в том же источнике (origin), что и родительская страница. По справке MDN (страница на английском, русский перевод MDN убрал), если стоят оба атрибута, srcdoc важнее, а src остаётся запасным вариантом для браузеров без поддержки.
| Способ | Откуда берётся HTML | Адрес документа | Источник (origin) |
|---|---|---|---|
src="/page.html" |
отдельный запрос к серверу | адрес страницы | источник этого адреса |
srcdoc="…" |
строка в самом атрибуте | about:srcdoc | как у родителя |
src="data:text/html,…" |
строка в адресе | сам data-адрес | непрозрачный, null |
Проверили и приоритет. Фрейму дали сразу src="/other.html" и srcdoc="<p>победил srcdoc</p>": показался второй текст, запрос к другой странице на экран не попал.
Когда выбирать srcdoc, а когда src
srcdoc удобен, когда HTML у вас уже на руках и отдельный адрес ему не нужен. Типичные случаи:
- Превью письма или шаблона. Стили письма не смешиваются со стилями админки, потому что у фрейма свой документ.
- Песочница кода. Пользователь пишет разметку, и вы тут же показываете результат, без запроса к серверу.
- Изолированный виджет. Небольшой блок, которому нужен чистый CSS без влияния стилей страницы.
Отдельная страница через src лучше, когда контент большой, его нужно кешировать или открывать по прямой ссылке. Длинная строка в атрибуте раздувает HTML родителя, и браузер скачивает её при каждой загрузке страницы. Сами теги внутри srcdoc те же, что в обычной разметке: абзацы, заголовки, ссылки.
Как экранировать кавычки и спецсимволы
HTML внутри srcdoc лежит в значении атрибута, поэтому двойная кавычка обрывает его на полуслове. Правила из MDN сводятся к двум шагам.
- Двойные кавычки внутри разметки заменяйте на
". Можно и наоборот: атрибут в одинарных кавычках, а одинарные внутри заменять на'. - Амперсанд удваивайте. В srcdoc запись
<уже означает знак «меньше», то есть тег. Чтобы во фрейме был виден текст «<b>», пишите&lt;b&gt;.
<iframe srcdoc="<p>&lt;b&gt; это текст, а не тег</p>
<p title="подсказка">наведите курсор</p>"></iframe>В Chrome первая строка вышла как «<b> это текст, а не тег», атрибут title второго абзаца получил значение «подсказка».
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналsrcdoc и безопасность: зачем нужен sandbox
Код в srcdoc-фрейме без ограничений получает доступ к родителю. В нашем тесте скрипт из фрейма прочитал parent.document.title без единой ошибки. Чужой или пользовательский HTML в srcdoc без sandbox вставлять нельзя: он сможет читать и менять вашу страницу.
Решение: атрибут sandbox. Без значения allow-same-origin фрейм получает непрозрачный источник, и родительская страница для него закрыта.
<iframe sandbox="allow-scripts"
srcdoc="<script>parent.postMessage({o: self.origin}, '*')</script>">
</iframe>
// что пришло родителю:
{ o: "null" }Общаться с таким фреймом можно только сообщениями через postMessage. Набор разрешений для sandbox описан в стандарте: allow-scripts, allow-forms, allow-popups и другие.
Как менять содержимое фрейма из JavaScript
Атрибут доступен как свойство HTMLIFrameElement.srcdoc. Присвоили строку, и браузер пересобрал документ и вызвал событие load.
const frame = document.querySelector('iframe');
frame.addEventListener('load', () => {
console.log(frame.contentDocument.body.innerText); // "Новый текст"
}, { once: true });
frame.srcdoc = '<h1>Новый текст</h1>';Так устроены онлайн-редакторы вёрстки: вы печатаете код слева, а справа фрейм получает новую строку srcdoc. Каждое присваивание пересоздаёт документ целиком, поэтому переменные и обработчики старого содержимого пропадают.
Если нужно дописать кусок без замены всего документа, работайте с frame.contentDocument напрямую: без sandbox он доступен родителю, как обычный документ.
Частые ошибки и что с ними делать
Ссылка-якорь открывает во фрейме всю страницу
Симптом: клик по <a href="#end"> внутри srcdoc грузит во фрейм копию родительской страницы. Причина: базовый адрес srcdoc-документа совпадает с адресом родителя, и якорь превращается в /index.html#end. Мы воспроизвели это в Chrome: после клика у фрейма стал адрес родителя с хвостом #end.
Решение: пишите якоря полным адресом about:srcdoc#end, как советует MDN. Как вообще устроены ссылки и якоря, разобрано в статье про гиперссылки.
Картинки и ссылки ведут не туда
Относительный путь pic.png внутри srcdoc считается от страницы-родителя. В тесте он превратился в http://127.0.0.1:18977/pic.png, то есть в папку рядом с index.html.
Решение: храните файлы рядом с родителем или пишите адреса от корня сайта: /img/pic.png.
Разметка обрывается на первой кавычке
Двойная кавычка внутри значения закрыла атрибут, остальной код браузер прочитал как новые атрибуты тега iframe. Решение: экранирование из раздела выше: " вместо ".
Родитель читает фрейм раньше времени
Если родитель читает contentDocument сразу после присваивания srcdoc, документ ещё не собран. Решение: ждать события load, как в примере с JavaScript.
Ошибка в консоли «с about:srcdoc»
Браузер тут ни при чём: сломался скрипт внутри фрейма. В DevTools переключите контекст консоли на нужный фрейм и смотрите строку, указанную рядом с about:srcdoc.
Где освоить HTML и JavaScript системно
Фреймы, песочница и postMessage встречаются в работе фронтенд-разработчика каждую неделю: виджеты оплаты, превью писем, встроенные редакторы. Если хочется разбираться в этом не по одной статье, посмотрите дорожную карту фронтенд-разработчика и обзор профессии HTML-верстальщика.
Ниже пять программ по HTML с ценами и длительностью, данные обновляются вместе с сайтами школ.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| HTML и CSS с нуля Перейти на сайт курса |  Skillbox | 91 626 ₽ | 7635 ₽/мес. | 11 месяцев | Обзор курса |
| HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса |  HTML Academy | 23 400 ₽ | 3900 ₽/мес. | 2 месяца | Обзор курса |
| Основы вёрстки HTML и CSS Перейти на сайт курса |  Академия Синергия | 32 676 ₽ | 2723 ₽/мес. | 3 месяца | Обзор курса |
| HTML и CSS с нуля |  Skypro | 195 160 ₽ | 7972 ₽/мес. | 12 месяцев | Обзор курса |
| Frontend-разработчик: сайты на HTML/CSS/JavaScript Перейти на сайт курса |  Coddy | 9200 ₽ | - | 3 месяца | Обзор курса |
Больше программ — в полном каталоге курсов по HTML
