Не удается получить доступ к cssRules из локального файла css в Chrome 64

Вот простой пример проблемы:

<html>
<head>
<link rel='stylesheet' href='myStyle.css'>
<script>
window.onload=function(){
    try{
        alert(document.styleSheets[0]); // works
        alert(document.styleSheets[0].cssRules); // doesn't even print undefined
    }catch(e){alert(e)} // catch and alert the error
}
</script>
</head>
<body>
</body>
</html>

myStyle.css body{background-color:green;}

Сценарий работает нормально, если вы должны были использовать <style></style>

РЕШЕНИЯ:
1. работает, когда файлы онлайн / localhost
2. работает с другими браузерами (например, Internet Explorer, Microsoft Edge, Firefox)
3. chrome --allow-file-access-from-files

Источник

1 ответ

Решение

TL;DR. Начиная с Chrome 64, вам нужно будет использовать локальный сервер разработки для тестирования функциональности, которая зависит от объектной модели CSS.

Доступ к правилам CSS в таблице стилей, загруженной из локальной файловой системы, нарушает политику перекрестного общего доступа к ресурсам (CORS) - но Chrome не применял это до недавнего времени, а другие браузеры, похоже, еще не применяли его.

Chrome 64.0.3282.0 (выпущен в январе 2018 года, полный список изменений) включает в себя изменение правил безопасности для таблиц стилей. Я не смог найти это изменение в каком-либо журнале изменений, менее подробном, чем полный список изменений.

Коммит a4ebe08 в Chromium описан:

Обновить поведение CSSStyleSheet, чтобы оно соответствовало спецификации источника безопасности

Спецификация здесь: https://www.w3.org/TR/cssom-1/

Обновлено: следующие методы теперь выдают ошибку SecurityError, если таблица стилей недоступна:

  • cssRules () / rules ()
  • insertRule ()
  • deleteRule ()

Этот коммит исправляет ошибку Security: Несогласованная реализация CORS относительно CSS и элемента link. Связанная спецификация W3C подробно описывает, где использование объектной модели CSS требует доступа того же источника.

Это реальное ограничение безопасности, и решение, которое вы разместили (онлайн / локальный), является, вероятно, наиболее типичным решением. Для получения дополнительной информации ознакомьтесь с разделом MDN. Как настроить локальный сервер тестирования? - здесь обсуждается, почему и как использовать локальный сервер разработки, чтобы избежать проблем с CORS.

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

  • В этом комментарии к исходной ошибке безопасности сообщается, что единственный способ определить, что таблица стилей недоступна из JavaScript, - это try/catch,
  • Ошибка Chromium, открытая 23 января ( document.styleSheets.cssRules является нулевой, даже с Access-Control-Allow-Origin: *), предполагает, что может быть проблема реализации с новым правилом безопасности, которое нарушает определенные обходные пути.
  • Реализуемая спецификация кажется довольно стабильной, но она все еще имеет статус "Рабочий проект", так что кто знает, где она появится и что будут реализовывать другие браузеры.
Источник
Другие вопросы по тегам