Безопасная работа с пользовательским CSS и публичными темами: общий источник, границы рендеринга и фиксированные версии

Редактор профиля, в котором можно менять цвета и отступы через GUI, а также редактировать всю компоновку с помощью CSS, должен учитывать и удобство интерфейса, и безопасность кода на публичных страницах. Этот обезличенный пример описывает границы редактирования и распространения.

Отдельный выбор свободы оформления и распространения

Для личного редактирования сначала проверьте границы области и конфликты сохранения. Распространение требует фиксированных ID версий, условий и стандартного вида при блокировке. Небольшой темой с Grid и псевдоэлементами проверьте неизменность внешней навигации и применённой версии после обновлений автора.

W3C Selectors：Проверка области действия селекторов

Используйте один источник CSS для GUI и прямого редактирования

В последующем расширении весь CSS стал основным источником темы, а GUI изменили так, чтобы он редактировал те же объявления CSS. Сохраняются написанные вручную комментарии, объявления, которыми GUI не управляет, и адаптивные правила. Старый формат с настройками GUI и дополнительным CSS также переносится в полную редактируемую таблицу стилей. Изменение только вспомогательных настроек для отображения списка параметров не означает, что изменился CSS, используемый для рендеринга.

Расширения backend и frontend были отдельно слиты в соответствующие ветки main; проверены CI и тесты реализации. В рамках этой проверки это не подтверждает публикацию в production или полный сценарий, проверенный вошедшим пользователем.

Поддерживайте широкий CSS-синтаксис внутри границы рендеринга

Первоначальные ограничения на основе небольшого списка разрешенных свойств расширили: поддерживаются Grid и Flex, переменные, градиенты, псевдоэлементы, преобразования, анимации и правила вроде @media, @supports и @container. Это не означает, что произвольный CSS вставляется без проверки. Синтаксическое дерево разбирается, а каждая ветвь селектора ограничивается потомками указанной области профиля. Та же граница применяется внутри условных правил; внешние операционные элементы и отметки лицензии не относятся к теме. W3C Selectors — отправная точка для изучения спецификации селекторов.

Имена переменных и keyframes в публикуемом CSS заменяются уникальными, чтобы не конфликтовать с переменными внешнего интерфейса или анимациями другой темы. Исходные имена сохраняются для редактирования. Во внешней обертке рендеринга также используются containment и isolation, чтобы ограничить влияние широких правил компоновки областью профиля.

Отклоняются загрузка внешних ресурсов, глобальные правила вроде @import и @font-face, неразбираемый синтаксис, CSS nesting, закрывающий маркер style в HTML, а также ссылки на анимации, имена которых нельзя безопасно определить. Проверяется и размер входных данных, и размер сгенерированного результата. При публикации и загрузке snapshot повторно проверяется совпадение области, уникальных имен и проверенной канонической строки CSS. Поддержка широкого синтаксиса не гарантирует одинаковое отображение во всех браузерах.

Разделяйте предпросмотр, черновик и публикацию

Пробный просмотр или применение темы меняет черновик. Публичная страница не меняется, пока владелец не опубликует его. Возможность снова редактировать написанный вручную CSS не означает, что исходный текст передается посетителям. Контракт сохранения обнаруживает конфликты и не позволяет повторной операции дублировать версию или обновление черновика.

Не позволяйте обновлению другого автора менять активный дизайн

Редактируемая информация в списке тем отделена от неизменяемых версий. Пользователь импортирует конкретный version ID; новая версия автора автоматически не меняет существующие черновики и опубликованные версии. После редактирования сохраняются источник и версия примененной темы, а также источник условий использования. Если публичный профиль снова становится приватным, имя и изображение из черновика автора не должны попадать в распространяемую тему.

Различайте снятие с публикации и операционную блокировку

Снятие темы автором прекращает ее новое обнаружение и применение, но не обязательно сразу отзывает существующее использование закрепленной версии. Операционная блокировка опасной темы имеет другую границу: прекращается публичное получение темы и CSS из существующих snapshot, после чего восстанавливается стандартный вид. Даже при возврате к старому snapshot проверяется текущее состояние блокировки, чтобы CSS, существовавший до нее, не включился снова.

1. 1 Общий источник CSS GUI и прямое редактирование используют один источник CSS и сохраняют написанные вручную правила.
2. 2 Разбор и ограничение области Поддерживаются Grid/Flex, переменные, псевдоэлементы, адаптивные правила и анимация. Внешний, глобальный и неразбираемый ввод отклоняется.
3. 3 Явно опубликовать версию После предпросмотра/черновика публикуется неизменяемая версия. Снятие с публикации и операционная блокировка — разные действия.

Что проверить перед публикацией

Проверьте селекторы за пределами области, внешние запросы, размер входных данных, конфликты сохранения, повторные запросы, перевод профиля автора в приватный режим, снятие с публикации, операционную блокировку и откат. Подтверждены публикация магазина фиксированных версий в production и отображение тестовых данных, но в рамках этой проверки не подтверждены публикация расширения CSS-редактора в production и приемка вошедшим пользователем. При одной из предыдущих проверок публичных тем было 0; это не текущий счетчик. Сквозная проверка, в которой реальные пользователи отправляют и применяют темы, и платные продажи не доказаны. Условия использования не могут гарантировать, что CSS, дошедший до браузера, никогда не скопируют.

О вводе данных для редактирования см. импорт профиля в черновик; об операциях CMS см. руководство по Sveltia CMS.