Codeby web-security - новый курс от Codeby Security School

Представляем вашему вниманию новый курс от команды The Codeby - "Тестирование Веб-Приложений на проникновение с нуля". Общая теория, подготовка рабочего окружения, пассивный фаззинг и фингерпринт, Активный фаззинг, Уязвимости, Пост-эксплуатация, Инструментальные средства, Social Engeneering и многое другое. Подробнее ...


Честно говоря, кодинг на JavaScript может быть настоящим геморроем, причём постоянным. Тем не менее, на заре jQuery весь этот ужас остался в прошлом.

Jquery — это не новый язык программирования и не отдельная платформа, это предварительно написанный скрипт, который работает на клиентской стороне, используя всю мощь JavaScript. Он стал даром небесным, особенно для разработчиков внешнего интерфейса.

Как бы очаровательно это не звучало, для тех, кто только вступил на путь веб-разработки, важно иметь хотя бы базовые знания по JavaScript. В противном случае, с jQuery или без оного, использование этих скриптов всегда будет непростой задачей.

Тем не менее, всего лишь одним поиском в Google вы можете легко найти бесчисленный список источников с бесчисленным количеством jQuery-сниппетов. Но в поисках лучшего может пройти немало времени. Чтобы избавить вас от этих проблем я собрал вместе некоторые мощные jQuery-сниппеты, которые пригодятся любому разработчику.

1. Переключение таблицы стилей

//Look for the media-type you wish to switch then set the href to your new style sheet
$('link[media='screen']').attr('href', 'Alternative.css');

Создание более чем одной таблицы стилей для веб-сайта — это обычная практика. Разработчики делают это время от времени, чтобы увеличить удобство посетителей. Например, некоторые веб-сайты имеют очень яркую цветовую схему, что может показаться некоторым посетителям раздражающим. Наилучший способ сохранения этих посетителей и дать им ощущение удобства — это предложить им альтернативную таблицу стилей, например, простую по виду чёрно-белую, и этом всё может быть сделано с помощью сниппета.

2. Запрет правого клика мышкой

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

Некоторые веб-разработчики отключают контекстное меню, вызываемое правым кликом, на их веб-страницах. Одной из частных причин этого является попытка отпугнуть воров картинок. (На всякий случай подчеркну, это не является хоть сколько-нибудь действенной мерой — ни HTML-код, ни картинки невозможно надёжно защитить в принципе). Независимо от причин, мы можем отключить появление меню по правому клику, используя этот простой сниппет.

3. Отключение/включение поля ввода

Для отключения:

$('input[type="submit"]').attr("disabled", true);

Для включения:

$('input[type="submit"]').removeAttr("disabled”);

Часто мы отключаем отдельные поля, которые могут быть включены если посетитель отмечает или заполняет предыдущие поля. К примеру отключаем кнопку отправки формы, которая может быть включена если пользователи отметили бокс «Я принимаю условия». Используйте вышеупомянутые скрипты для отключения и включения полей.

4. Создание кликабельных DIV'ов

$(".myBox").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
});

Если вы хотите добавить ссылку ко всему элементу DIV и сделать его кликабельным, этот jQuery-сниппет для вас. Когда пользователь кликает в любом месте DIV'а, ‘myBox’ будет искать ссылку класса ‘myBox’ внутри этого DIV'а и перенаправлять пользователя на найденную ссылку.

5. Загрузка внешнего контента

$("#content").load("somefile.html", function(response, status, xhr) {
  // error handling
  if(status == "error") {
    $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);
  }
});

Никогда ещё загрузка внешнего файла с сервера не была столь простой. Используйте этот скрипт для проверки и оценки результата.

6. Прокрутка наверх

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

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

7. Сенсор мобильных устройств

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
	// Do something
} else {
	// Do something else
}

Эта славная маленькая библиотека — обязательный инструмент для каждого разработчика, которая позволяет выявить мобильное устройство, которое используется для сёрфинка по вашей веб-страничке. Пользование этим скриптом за последнее время стало обычным делом благодаря увеличившемуся количеству веб-сайтов в Интернете с отзывчивым дизайном.

8. Открытие всплывающих окон

jQuery('a.popup').live('click', function() {</pre>
 newwindow=window.open($(this).attr('href'),'','height=100,width=100');
  if(window.focus) {newwindow.focus()}
  return false;
});

Нет лучше способа разнообразить ваш сайт чем привлекающие глаза всплывающие окна (поп-апы). Хотя поп-апы могут быть часто раздражающими, они могут быть очень продуктивными, если использовать их стильно. Со вышенаписанным скриптом вы можете с лёгкостью открыть поп-апы на ваших страницах.


Paranoid - курс от Codeby Security School

Представляем вашему вниманию курс от команды codeby - "Комплекс мер по защите персональных данных, анонимности в интернете и не только" Подробнее ...


9. Обновление части страницы

setInterval(function() {
$("#refresh").load(location.href+" #refresh>*","");
}, 10000); // milliseconds to wait

Иногда мы хотим обновить определённую секцию страницы, чтобы показать обновления, при этом оставив остальную часть страницы без изменений. Мы делаем это используя этот скрипт. Вы можете видеть этот скрипт в действии почти на всех новостных порталах, где новостные заголовки обновляются каждые несколько секунд.

10. Показ полосок в таблице

$(document).ready(function(){                             
     $("table tr:even").addClass('stripe');
});

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

11. Поправляем ссылки на отсутствующие изображения

$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});

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

12. Проверка выбран ли (Checked) чекбокс (Checkbox)

Одиночный чекбокс:

$('#checkBox').attr('checked');

Все чекбоксы:

$('input[type=checkbox]:checked');

Хотите ли вы узнать выбран ли (Checked) одиночный чекбокс (checkbox) или сразу много чекбоксов, вы можете использовать вышеприведённый код. Код совместим только с jQuery v 1.5, для 1.6 замените‘.attr’ на ‘.prop’.

13. Очистка поля ввода

<!-- jQuery -->
$('input[type=text]').focus(function(){   
           var $this = $(this);
           var title = $this.attr('title');
           if($this.val() == title)
           {
               $this.val('');
           }
}).blur(function() {
           var $this = $(this);
           var title = $this.attr('title');
           if($this.val() == '')
           {
               $this.val(title);
           }
});

Очистка поля ввода используется для подсказки пользователю, что они должны записать в определённое поле. С вышеприведённым скриптом, поле будет отображать определённый текст, например «Ваше имя», который будет немедленно стёрт, как только пользователь кликнет (переведёт фокус) на это поле.

14. Валидация email адреса

(function ($) {
	$.fn.validateEmail = function () {
		return this.each(function () {
			var $this = $(this);
			$this.change(function () {
				var reg = /^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/;
				if ($this.val() == "") {
					$this.removeClass("badEmail").removeClass("goodEmail")
				}else if(reg.test($this.val()) == false) {
					$this.removeClass("goodEmail");
					$this.addClass("badEmail");
				}else{
					$this.removeClass("badEmail");
					$this.addClass("goodEmail");
				}
			});
		});
	};
})(jQuery);

Абсолютно необходимый скрипт — библиотека валидации email'а, она нужна для каждого сайта, который имеет форму «связь с нами» или любую другую форму в которой требуется валидный email пользователя. Если пользователь вводит неверный адрес электронный почты, он будет немедленно оповещён сообщением о неверной почте.

15. Открытие внешних ссылок в новом окне

$('a').each(function() {  
  var a = new RegExp('/' + [removed].host + '/');  
  if(!a.test(this.href)) {  
    $(this).click(function(event) {  
      event.preventDefault();  
      event.stopPropagation();  
      window.open(this.href, '_blank');  
    });  
 }  
});

Вручную прописывание атрибутов для внешних ссылок на вашей веб-страницы ‘target=”_blank” может быть очень тоскливым занятием. Вы можете избежать этой ситуации используя данный выше скрипт.

Подведение итогов

jQuery-сниппеты, которые я представил в вышеупомянутом списке — являются наиболее популярными и широко используемыми скриптами на большинстве веб-сайтах. Не стесняйтесь использовать их по своему усмотрению и дайте мне знать, если что-то не работает (хотя я уверен, что всё определённо работает). Наслаждайтесь!


Кстати, ведь популярный сайт создаёт значительную нагрузку на хостинг. Важно, чтобы ваш хостер обеспечивал устойчивую работу в любых ситуациях, чтобы сайт не «лежал» от отключений электричества в дата центре, частом смене программного обеспечения, частых DdoS-атаках или просто от нагрузок сайтов и т.д. Ведь пользователям это быстро надоест и они уйдут на сайт-конкурент. Я перебрал довольно много решений и нашёл очень хороший вариант — 100 рублей в месяц! За эти деньги даётся профессиональный хостинг, с отличным аптаймом, с бесплатным доменом второго уровня в подарок (!), с 2 гигабайтами места на SSD диске, с неограниченным количеством баз данных, с возможностью подключать неограниченное количество новых доменов (платить придётся только за каждый новый домен — 139 рублей). Вообще, всего хорошего так много, что проще всего посмотреть это здесь.

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


Codeby Market от Сodeby

Мы запустили свой магазин CodebyMarket Equipment for InfoSec. Уже добавили RaspberryAlfa Long-RangeOrange PiArduino и многое другое. Купить Pentesting Devices