SecurityError: Заблокирован доступ к фрейму из-за политики CORS

Question

Я загружаю элемент <iframe> на своей HTML-странице и пытаюсь получить доступ к элементам внутри него с помощью JavaScript, но когда я пытаюсь выполнить свой код, получаю следующую ошибку:

SecurityError: Blocked a frame with origin "http://www.example.com" from accessing a cross-origin frame.

Как я могу получить доступ к элементам в этом фрейме?

Я использую следующий код для тестирования, но безуспешно:

$(document).ready(function() {
    var iframeWindow = document.getElementById("my-iframe-id").contentWindow;

    iframeWindow.addEventListener("load", function() {
        var doc = iframe.contentDocument || iframe.contentWindow.document;
        var target = doc.getElementById("my-target-id");

        target.innerHTML = "Found it!";
    });
});

Подскажите, как решить эту проблему?

Answer 1

На самом деле, существует обходной путь для определенных сценариев.

Если у вас запущены два процесса на одном домене, но на разных портах, то два окна могут взаимодействовать без ограничений (например, localhost:3000 и localhost:2000). Чтобы это работало, каждое окно должно изменить свой домен на общий источник:

document.domain = 'localhost';

Этот метод также работает в случае, если вы работаете с различными подпунктами на одном втором уровне домена, например, если вы находитесь на john.site.example и пытаетесь получить доступ к peter.site.example или просто site.example:

document.domain = 'site.example';

Явно установив document.domain, браузер будет игнорировать различия в хостнейме, и окна могут рассматриваться как происходящие из одного источника. Теперь, в родительском окне, вы сможете получить доступ к содержимому iframe следующим образом: frame.contentWindow.document.body.classList.add('happyDev');

Answer 2

Вы можете добавить конкретную конфигурацию Java Spring, которая повлияет на настройку политики безопасности контента (Content Security Policy, CSP) в вашем веб-приложении или шлюзе. В Spring вы можете реализовать это, расширяя класс WebSecurityConfigurerAdapter. Вот пример, как можно настроить CSP:

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        .headers()
            .contentSecurityPolicy("script-src 'self' [URLDomain]/scripts; " +
                                   "style-src 'self' [URLDomain]/styles; " +
                                   "frame-src 'self' [URLDomain]/frameUrl;")
            .and()
            .referrerPolicy(ReferrerPolicyHeaderWriter.ReferrerPolicy.STRICT_ORIGIN_WHEN_CROSS_ORIGIN);
    // Другие настройки безопасности...
}

Краткое описание каждого элемента:

contentSecurityPolicy(...): Здесь вы определяете, какие источники контента будут считаться безопасными. В приведённом примере мы разрешаем загрузку скриптов и стилей только с вашего домена и заданных URL.
.referrerPolicy(...): Этот параметр задаёт политику отправки реферера. В данном случае используется строгая политика, которая ограничивает информацию о источнике запроса, когда происходит переход к внешним ресурсам.

Обратите внимание, что браузер заблокирует загрузку контента, если вы не определите безопасные внешние ресурсы. Поэтому важно внимательно настраивать эти параметры, чтобы избежать проблем с загрузкой необходимого контента на вашем сайте.

Answer 3

Если у вас есть возможность контролировать содержимое iframe, то есть если оно загружено в конфигурации с перекрестным происхождением, как на Amazon Mechanical Turk, вы можете обойти эту проблему с помощью атрибута <body onload='my_func(my_arg)'> для внутреннего HTML.

Например, для внутреннего HTML используйте параметр this (да, this определён и ссылается на родительское окно внутреннего элемента body):

<body onload='changeForm(this)'>

Внутри HTML:

function changeForm(window) {
    console.log('внутреннее окно загружено: делайте всё, что хотите с внутренним HTML');
    window.document.getElementById('mturk_form').style.display = 'none';
}

Таким образом, вы можете управлять элементами внутри вашего iframe, используя родительское окно this.

Answer 4

Я столкнулся с этой ошибкой при попытке внедрить iframe и открыл сайт в браузере Brave. Ошибка исчезла, когда я переключил настройки на "Shields Down" для данного сайта. Очевидно, это не полное решение, так как любой другой пользователь, посещающий сайт с Brave, столкнется с той же проблемой. Чтобы действительно решить эту проблему, мне нужно выполнить одно из других действий, описанных на этой странице. Но, по крайней мере, теперь я знаю, где заключается проблема.

SecurityError: Заблокирован доступ к фрейму из-за политики CORS

4 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных