Запрет просмотра сайта во фрейме

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

Первый способ защиты основан на скриптах JavaScript. Его суть сводится к тому, что проверяется соответствие top-окна открытой странице, если они не совпадают, значит страница открыта во фрейме. При обнаружении такой несправедливости браузер перенаправляется на другую страницу. Я использую вот такой вариант скрипта для "побега" из фрейма:Есть еще один похожий вариант, который делает почти то же самое:И, наконец, скрипт, останавливающий загрузку страницы, если она открывается во фрейме. На мой взгляд, очень сомнительный способ.Все эти скрипты, понятное дело, должны находиться на защищаемом сайте. Долгое время все эти способы прекрасно работали, пока в HTML5 не появился специальный атрибут тега iframe - sandbox, который позволяет установить ограничения на контент, загружаемый во фрейме. Если этот атрибут имеет пустое значение, то на любой странице, которая открыта в этом фрейме, скрипты выполняться не будут. Соответственно, не выполнится и скрипт для "побега"."Песочница" поддерживается всеми современными браузерами (список браузеров и версии вы можете посмотреть здесь).

Читать статью целиком »

Как добавить комментарии в JSON

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

Но, как оказалось, формат JSON не поддерживает комментарии (Douglas Crockford - создатель JSON, если что), а PHP, придерживаясь стандарта, при попытке декодировать файл с комментариями возвращает пустые данные. Вот для наглядности два простейших примера, как это (не) работает:Где-нибудь в описании объектов на JavaScript подобные комментарии воспринимались бы нормально, но только не в файле JSON. В обоих случаях возвращается пустота.

Читать статью целиком »

Парсер EXIF на JavaScript

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

Читать статью целиком »

Как на JavaScript узнать реальный размер изображения

Для работы с масштабированными изображениями в JavaScript или эффектов типа лайтбокса, необходимо знать реальную высоту и ширину изображения. Но в CSS или в атрибутах изображения width и height можно задать любые размеры. Поэтому попытка определить реальный размер из этих атрибутов вернет неправильные значения, свойства ширины и высоты покажут текущие размеры. К счастью, современные браузеры с поддержкой HTML5 позволяют обрабатывать два дополнительных свойства: naturalWidth и naturalHeight, в которых содержатся реальные размеры изображения.

Читать статью целиком »

Кроссбраузерная стилизация input type="file" с помощью CSS

Продолжаем тему извечного противостояния дизайнеров и верстальщиков. Основной конфликт возникает тогда, когда дизайнер рисует картинку сайта так, как нужно заказчику, а потом верстальщику приходится адаптировать под это изображение различные элементы HTML. Один из самых сложных для стилизации элементов - это поле выбора файлов, элемент input с типом file. В качестве наглядного примера, вот как он отображается в различных браузерах:


Дополнительную сложность создает то, что это поле попадает под различные правила безопасности браузеров, поэтому его нельзя, например, заменить каким-нибудь стилизованным div, нельзя обернуть тегом label, нельзя напрямую присвоить значение с помощью скриптов или вызвать окно выбора файла, сэмулировав нажатие через element.click(). А в некоторых браузерах даже нельзя сделать поле выбора файлов скрытым, так как после отправки формы его значение не будет передано на сервер. В разных интернетах я встречал попытки сделать кроссбраузерное решение, но все они, на самом деле, не универсальные и ограничиваются конкретными браузерами.

Читать статью целиком »