Отключить стиль CSS для определенного фрагмента страницы

#css #iframe

#css #iframe

Вопрос:

Я искал и нашел несколько похожих сообщений, но ни одно из них не ответило на мой «особый» вопрос.

У меня есть страница со статическим оформлением верхнего и нижнего колонтитулов. В середине (содержимое) может быть немного HTML CSS от пользователей.

Чего я не хочу, так это того, что они определяют некоторые правила CSS, которые испортили бы верхний, нижний колонтитулы или весь текст.

Использование iframe на самом деле не является решением.

Спасибо

Комментарии:

1. Что вы пытаетесь с этим сделать? Вы могли бы предоставить некоторые свойства, но не все. Или, может быть, использовать графический интерфейс для настройки CSS?

Ответ №1:

Самое простое решение, включающее очистку их входных данных, — присвоить всему вашему атрибуту style флаг !important, а затем выполнить поиск и заменить любые !important флаги, которые пользователь, возможно, ввел в свой пользовательский CSS.

Вот еще немного информации об этом флаге: http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it /

Более простым решением является удаление всех тегов из пользовательского ввода — и разрешить применять CSS только к атрибуту стиля определенного элемента.

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

Я думаю, вы должны спросить себя: вы действительно доверяете этим пользователям писать свои собственные CSS и HTML? Или, может быть, лучшим вариантом будет исследовать textile или markdown *? Если вы доверяете этим пользователям, то разве это не должно быть проблемой? Я думаю, что дополнительная информация о природе этого контента помогла бы мне предложить вам более подходящие решения.

* Я не могу опубликовать прямую ссылку на домашнюю страницу из-за мер по предотвращению спама StackOverflow. Вы можете узнать больше по первой ссылке в поиске Google «markdown». Извините.

Ответ №2:

Код сброса YUI3 CSS может работать контекстуально.

Просто включите код:

 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-context-min.css">
  

И добавьте свой CSS после пользовательского CSS, чтобы ваш оценивался последним. Затем сбросьте CSS для своих элементов, присвоив им атрибут class, подобный этому:

 class="yui3-cssreset"
  

Просто убедитесь, что ваши объявления настолько конкретны, насколько это возможно, и что все они !important .

Но почему вы разрешаете пользователю указывать свой собственный CSS? Вы знаете, что IE может интерпретировать JavaScript из файла CSS с некоторыми свойствами black magic CSS?

Это небезопасно делать.

Комментарии:

1. Не могли бы указанные пользователем стили просто использовать селектор с большим весом, чем те, которые применяются yui3? Кроме того, не могли бы они использовать флаг !important, чтобы переопределить эти значения напрямую?

2. Отфильтруйте его перед рендерингом. Мне не очень нравится идея разрешить пользователям иметь свой собственный CSS. По крайней мере, позвольте им сделать это в <iframe> .

3. Да, вам все равно пришлось бы очистить их CSS. Возможно, вы захотите включить это в свой ответ. Но я рад, что мы оба согласны с тем, что это все еще, во всех отношениях, не очень хорошая идея 🙂