Blog. Just Blog

Быстрый поиск

Введите фрагмент названия статьи для поиска

Защита контента сайта от копирования

05.07.2012 | Категория: Web-мастеру и не только | Автор: ManHunter
Сразу же оговорюсь, что я категорически против использования на практике любых методов, описываемых в этой статье. Любой запрет только раздражает посетителей сайта и вряд ли кто-то захочет вернуться снова на страницу, которая, например, блокирует правую кнопку мышки или требует для просмотра текста включенный JavaScript. Максимум, что я признаю, это пассивная защита контента. Это не говоря о том, что любую защиту в случае реальной необходимости можно без особых проблем обойти. Но тем не менее, активная защита от копирования контента иногда встречается на некоторых сайтах. В этой статье я собрал методы активной защиты, которые встречал на практике.

Первый способ, самый простой. Подавление событий выделения текста, движения и клика мышкой, копирования и вызова контекстного меню путем блокировки правой кнопки мыши. Ставится обработчик, который не дает событию всплывать по иерархии DOM и сразу же возвращает флажок отмены:
  1. function nocopy(event) {
  2.     var event event || window.event;
  3.     if (event.preventDefault) { event.preventDefault(); }
  4.     else { event.returnValue false; }
  5.     return false;
  6. }
  7.  
  8. document.onmousedown nocopy;
  9. document.onmouseup nocopy;
  10. document.onmousemove nocopy;
  11. document.ondragstart nocopy;
  12. document.onselectstart nocopy;
  13. document.ontextmenu nocopy;
  14. document.oncopy nocopy;
Способ кроссбраузерный, но, к счастью, прекрасно обходится через выделение всего текста клавишами Ctrl+A и последующего его копирования. В Firefox через настройки обходится защита от блокировки контекстного меню.

Читать статью целиком »
Просмотров: 22208 | Комментариев: 27

Какая может быть максимальная длина URL?

23.11.2011 | Категория: Web-мастеру и не только | Автор: ManHunter
Однажды, при разработке одного из проектов, я столкнулся с тем, что требовалась передача большого количества данных из формы методом GET, то есть через адресную строку. У меня под браузером Firefox все работало как надо, а вот у манагеров, сидящих на Internet Explorer, выдавалась ошибка, что запрошенная страница не может быть отображена. Как оказалось, проблема была в том, что получался слишком длинный адрес URL, и ограничения браузера не позволяют его открыть. Причем у Firefox по всей видимости, этот лимит выше, чем у Internet Explorer. Это натолкнуло меня на мысль протестировать различные браузеры на предмет максимально допустимой длины URL, и вот что у меня получилось. Для опытов был написан коротенький скрипт:
  1. if ($_GET['long']) {
  2.     echo '<script>document.write(document.location.href.length);</script>';
  3. }
  4. else {
  5.     $long=1;
  6.     for ($i=0$i<23$i++) {
  7.         $long=ceil(2*$long);
  8.         echo '<a href="test.php?long='.$long;
  9.         echo '#chk='.str_repeat('x',$long).'_end!">'.$long.'</a><br>';
  10.     }
  11. }    
Сразу могут возникнуть вопросы: почему в адресе используется именно анкор, а не обычный параметр, и почему для подсчета длины используется JavaScript, а не что-то типа str_len(getenv('REQUEST_URI'))? Да, первый вариант тестового скрипта был именно таким, но я сразу же столкнулся с ограничением сервера Apache на предельно допустимую длину GET-запроса. При обращении к странице сервер выдавал вместо нее ошибку 414 - Request-URI Too Large. Попытки изменить значения параметров LimitRequestLine в конфигурации Apache привели к другой ошибке:

LimitRequestLine "65535" must not exceed the precompiled maximum of 8190
То есть для изменения порогового значения надо перекомпилировать сервер с нужными значениями, а это я сделать не могу, тем более на хостинговом сервере. Пропатчить все проверки в локальной версии сервера тоже не удалось, ограничение все равно оставалось. Поэтому пришлось извернуться через анкор и JavaScript.

Читать статью целиком »
Просмотров: 27091 | Комментариев: 10

Горизонтальный скроллер на JavaScript

17.08.2011 | Категория: Web-мастеру и не только | Автор: ManHunter

Горизонтальный скроллер на JavaScript

Захотел сделать горизонтальный скроллер для фотогалереи, естественно, без использования всяких сторонних скриптов. Условие: кроссбраузерность, валидная верстка и стандартные стили, поддержка колесика мыши. Начнем с верстки:
  1. <div class="scroller_container">
  2.   <div class="scroller_navigate"><img src="images/left.gif" alt=""></div>
  3.     <div class="scroller_window" id="scroller_window">
  4.       <div class="scroller_row" id="scroller_row">
  5.         <div id="scroller_rule">
  6.           <!-- список превьюшек в линейке скроллера -->
  7.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  8.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  9.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  10.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  11.         </div>   
  12.       </div>
  13.     </div>
  14.   <div class="scroller_navigate"><img src="images/right.gif" alt=""></div>
  15. </div>
Дополнительный элемент scroller_rule приходится использовать, чтобы получить полную ширину всей полосы скроллера с превьюшками. Элементы scroller_navigate содержат левую и правую стрелочки для прокрутки. Теперь надо создать таблицу стилей для оформления. "Окно" скроллера должно быть фиксированного размера и без полос прокрутки, а полоса скроллера будет перемещаться относительно этого окна, за счет этого будет достигаться эффект плавной прокрутки. Для большей красоты я взял фоновый рисунок, имитирующий фотопленку.

Читать статью целиком »
Просмотров: 11995 | Комментариев: 21

Размещение контента на HTML-странице поверх Flash

18.11.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
На разных сайтах в Интернете я часто сталкиваюсь с тем, что на них расположены Flash-объекты, например, видеоплееры с YouTube или фрагменты оформления дизайна на Flash. И при этом различные элементы - плавающие или с абсолютным позиционированием, например, раскрывающиеся меню или всплывающие подсказки, перекрываются областью, занимаемой Flash-объектами. Причем использование атрибута стиля z-index ситуацию не спасает, и в итоге все смотрится очень некрасиво. А ведь решение проблемы очень простое: достаточно в описании Flash-объекта указать параметр wmode со значением opaque:
  1. <param name="wmode" value="opaque">
Получится что-то вроде такого:
  1. <div style="position:relative;">
  2.     <div style="position:absolute;">HelloWorld!</div
  3.  
  4.     <object type="application/x-shockwave-flash" data="flash.swf">
  5.         <param name="menu" value="false" />
  6.         <param name="quality" value="high" />
  7.         <param name="wmode" value="opaque">
  8.         <param name="movie" value="flash.swf" />
  9.     </object>     
  10. </div>
В приведенном примере плавающий элемент div с текстом "Hello, World!", позиционированный относительно общего контейнера, будет расположен поверх Flash-ролика. Этот способ валидный и кроссбраузерный, а расположение Flash-объекта на странице теперь можно регулировать с помощью атрибута z-index. Готовый пример можно посмотреть на сайте.

Просмотров: 9232 | Комментариев: 12

Как отправить из формы HTML только часть данных

04.11.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
Формы - один из основных способов взаимодействия сайта и пользователя, без которых невозможно представить ни один современный сайт. Методы работы с формами стандартные, никаких сложностей в реализации вызывать не должны. В некоторых случаях требуется отправить только часть полей из большой формы. Типичный пример - настройки форума, когда можно сохранить какую-то одну из всех открытых категорий, а можно сохранить все сразу. Один из вариантов решения заключается в том, что можно каким-нибудь образом, например, уникальным индексом, пометить кнопку сабмита нужной группы.
  1. <form action="process.php" method="post">
  2.  
  3. <input type="text" name="text1" value="text1">
  4. <input type="checkbox" name="box1" value="box1">
  5. <input type="submit" name="submit1" value="Отправить 1 блок">
  6.  
  7. <input type="text" name="text2" value="text2">
  8. <input type="checkbox" name="box2" value="box2">
  9. <input type="submit" name="submit2" value="Отправить 2 блок">
  10.  
  11. <input type="submit" name="all" value="Отправить все">
  12. </form>
В этом случае обработка и сортировка поступившей информации ложится целиком на сторону сервера. Сперва определяется, какой из сабмитов был нажат, затем на основании этой информации из всех данных выбираются нужные. Метод надежный, работает во всех случаях, даже если у пользователя в браузере отключены скрипты. Недостаток способа в том, что передаются все поля из формы, а не только нужные. Вложенные формы стандартом HTML не допускаются и, соответственно, корректно не обрабатываются.

Второй способ, с использованием JavaScript, заключается в том, что из формы берутся нужные поля, затем динамически формируется новая форма, и на сервер отправляется уже она. Для этого придется сделать несколько вспомогательных действий. Первая - изменится разметка страницы.
  1. <div id="wrapper0">
  2.   <div id="wrapper1">
  3.   Текст 1: <input type="text" name="text1">
  4.   <input type="checkbox" name="chk1" value="1">
  5.   <input type="button" value="Сохранить" onclick="ds('wrapper1');">
  6.   </div>
  7.  
  8.   <div id="wrapper2">
  9.   Текст 2: <input type="text" name="text2">
  10.   <input type="checkbox" name="chk2" value="2">
  11.   <input type="button" value="Сохранить" onclick="ds('wrapper2');">
  12.   </div>
  13.  
  14.   <div id="wrapper3">
  15.   Текст 3: <input type="text" name="text3">
  16.   <input type="checkbox" name="chk3" value="3">
  17.   <input type="button" value="Сохранить" onclick="ds('wrapper3');">
  18.   </div>
  19.  
  20.   <div>Глобально: <input type="text" name="global">
  21.     <select name="sel">
  22.     <option value="1">1</option>
  23.     <option value="2">2</option>
  24.     <option value="3">3</option>
  25.     <option value="4">4</option>
  26.     </select>
  27.   </div>
  28.  
  29.   <input type="button" value="Сохранить все" onclick="ds('wrapper0');">
  30. </div>
Обратите внимание, что вместо тега form используются блоки div. Это позволяет создать на странице что-то вроде вложенных форм. Я сразу добавил в код обработчики сабмитов, функции будут описаны ниже.

Читать статью целиком »
Просмотров: 10683 | Комментариев: 4

Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2022
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.13 сек. / MySQL: 3 (0.0573 сек.) / Память: 5 Mb
Наверх