Ошибка iframe в Chrome: не удалось прочитать "localStorage" из "окна": доступ к этому документу запрещен

У меня есть веб-приложение, которое использует localStorage. Теперь мы хотим встроить это веб-приложение в другие (сторонние) сайты с помощью iframe. Мы хотим предоставить встраивание iframe, аналогичное YouTube, чтобы другие веб-сайты могли встроить наше веб-приложение в iframe. Функционально он такой же, как если бы он не был встроен. Но это не работает. Chrome печатает сообщение об ошибке:

Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

Я просто делаю следующую проверку (в iframe):

if (typeof window.localStorage !== 'undefined') {
    // SETUP SESSION, AUHT, LOCALE, SETTINGS ETC
} else {
    // PROVIDE FEEDBACK TO THE USER
}

Я проверил свои настройки безопасности в Chrome, как описано в qaru.site/info/202484/... но это не работает. Есть ли какие-либо изменения, чтобы сделать возможным встраивание без необходимости настройки (по умолчанию) настроек безопасности большинства современных браузеров?

Чтобы получить больше информации, мы используем Ember-CLI для нашего веб-приложения и включили CSP (больше информации о Ember-CLI CSP). Может ли CSP вызвать в нашем веб-приложении ошибки безопасности?

Ответы

Ответ 1

В настройках Chrome > Конфиденциальность > Настройки контента у вас установлен параметр cookie, чтобы "Блокировать сайты от установки любых данных"

Этот флажок является тем, что вызывает исключение.

Ответ 2

В соответствии с этим

Это исключение генерируется, когда флажок "Блокировать сторонние файлы cookie и данные сайта" установлен в настройках контента.
Чтобы найти настройку, откройте настройки Chrome, введите "третий" в поле поиска, нажмите кнопку "Параметры содержимого" и просмотрите четвертый элемент в разделе "Файлы cookie".

введите описание изображения здесь

Ответ 3

Более безопасный способ сделать это в Chrome - это разрешить только те сайты, которым вы доверяете:

Chrome
  -> "Settings"
    -> "Show advanced settings..."
      -> "Privacy"
        -> "Content settings..."
          -> "Manage exceptions..."
            -> (add a pattern such as [*.]microsoft.com)
            -> be sure to hit enter
            -> "Done"
          -> "Done"

Ответ 4

Как уже отмечалось в комментариях, localstorage имеет только одно происхождение - начало страницы. Попытка доступа к странице localstorage из iframe, загруженного из другого источника, приведет к ошибке.

Лучшее, что вы можете сделать, это взломать его с помощью XDM через API postMessage. Эта библиотека предназначена для тяжелого подъема для вас, но я не пробовал. Тем не менее, я должен убедиться, что вы знаете IE ужасную поддержку XDM перед тем, как спуститься по этому маршруту.

Ответ 5

Чтобы избавиться от этого предупреждения - в настройках Chrome → Конфиденциальность → Настройки контента, вам необходимо очистить параметр "Блокировать сторонние файлы cookie и данные сайта"

Ответ 6

localStorage - для каждого домена. Если вы пытаетесь получить доступ к localStorage из автономного файла, то есть с протоколом file:///, сам по себе не существует домена. Следовательно, браузеры в настоящее время будут жаловаться, что ваш документ не имеет доступа к localStorage. Если вы поместите свой файл на веб-сервер (например, разворачиваете в Tomcat) и получите доступ к нему из localhost, вы сможете получить доступ к localStorage.

Ответ 7

На следующем URL: chrome://settings/content/cookies снимите флажок "Блокировать сторонние куки".

Ответ 8

imho, он не имеет ничего общего с настройками CSP в вашем приложении ember cli, а с настройками браузера. Некоторые браузеры (Chrome) блокируют содержимое localStorage, загруженное в iframe. Мы тоже сталкиваемся с аналогичной ситуацией для нашего приложения Ember, если у нас есть приложение ember и плагин, который загружается на сторонние сайты, пользовательский токен, загруженный в iframe, блокируется в Chrom, мы экспериментируем с некоторыми решениями, будем держать это сообщения о том, как это происходит.