Твиты Future Colors, 3 неделя сентября

Мы ежедневно делимся в твитере @futurecolors полезными ссылками, новостями вебразработки, еженедельно — фотками с работы. Раз в неделю-две я буду собирать всё это в один пост, чтобы это легко было найти потом. Хронология специально нарушена, это не так важно. Кое-где мои комментарии к твитам.

Django

Иван Сагалаев в своём блоге делится впечатлениями о прошедешем DjangoCon US.

Опубликованы видеозаписи с DjangoCon US 2011 Всем смотреть!

Целых 40 записей, 16 гигабайт видео, часов ещё больше. Смотрите описания выступлений и изучайте, это очень интересно. 

А вы уже обновили django до 1.3.1 и 1.2.7 соответственно?

Благодаря django-fab-deploy, обновить фреймворк не составило особого труда.

Хорошая заметка о различиях между Django ORM и SQLAlchemy. Ещё холивор с похожей темой

Как помочь улучшить документацию django (две заметки из блога девушки с татуировкой пони). Вторая

Подменяем /admin/ фальшивой авторизацией и следим за «хакерами»

Наконец-то начались какие-то попытки портировать Django на python3

Ветка теперь доступна и на гитхабе

На новых проектах будем использовать django-jenkins и django-any. Очень полезные штуки.

Используем ежедневно. не без недостатков, но очень правильные идеи.

JetBrains радуют новыми фичами и апдейтами старых. Пост из блога pycharm про дебаг шаблонов джанги в их IDE

HTML и Javascript

Какие фичи html5 поддерживают мобильные браузеры. Полезная табличка

Утилита для вырезания из js-библиотек неспользуемого вами кода. Насколько хорошо она почикает jquery?

CoffeeScript (и django)

Весёлая презентация CoffeeScript: JavaScript without the Fail

Думаете только поклонники руби уважают CoffeeScript? Всовсе нет, например: django-coffeescript

Впрочем, необязательно ставить дополнительный пакет, достаточно нашего любимого django-compressor (django + coffeescript)

Всерьёз задумались о внедрении кофескрипта как замены js на будущих проектах.

Разработка

Команда git bisect выручает при борьбе с нетривиальными регрессиями. Очень полезно

Познавательно про разработку в СКБ Контур

Проектирование моделей (тех самых, которые являются частью MVC). На фото - Илья Барышев

, , , Комментарии отключены

Боремся с Clickjacking

Что такое clickjacking

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

Как это работает

Атакуемый сайт оборачивается в прозрачный ифрейм. Поверх него располагают какую-нибудь привлекательную ссылку, на которую захочет кликнуть «жертва» (при атаке на твитер в 2009 такой приманкой стала кнопка c текстом «Don't click»). Теперь вместо клика на неё будет происходить клик в ифрейме (так как он находится поверх кнопки).

Демонстрация кликджекинга

(абсолютно безвредно)

Замечу, что защита от clickjacking совершенно иная, чем от CSRF, хотя цели злоумышленников в обоих атаках — заставить пользователя совершить запрос к сайту под своими правами.

Защищаемся через javscript

Самый простой способ — сделать редирект с помощью js, если сайт открыт в ифрейме (пример):

if(top != self) {
  top.location = self.location;
}

К сожалению, это код неуниверсален, существуют несколько способов его обхода разной степени изощрённости и применимости в браузерах. Подробнее можно почитать в исследовании Busting Frame Busting: a Study of Clickjacking Vulnerabilities on Popular Sites.

Защищаемся через заголовки

В дополнение к предыдущему методу, разработчики браузеров ввели новый заголовок ответа сервера X-Frame-Options.
Он позволяет не отображать сайт, если он загружается c другого домена через ифрейм. Пример настроек для Apache и nginx:

Header always append X-Frame-Options SAMEORIGIN
add_header X-Frame-Options SAMEORIGIN;


Работает в IE 8.0+, FF 3.6.9+, Opera 10.50+, Safari 4.0+ и Chrome 4.1+, на момент написания поста по рунету это более 70% пользователей.

В новой версии Django 1.4 для добавления этого заголовка есть настраиваемый XFrameOptionsMiddleware.

Подробно про Clickjacking на сайте Open Web Application Security Project.

Комментарии отключены

HttpOnly куки и с чем их едят

HttpOnly cookie — это такие куки, которые невозможно прочитать с помощью javascript, но доступные серверным скриптам, как и любые другие. Несмотря на то, что это совсем не новая технология (HttpOnly cookie появились 8 лет назад в IE6 SP1), далеко не все знают, почему их обязательно стоит использовать.

Зачем это нужно

Куки, недоступные из джаваскипта, помогут защитить от XSS-атак, как второй рубеж обороны от злоумышленников. Прокравшийся на страницу вредоносный код не сможет утащить пользовательские куки с помощью document.cookie.

Где это работает

Основная мысль: это работает во всех популярных и современных браузерах (IE6+, Firefox 2.0+, Chrome 1.0+, Opera 9.5+, Safari 4.0+) Подробнее можно ознакомиться на сайте browserscope (раздел Security).

HttpOnly cookie легко установить в php, django. Чтобы установить куки собственноручно через передачу заголовка ответа, достаточко добавить параметр ; HttpOnly

Set-Cookie: <name>=<value>[; <Max-Age>=<age>]
[; expires=<date>][; domain=<domain_name>]
[; path=<some_path>][; secure][; HttpOnly]

Демо



Подробно про HttpOnly cookie на сайте Open Web Application Security Project

VPC-EC3S1R и Убунта

Взамен старого ноута приобрёл новый VAIO серии E.
О своих впечатлениях о новинке расскажу в следующей заметке, а пока пара советов для убунтоводов, обзаведшихся ноутом сони, почерпнутых в одном из блогов.

Sony VAIO VPC-EC3S1R

Под свежеустановленным Мавериком (10.10) почти всё завелось «из коробки»: видео, аудио, вебкамера, но не обошлось и без досадных недоразумений в виде нерабочего тачпада и кнопок управления яркости.

Убунта и яркость экрана

Сидеть за дисплеем со 100-процентной яркостью совершенно невозможно, поэтому, пока не отказали глаза срочно понижаем её в меню «Система → Параметры → Управления питанием». Данный трюк не проходит, если питание от сети отсутствует, поэтому надо оживить кнопки Fn+F5 и Fn+F6, отвечающие за яркость.

1) Правим файл /etc/acpi/events/sony-brightness-down, который будет выполняться при нажатии Fn+F5.
# /etc/acpi/events/sony-brightness-down
event=sony/hotkey SNC 00000001 00000010
action=/etc/acpi/brightdown.sh

Код клавиши может отличаться для других моделей ноутбуков Сони (можно определить с помощью команды acpi_listen)

2) Правим скрипт /etc/acpi/brightdown.sh, который понижает яркость
#!/bin/bash
curr=`cat /sys/class/backlight/acpi_video0/actual_brightness`
if [ $curr -gt 0 ]; then
curr=$((curr-1));
echo $curr  > /sys/class/backlight/acpi_video0/brightness;
fi

Главное, не забыть про права на исполнение.

3) Аналогично редактируем файл /etc/acpi/events/sony-brightness-up
# /etc/acpi/events/sony-brightness-up
event=sony/hotkey SNC 00000001 00000011
action=/etc/acpi/brightup.sh


4) А вот скрипт повышения яркости для файла /etc/acpi/brightup.sh
#!/bin/bash
curr=`cat /sys/class/backlight/acpi_video0/actual_brightness`
if [ $curr -lt 8 ]; then
curr=$((curr+1));
echo $curr  > /sys/class/backlight/acpi_video0/brightness;
fi

Убунта и тачпад

Тачпад особенно не нужен на 17-дюймовом ноуте, который заменяет десктоп, но для порядка надо оживить и его.
Нужно отредактировать /etc/default/grub, добавив следующую строчку
GRUB_CMDLINE_LINUX="i8042.noloop i8042.nomux i8042.reset i8042.nopnp splash"
После этого надо пересоздать grub.conf
sudo update-grub

После этого перезагружаемся и тачпад работает.

Продолжение следует.

, , Комментарии отключены

День рождения API Яндекс.Карт

В пятницу команда Яндекс.Карт вместе с активистами клуба отмечали двухлетие API и предоставили возможность рассказать про наш скромный проект «Банкоматор». Послушали любопытное выступление Кащея про то, как работает продвинутая кластеризация, как сильно ускорить вывод объектов на карте и без хотспотов. А также немного статистики о том, как растёт и становится лучше API карт. Очень здорово, что поддержка в клубе такая оперативная и полная. А вот фото и видео со встречи.

Народу было немного, познакомились с командой, кого не видели на прошлогоднем семинаре. Встреча закончилась вкусным тортом и небольшой экскурсию по офису. Спасибо!

Фото на память

, 2 Comments

Firefox 2 и HTML5

Сейчас для многих HTML5 это такой всеобщий «тренд» веб-разработки и просто «buzzword». Все сейчас радуются за новые и полезные семантические теги разметки <header>, <footer>, <section>, <article> и даже <aside>. Но не все ещё знают о том, какие проблемы с обратной совместимостью устаревших браузеров по-прежнему существуют.

Ослик

То, что Internet Explorer вплоть до 9 версии не умеет применять стили к неизвестным тегам без специальных ухищрений, давно известно. Для обхода этого недоразумения существует популярное решение html5shiv. Хитрость в том, чтобы динамически создать новый элемент, тогда explorer волшебным образом застайлит все последующие его вхождения.

Firefox 2

Куда менее известно о том, что Firefox 2 тоже не дружит с незнакомыми ему тегами:

Firefox 2 (а также любой другой браузер на движке Gecko версии младше 1.9b5) имеет баг в разборе HTML: все неизвестные теги принудительно закрываются, как только парсер встречает блочный элемент (p, h1, div и т.п. ).

На данный момент доля второй ветки FF в рунете и в мире составляет меньше процента (0.4%). В то время как доля IE6 в 10 раз больше — около 5%. Поэтому, неудивительно, что проблема кажется надуманной.

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

 

Есть несколько способов исправить проблему, со своими плюсами и минусами, как водится.

Деградация

Заменяем все новые теги на блочные <div> для Firefox 2. Придётся применить пресловутый browser sniffing, а значит есть риск ошибиться при разборе User Agent. Кроме того, стили и весь javascript не должен быть привязан к названиям тегов (вообще, это хороший стиль). Ну и кэшировать такие страницы придётся отдельно.

Переходим на XHTML

Отдаём фаерфоксу заголовок application/xhtml+xml и баг пропадает. Кроме того, что в данном методе присутствует browser sniffing, xhtml strict mode чреват тем, что из-за ошибочной вёрстки посетитель не увидит вообще ничего, кроме parse error (документ должен быть well-formed). Пример в блоге Remy Sharp

Используем JS

С помощью javasctipt можно обойти DOM-дерево и убрать лишние закрывающие теги, которые проставил Firefox. Готового решения нет, поскольку определить то, что тег закрыт преждевременно по ошибке нетривиально. Пример в блоге WHATWG.

Итого

Полезно заранее определить границы кроссбраузерности и определить степень поддержки тех или иных версий браузеров. Если вы планируете использовать новые теги в вёрстке, незначительная часть ваших пользователей увидят ваш сайт совсем не так, как вы этого могли ожидать, если об этом не позаботиться. Внедряя новые «примочки», полезно не забывать об обратной совместимости, ведь не все могут легко установить себе современный браузер.

, , Комментарии отключены

Google Developer Day 2010

GDD 2010Посетил вместе с @piumosso очень хорошо подготовленное и позитивное мероприятие под названием GDD 2010. Спасибо русскому Гуглу, за то что с каждым годом делают конференцию всё лучше. В этот раз основными темами стали: Andriod, Chrome с HTML5, GAE, бизнес и немного social. Конференция нам понравилась, о чём мы не преминули написать свой отчёт.

Полная версия отчёта о GDD 2010 в блоге Future Colors

 
А вот немного ссылочек на чужие отчёты:

На закуску мои впечатления от Google Developer Day 2009.

, , Комментарии отключены

Как добавить сертификат SSL в Chrome под Ubuntu

Хром очень печётся о безопасности пользователя, поэтому иногда можно увидеть вместо сайта вот такое предостережение:

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

В фаерфоксе подобная проблема решается прямо в браузере несколькими кликами, нужно всего лишь добавить сертификат к доверенным. Любителям хрома под линукс придётся использовать командную строку.

Решение

Некто Алекс придумал способ немного автоматизировать процесс:

  1. Ставим себе libnss3-tools:
    sudo apt-get install libnss3-tools
  2. Создаём исполняемый файл import-cert.sh
    #!/bin/sh
    #
    # usage: import-cert.sh remote.host.name [port]
    #
    REMHOST=$1
    REMPORT=${2:-443}
    exec 6>&1
    exec > $REMHOST
    echo | openssl s_client -connect ${REMHOST}:${REMPORT} 2>&1 |sed -ne '/-BEGIN CERTIFICATE-/,/-END CERTIFICATE-/p'
    certutil -d sql:$HOME/.pki/nssdb -A -t TC -n "$REMHOST" -i $REMHOST
    exec 1>&6 6>&-
  3. Запускаем скрипт:
    import-cert.sh example.com 443

    (где 443 — необязательный параметр, порт SSL)

    Вот и всё, сертификат добавился в NSS Shared DB, mission accomplished.

На всякий случай

Если что-то пошло не так, всегда можно через консоль посмотреть, какие сертификаты добавлены:

certutil -L -d sql:$HOME/.pki/nssdb

 или удалить негодный сертификат:

certutil -D -n <em>имя_сертификата</em> -d sql:$HOME/.pki/nssdb

Итого

Пока приходится использовать вот такие «костыли», но, скорее всего, в будущем появится нормальный менеджер сертификатов под Linux и данный скрипт будет более не нужен, на что я очень надеюсь.

, , , 1 Comment