Ошибка Not allowed to load local resource: blob:... появляется в консоли DevTools, когда страница пытается обратиться к blob-URL, созданному в другом контексте — например, загрузить его в iframe, открыть через window.open или использовать после того, как объект уже освобождён вызовом URL.revokeObjectURL(). Браузер блокирует такое обращение из соображений безопасности, и в результате изображение, видео или сгенерированный файл просто не отображаются.
Чаще всего с проблемой сталкиваются веб-разработчики при работе с File API, динамической генерацией файлов на клиенте или предпросмотром загружаемых изображений. Реже ошибку видят обычные пользователи — например, когда расширение браузера или устаревший скрипт сайта пытается подгрузить локальный ресурс некорректным способом. В этой статье разберём причины блокировки, рабочие способы исправления кода и варианты диагностики для тех, кто столкнулся с ошибкой как пользователь.
Что такое blob-URL и почему браузер его блокирует
Blob (Binary Large Object) — это объект с бинарными данными, созданный в памяти браузера. Метод URL.createObjectURL(blob) генерирует временную ссылку вида blob:https://site.ru/uuid, по которой можно обратиться к этим данным как к обычному файлу: вставить в <img>, отдать на скачивание или воспроизвести в плеере.
Ключевая особенность: blob-URL привязан к origin (источнику) и к документу, который его создал. Если попытаться использовать эту ссылку в другом контексте — другом окне, iframe с чужим доменом, после перезагрузки страницы или после освобождения объекта — браузер откажется загружать ресурс. Именно это и означает сообщение Not allowed to load local resource: с точки зрения движка ссылка указывает на «локальный» объект, недоступный извне своего контекста.
Такое поведение — не баг, а осознанное ограничение безопасности. Без него вредоносный сайт мог бы подставлять ссылки на данные, сгенерированные другими страницами.
Типичные сценарии появления ошибки
Прежде чем чинить, полезно понять, в каком именно месте ломается логика. Ниже — ситуации, в которых сообщение возникает чаще всего.
- 🔄 Повторное использование отозванного URL — код вызывает
URL.revokeObjectURL(), а затем снова пытается показать тот же blob в другом элементе. - 🪟 Открытие blob в новой вкладке через window.open — в части сценариев и браузерных конфигураций такой переход блокируется, особенно если ссылка передаётся с задержкой или из асинхронного колбэка.
- 🖼️ Вставка blob-URL в iframe с другим origin — встроенный документ не имеет доступа к объектам родительской страницы.
- 💾 Сохранение ссылки «на потом» — blob-URL записывается в localStorage или передаётся между сессиями, хотя после перезагрузки страницы он становится недействительным.
- 🧩 Конфликт с расширениями — блокировщики рекламы и приватности иногда режут blob-запросы, принимая их за подозрительную активность.
Если вы пользователь, а не разработчик, и видите ошибку в консоли на чужом сайте — почти наверняка проблема на стороне сайта или ваших расширений. Исправить её своими силами можно только отключением конфликтующих дополнений.
Диагностика: как найти источник проблемы
Откройте DevTools клавишей F12 и перейдите на вкладку Console. Сообщение об ошибке обычно содержит полный blob-URL — скопируйте его и проверьте, где в коде создаётся этот объект. Удобно поставить точку останова на строке с createObjectURL и проследить жизненный цикл ссылки.
Далее проверьте три вещи: не вызывается ли revokeObjectURL раньше времени, не передаётся ли ссылка в другой контекст (iframe, новое окно, worker) и не пытается ли страница использовать её после перезагрузки. Во вкладке Network заблокированный запрос будет виден со статусом ошибки — это помогает отличить блокировку от обычного 404.
Способы исправления в коде
Основной принцип: используйте blob-URL немедленно и только в том документе, где он создан. Ниже — проверенные подходы для типовых задач.
Предпросмотр изображения. Создавайте URL прямо перед присвоением и отзывайте его только после загрузки:
const url = URL.createObjectURL(file);
img.onload = () => URL.revokeObjectURL(url);
img.src = url;
Скачивание сгенерированного файла. Создайте временную ссылку, кликните по ней программно и отзовите URL с небольшой задержкой — иначе браузер может не успеть начать загрузку:
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'report.pdf';
a.click();
setTimeout(() => URL.revokeObjectURL(a.href), 1000);
Передача данных в iframe. Вместо blob-URL используйте postMessage — передайте сами данные или строку Data URL (base64), которая не привязана к контексту. Для небольших файлов метод FileReader.readAsDataURL() часто оказывается проще и надёжнее.
☑️ Проверка кода перед исправлением
⚠️ Внимание: не пытайтесь «обойти» ограничение отключением флагов безопасности браузера на постоянной основе. Это снижает защиту от вредоносных сайтов и не решает проблему у ваших пользователей.
Сравнение подходов к передаче бинарных данных
Выбор метода зависит от задачи: размера данных, необходимости кросс-контекстной передачи и поддержки скачивания.
| Метод | Живёт между сессиями | Работает в iframe с чужим origin | Подходит для |
|---|---|---|---|
| blob-URL (createObjectURL) | Нет | Нет | Предпросмотр, скачивание в том же документе |
| Data URL (base64) | Да (можно сохранить) | Да | Небольшие изображения, передача между контекстами |
| postMessage + Blob | Нет | Да (с явной передачей) | Обмен данными между окнами и iframe |
| Загрузка на сервер + обычный URL | Да | Да | Большие файлы, постоянные ссылки |
Для файлов большого размера Data URL нежелателен: кодирование в base64 заметно увеличивает объём и нагружает память. В таких случаях надёжнее загрузить файл на сервер и оперировать обычной ссылкой.
Что делать, если ошибка возникает на чужом сайте
Когда сообщение появляется на стороннем ресурсе, а вы обычный посетитель, вариантов немного, но они есть. Сначала обновите страницу с очисткой кэша (Ctrl + Shift + R) — возможно, сайт подгрузил устаревший скрипт. Затем проверьте режим инкогнито, чтобы исключить влияние расширений.
Если ошибка сохраняется в чистом профиле, проблема на стороне сайта. Можно сообщить владельцам ресурса через доступные на сайте каналы обратной связи, указав текст ошибки и шаги воспроизведения. Самостоятельно чинить чужой код через DevTools бессмысленно — изменения не сохранятся.
⚠️ Внимание: не устанавливайте сторонние «фиксеры ошибок браузера» из непроверенных источников. Такие утилиты часто оказываются вредоносными, а описываемая ошибка не лечится внешними программами.
Почему window.open с blob-URL иногда блокируется
Браузеры привязывают открытие окон к пользовательскому жесту (клику). Если blob-URL создаётся асинхронно — например, после await fetch — новое окно может быть заблокировано как попап. Решение: открыть окно синхронно по клику, а затем назначить ему location, либо использовать скачивание через временную ссылку с атрибутом download.
Профилактика: как не допустить ошибку в проекте
Несколько простых правил избавят от большинства случаев блокировки. Во-первых, заведите единое место в коде, где создаются и отзываются blob-URL, — так проще контролировать их жизненный цикл. Во-вторых, никогда не кэшируйте blob-ссылки между сессиями: храните сами данные (например, в IndexedDB) и генерируйте URL заново при необходимости.
Наконец, тестируйте сценарии с iframe, новыми окнами и Service Worker отдельно — именно в этих местах контекстные ограничения проявляются чаще всего.
Частые вопросы
Можно ли открыть blob-URL из адресной строки браузера?
Нет. Прямой ввод blob-URL в адресную строку или переход по такой ссылке извне заблокирован — ссылка действительна только внутри документа, который её создал.
Ошибка появляется только в Chrome, а в Firefox всё работает. Почему?
Браузеры по-разному трактуют граничные сценарии: открытие окон из асинхронного кода, навигацию на blob-URL верхнего уровня. Chrome в этих случаях обычно строже. Ориентируйтесь на безопасные паттерны — скачивание через временную ссылку и postMessage для iframe.
Чем заменить createObjectURL для передачи изображения в iframe?
Используйте FileReader.readAsDataURL() и передайте base64-строку через postMessage, либо отправьте сам Blob через postMessage и создайте blob-URL уже внутри iframe.
Опасна ли эта ошибка для данных на компьютере?
Нет. Это штатное ограничение безопасности браузера, а не признак вируса или сбоя системы. Данные в blob-объекте просто не загружаются — ничего не повреждается.
Можно ли отключить эту блокировку флагом браузера?
Для локальной отладки существуют флаги запуска, ослабляющие проверки безопасности, но применять их стоит только в изолированном тестовом профиле. Постоянная работа с отключённой защитой небезопасна и не решает проблему у конечных пользователей.