Обработка CSS: 10 Советов для Разработчиков агрегаторов
Ранее на этой неделе я писал о обработке CSS, а я задумался о ней немного больше. Подобно многим RSS агрегаторам, для безопасности и изложения причин существующая версия FeedDemon показывает все встроенные стили до показа фида, и я думал, что это является наилучшим подходом. Но после того, как я увидел фид Википедии, на что Сэм Руби указал мне, и я переосмыслил это.
Итак вы знаете, о чем я говорю, посмотрите на скриншоты, показанные ниже.
Первый показывает фид Википедии в FeedDemon все встроенные стили удаляются, а второй показывает тот же фид с нетронутыми стилями:
Как видите, этот фид является намного более полезным когда стили нетронуты. Ведь так лучше чем слепо вырезать все встроенные стили, следующая версия FeedDemon будет использовать “белый список” разрешенных CSS свойств и значений.
Белый список FeedDemon будет основываться на тех же правилах, что использует Bloglines, как указано в правилах Википедии.
Однако я могу сделать вайтлист FeedDemon более жестким, поскольку я не уверен, что благоразумно разрешать, например фоновые изображения или курсоры в CSS содержимом фида.
На данный момент вы можете быть удивлены, почему RSS агрегаторы нуждают в необходимости белых встроенных стиляъ - почему бы просто не оставить все встроенные стили нетронутыми?
Помимо вопросов безопасности, одна из проблем заключается в том, что некоторые люди будут использовать вещи, как чрезмерно большие шрифта, сделать свои посты выделяющимися.
Другие люди будут сознательно вставлять уловки CSS, подобно странице полной оскорбительных изображений предназначенных для того, чтобы испортить качество чтения.
Эти уловки фактически не проблема, когда пост просматривается им самим или внутри его фида - в конце концов, если Вы подпишитесь на раздражающие Вас фиды, то вы просто отказажитесь от них впоследствии. Но это другая история, когда это сочетается с постами из других фидов в “реке новостей”, или в поисковом фиде от Technorati или Google. Последний вопрос - это тот, который касается меня большие, поскольку теоретически кто-то может разрушить массу RSS фидов, засоряя свой блог популярными ключевыми словами путем инъекций опасного CSS в фид блога.
К счастью для меня, я уже получил массу разобранного CSS кода, который я написал для TopStyle, поэтому не вопрос добавить белый список стилей для FeedDemon. Но если вы разработчик агрегаторов, которые также имеют вайтлист для встроенных стилей и у вас нет фона в CSS, можно оценить некоторые советы, я мне достались с трудом:
- Допускайте возможность использования правильного CSS в неправльном его использовании: Поверьте мне: как HTML и RSS, множество людей используют полностью неправильный CSS. Вещи, такие как незакрытые кавычки и объявления без двоеточий может подставить подножку твоему парсеру, если предположить, что встроенные стили будут правильно написано.
- Цитаты можно не трогать. Хотя редко используемые на практике символы внутри CSS значения могут быть замаскированы обратной косой чертой. Это наиболее часто используется в ручной модели взламывания, которая опирается на игнорирование кавычек для обмана устаревших браузеров в игнорировании конкретных стилей (например: <
p style="width:400px;voice-family: "\"}\"";voice-family:inherit;width:300px;">). Иными словами, ваш парсер не может предположить, что ковычки всегда означают начало или конец значения. - Цитаты не являются обязательными и бывает что одина кавычка допускается. Хотя XHTML требует значеням атрибутов быть внутри кавычек, браузеры не выполняют это требование. Кроме того, это нормально использовать единую кавычку вместо двойных кавычек вокруг значения. Поэтому убедитесь, что парсер обрабатывает все три варианта (например: <
p style="color:red">, <p style='color:red'>and <p style=color:red>). - Отрицательные значения иногда разрешаются. В отличие от значения для “padding” свойств, значения свойств “margin” может быть отрицательным (например: <
p style="margin:-10px">). - Длина пикселей по умолчанию единица. Одна из вещей, которую я делал в FeedDemon это чрезмерно большие зачистки шрифта (например: <
p style="font-size: 800px">), которая требует соблюдения максимального размер основан на единице длины. Если вы планируете сделать то же самое, имейте в виду, что, когда единица длины отсутствует, браузер может предположить, что пикселей (пикселей), были установлены. Так <p style="font-size: 12">это то же самое, как <p style="font-size: 12px">. - Размер шрифта может также принести неприятности. Если Ваш “поток” несколько постов в той же странице (например, FeedDemon), то вы должны быть осторожны, так как размер шрифта объявлен в незакрытых тегов в одном посте не влияет на последующие посты. Проблема становится хуже с относительной шрифта (например: <
p style="font-size: smaller">), поскольку неправильно вложенные относительно шрифта может привести к появлению крошечных одиночных пикселей - размер шрифта (или огромный размер шрифта, когда используется “lager”). - Плавающие элементы могут также принести неприятности. Если агрегатор использует несколько колонок газеты, будьте осторожны, так как плавающие элементы не пересекают посты в соседних колонках (например: <
img style="float:right" src="http://nick.typepad.com/images/basil.gif" mce_src="http://nick.typepad.com/images/basil.gif" />). И вы, возможно, захотите учесть только разрешение картинкам быть плавающими, чтобы избежать плавающих DIV’ов и т.д., создающих проблемы. - Редактировать класс и атрибуты. Если ваша газета базируется на классах и идентификаторах для определения параграфов на странице, я рекомендую удалить идентификатор класса и атрибуты из текущих постов - иначе после могут использовать один и тот же класс имен, которые вы используете в вашей газете, потенциально создавая всевозможный хаос.
- Удалить верхний уровень тегов. Хотя они не должны быть там, я заметил, что некоторые фиды содержат теги верхнего уровня такие, как BODY и HTML в своих постах. Представьте воздействие на ваши потоки новостей, если некоторые шутливые фиды автора вставляют стилизованный тэг BODY в их фид.
- Если Ваш агрегатор встраивается в IE, выбрайтесь из местной зоны. Это относится больше к скрипту, чем к CSS, но стоит повторить: если вы вставляете бъект WebBrowser, не позволяйте ему на месте отображать содержание для работы в местной зоне. Если Вы не знаете, о чем я говорю, см. мое предыдущее сообщение на эту тему.
В дополнение к вышесказанному советы W3C правила обработки ошибок разбора CSS также могут быть полезны.
Sanitizing CSS: 10 Tips for Aggregator Developers
| Technorati Tags: css , css tips , 10 советов по CSS , обработка CSS |
