Что такое CORS и как он связан с элементами <iframe>, <img> и <script>?

Что представляет собой CORS и как он взаимодействует с , и ?

• CORS — браузерный механизм безопасности, предназначенный для управления доступом к ресурсам, расположенным на другом домене
• Он применяется, когда скрипты выполняют кросс-доменные запросы через XHR или fetch
• <script> и <img> — могут автоматически загружать ресурсы с других доменов без CORS
• <iframe> — получает документы с другого домена, однако чтение их содержимого возможно только с учётом политики одного источника (SOP)
• CORS предотвращает попытки JavaScript получить данные с другого домена без соответствующего разрешения
• CORS-заголовки, включая Access-Control-Allow-Origin, задают перечень доменов, которым разрешены вызовы API или чтение данных
• На практике <script> и <img> загружают ресурсы без использования CORS, тогда как <iframe> подчиняется политике безопасности, и CORS имеет значение для AJAX-запросов, выполняемых внутри него

Итак, CORS управляет программным доступом к ресурсам другого источника. Встроенные теги <img> и <script> работают по другому принципу и загружают контент без CORS, а <iframe> ограничивается политиками безопасности и требует CORS для взаимодействия внутри

Развёрнутый ответ

Главное

CORS (Cross-Origin Resource Sharing) — браузерный механизм безопасности, определяющий, каким образом страница с одного домена может обращаться к ресурсам другого домена, то есть выполнять кросс-доменные запросы. Он предотвращает несанкционированный обмен данными между разными origin и использует для этого HTTP-заголовки, например Access-Control-Allow-Origin. Если CORS не настроен, браузер по правилам Same Origin Policy блокирует большинство кросс-доменных AJAX-запросов.

Для встроенных элементов <iframe>, <img>, <script> правила иные: загрузка ресурсов с других доменов обычно разрешена, поскольку речь идёт не об AJAX-запросах, а о подключении встроенного контента. Однако при выполнении XHR/fetch из скрипта браузер применяет CORS.

Основные положения

• : внешний домен можно загрузить, но доступ к содержимому iframe из другого origin блокируется политикой SOP. CORS не регулирует саму загрузку, однако чтение DOM запрещено.
• и : ресурсы разрешено подключать без CORS, но для <script> важна политика безопасности. Например, CORS влияет на работу crossorigin атрибута, который отвечает за загрузку с разрешением доступа к ошибкам или кэшированию.
• Для динамических AJAX/fetch-запросов CORS обязателен, а сервер должен отправлять заголовки, разрешающие такой доступ.
• На тегах иногда указывают атрибут crossorigin, задающий способ обработки CORS-запросов, например crossorigin="anonymous".

Пример из практики

В React-приложении или SPA, когда фронтенд обращается к API на другом домене, сервер обязан вернуть корректные CORS-заголовки — иначе браузер заблокирует ответ. При этом CORS обычно не препятствует загрузке изображений через <img> или скриптов из CDN, хотя может влиять на доступ к ошибкам и кэширование. При встраивании стороннего содержимого через <iframe> необходимо учитывать sandbox и политику происхождения при работе с этим содержимым.