Статьи

Исправление Ghoulish HTML поведения после Ghostery ломает сеть, чтобы заблокировать Disqus

У меня было немного отзывов о моем последнем посте, которого я не видел в прошлом. Например, этот в Твиттере :

0% этой страницы отображается при включенном Ghostery. Я не уверен, что это ирония или что …

А потом подкрепил Микко Гиппонен :

Я заметил то же самое. Трой, возможно, ты захочешь проверить свой блог на соответствие настройкам Ghostery по умолчанию.

И повторил на Hacker News :

Я установил Ghostery, страница загружается, а затем внезапно текст статьи удаляется.

Я знаю, я знаю, я просто не должен использовать Ghostery, но мне нравится иметь немного конфиденциальности в Интернете.

Извините, я не вернусь на ваш сайт снова …

Итак, позвольте мне сказать прямо: вы устанавливаете плагин для браузера, который намеренно отключает часть сайта, которую я тщательно создал, а затем вставляет свой собственный HTML-код в произвольные места, и вы задаетесь вопросом, почему, возможно, некоторые вещи не работают ?! Правильно…

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

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

Вот что происходило:

Призрачное сокрытие содержимого страницы

В основном все тело сообщения скрыто. Теперь я обращался к Ghostery не один , не два раза , а три раза (последние два в ответ на их твиты в Твиттере) и ничего не получил от них, так что пришло время заняться соло на этом.

Вот где Ghostery вводит свое сообщение:

Призрачное сообщение о блокировке Disqus вводится в разметку

Если мы позволим Ghostery загружать Disqus, то увидим, что все работает так, как я его разработал, и хотим, чтобы он был просмотрен до того, как его взломал сторонний плагин для браузера. Это выглядело так:

Оригинальный дизайн сайта

Этот выделенный div содержит содержимое Disqus в самом конце элемента:

Дискус появляется внизу страницы

Моей первой мыслью было, что, удалив этот элемент, я смог установить, что он связан с его положением. Звучит логично, подумал я, но оказывается, что Ghostery по-прежнему убивает содержание сообщений, даже если на странице вообще нет элемента Disqus . Фактически, пока загружен JavaScript Disqus, Ghostery сходит с ума и убивает контент, даже не связанный с механизмом комментариев. Спасибо, ребята, хороший.

Может быть, как и предполагали некоторые, и Ghostery просто убивает любой сайт с помощью Disqus ? Может быть, это просто убивает много сайтов, использующих Disqus, но не все из них .

Таким образом, последовал долгий процесс вырубки элементов страницы, а затем выяснение того, за что призрак взял топор. Ни одна из очевидных теорий не сработала — похоже, она вообще не была связана с содержимым самого поста, действительно, когда я удалил всю партию, я все еще получил этого одурманенного кровавого призрака в середине страницы. К счастью, у меня есть тестовый сайт Blogger как раз для таких случаев, и после гораздо большей рубки я нашел это:

<div class='comments' id='comments'>

На самом деле это было внизу страницы рядом с элементом Disqus, но не было связано с ним. На самом деле это был остаток от механизма комментариев Blogger, и быстрое изменение показало что-то поучительное:

<div class='com-ments' id='comments'>

Исправлена! Нет, на самом деле, это все, что было — Ghostery просто произвольно искал класс с именем «comments», а затем использовал ядерную опцию для всего содержимого родительского элемента, даже если div полностью не связан с Disqus . Звучит законно.

Вот как выглядит якобы отвратительный элемент:

Элемент с классом 'comments'

Имейте в виду, что даже когда элемент, который вы видите в Disqus, показанном выше, удаляется, Ghostery по-прежнему отправляется по почте и убивает весь контент на странице.

Правильно, если вам это не нужно, просто удалите нарушающий элемент из шаблона, верно? Или, по крайней мере, измените название класса, чтобы Ghostery не стал психом. К сожалению, в моем случае это не было частью моего шаблона:

Разница между моим шаблоном и выходным сигналом

Мой шаблон находится слева, отправляемая запись в блоге находится справа, а выделенные биты, заштрихованные розовым цветом , отсутствуют в шаблоне, по крайней мере, не напрямую. Даже игра с самым ванильным шаблоном из Blogger позволила создать такой контент:

Ghostery Klling ванильный шаблон Blogger

Blogger прекрасно справляется со многими задачами, но прозрачность того, что происходит в шаблоне, просто не входит в их число. Там может быть способом , чтобы убить эти (и другие) тег, но он уверен , что нет ничего очевидно , как просто инвалидизирующих комментарии , которые, конечно же , я уже сделал. Однако Blogger позволяет вставлять произвольный код JavaScript на страницу.

Ghostery просто приставает к странице, основываясь на том, что находится в DOM, поэтому давайте сделаем это сразу после того, как на странице появится элемент с соответствующим классом:

<script type="text/javascript">
  var commentsElements = document.getElementsByClassName('comments');
  if (commentsElements.length > 0) {
    commentsElements[0].parentNode.removeChild(commentsElements[0]);
  }
</script>

Это просто ванильный JavaScript (помните?), И хотя я использую jQuery на сайте, я не могу быть уверен, что он загружен до того, как Ghostery сориентируется на странице. Этот подход гарантирует, что скрипт будет запущен как можно скорее после появления элемента комментариев и, по крайней мере, в моем тестировании, прежде чем Ghostery придаст ему хороший смысл.

Результат говорит сам за себя:

Содержание страницы теперь корректно загружается с включенным Ghostery

Очевидно, меня не впечатлила ситуация с Ghostery не потому, что я не верю, что люди должны иметь возможность скрывать контент, который им не нужен, а потому, что Ghostery не дает абсолютно никаких указаний владельцам сайтов, которые не хотят, чтобы их контент был заполнен. этим все более популярным инструментом . Речь идет не о поиске способов обойти блокировку, а о том, как заставить сайт работать так, как того ожидают люди, использующие Ghostery, а именно о показе проклятого контента!

Оказывается, как только я решил проблему и написал в Твиттере об этом, один из разработчиков Ghostery подтвердил проблему:

@troyhunt, чтобы быть более конкретным, это столкновение с комментариями http://blogger.com, основанными на Disqus.  Наша ошибка :(

С точки зрения веб-разработки, то, что пытается сделать Ghostery — задача не из легких. Объединение всех этих внешних сервисов, как это делают современные веб-сайты, создает деликатную экосистему, которую легко вывести из равновесия, если попытаться автоматически вытащить кусок, как крупную игру Jenga. Очевидно куча вещей ломается — просто посмотрите на форум Ghostery на Disqus . Первое, что я сделал после выполнения этого упражнения, — отправил Призрака в пропасть, которая является моим кладбищем. Я хочу, чтобы сеть работала так, как она предназначена для 99% времени, и я знаю, как контролировать свою конфиденциальность в оставшиеся 1% времени. Вам не нужен плагин для этого.