Проблемы безопасности, связанные с cookies

Иногда в cookies приходится хранить конфиденциальные данные, и в этом случае разработчик должен позаботиться о том, чтобы информация хранящееся в cookie не была передана третьим лицам. Существует несколько методов защиты информации, хранящейся в cookie:

● установка области видимости cookies;

● шифрование;

● ограничение доступа для доменов;

● отправка cookies по защищенному запросу.

Наилучшим решением является комплексное применение всех этих способов.

Однако и в этом случае, к примеру, каталоги /web/index.php, /web1/page.html и т. д. будут удовлетворять этому ограничению. Если такое положение также является нежелательным, можно ограничить область видимости cookies до конкретной страницы:

setcookie( "name", $value, "/web/index.php" );

 

Однако и такой способ в полной мере не решает проблему, так как в этом случае доступ к информации, содержащейся в cookie, может получить, к примеру, скрипт /web/index.php-script/anti_cookie.php. Поэтому появляется необходимость в шифровании.

 

Так же нами была изучена библиотека JavaScript – JQuery.

JQuery – библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. jQuery позволяет манипулировать объектами на странице и совершать с ними различные действия.

jQuery позволяет:

● Обращаться к любому элементу DOM (объектной модели документа) и не только обращаться, но и манипулировать ими.

● Работать с событиями.

● Легко осуществлять различные визуальные эффекты.

● Работать с AJAX (очень полезная технология, позволяющая общаться с сервером без перезагрузки страницы, но пока мы ее трогать не будем).

● Имеет огромное количество JavaScript плагинов, предназначенных для создания элементов пользовательских интерфейсов.
Для манипулирования нужными элементами страницы в Javascript есть несколько способов найти их на странице среди прочего множества объектов. Эти способы требуют запоминания большого количества информации, в то время как для поиска элемента при помощи jQuery необходимо лишь помнить ID элемента,
с которым вы хотите работать. Код обращения в общем случае будет выглядеть следующим образом: $('путь к элементу(элементам)') Ключевой функцией в jQuery является функция $() – она тем или иным образом вызывается всеми методами jQuery.

Благодаря тому, что объем программного кода jQuery меньше, чем объем стандартного кода Javascript, сокращаются временные затраты на разработку элементов веб-страницы. Сам программный код более понятен по сравнению с JavaScript.

<script type="text/javascript" src="jquery.js"></script> <!--Подключаем библиотеку JQUERY-->

<script type="text/javascript">

$(document).ready(function() {

 

привязываем событие клика к элементу страницы с id равным displayText

$('#displayText').click(function () {

выводим значение элемента с id равным myString на экран с помощью функции alert

alert($('#myString').val());

});

 

привязываем событие двойного клика к элементу input с параметром value начинающимся со слова "Очистить", который находится в блоке div

$('div input[value^=Очистить]').dblclick(function () {

выбираем первый элемент input в блоке с id равным testForm и очищаем его значение

$('#testForm input:first').val('');

});

 

привязываем событие клика к объекту input который находится в блоке div, а это div тоже должен находится в блоке div

$('div div input').toggle(function () {

выбираем элемент input у которого свойство type равно text и скрываем его за 2 секунды

$('input[type = text]').fadeOut(2000);

изменяем надписать на кнопке с id равным hideTextBox на "Показать поле"

$('#hideTextBox').val('Показать поле');}, function () {

выбираем элемент input у которого свойство type равно text и показываем его за 3 секунды

$('input[type = text]').fadeIn(3000);

изменяем надписать на кнопке с id равным hideTextBox на "Спрятать поле"

$('#hideTextBox').val('Спрятать поле');});

привязываем событие наведения мыши к объекту с id равным myString, т.е. к текстовому полю

$('#myString').mouseover(function () {

изменяем текст элемента p на "Вы НАВЕЛИ мышку на текстовое поле!"

$('p').text('Вы НАВЕЛИ мышку на текстовое поле!'); });

привязываем событие отведения мыши к объекту с id равным myString, т.е. к текстовому полю

$('#myString').mouseout(function () {

изменяем текст элемента p на "Вы УБРАЛИ мышку с текстового поля!"

$('p').text('Вы УБРАЛИ мышку с текстового поля!');

});

\\

привязываем событие изменение состояния к элементу select

$('select').change(function () {

получаем значение выбранного элемента select (на этот раз через его id = borderDiv, а не через селетор select для примера)

var borderDivValue = $('#borderDiv:selected').val();

 

если пользователь выбрал значение "Нарисовать красную рамку", т.е. value = "red"

if (borderDivValue == 'red')

{

указываем напрямую css свойства border-color и border-width для элемента с id = testForm

$('#testForm').css({

'border-color':'red',

'border-width':'2px'

});

}

иначе (можно было написать else if (borderDivValue == 'green')), т.е. value = "green"

else

{

указываем напрямую css свойства border-color и border-width для элемента с id = testForm

$('#testForm').css({

'border-color':'green',

'border-width':'5px'

});

}

 

При указании css свой есть небольшая деталь: если вы указываете свойства каких-нибудь

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

запись "border: green 5px" работать не будет, а запись 'border-color':'green', 'border-width':'5px' будет работать корректно.

});

});

</script>

 

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

Код клиентской стороны (JavaScript), который будет выполнять функцию отправки запроса обратно на сервер. В Source View формы Default.aspx добавьте часть кода, которая внедрена в <script> элемента страницы <head>:

<head runat="server">

<title>Untitled Page</title>

<script>

function ShowCover(){

var Command = "1:" +

document.forms[0].elements['txtISBN'].value;

var context = new Object();

context.CommandName = "ShowCover";

window.status="Retrieving cover...";

<%=callbackStr%>

}

 

function CallBackHandler(result, context) {

// Показываем обложку с Amazon.com

if (context.CommandName == "ShowCover") {

var indexofComma = result.indexOf(",");

// Отображаем используемый Image URL

var ImageURL = result.substring(0,indexofComma);

document.images.item("Image1").src=ImageURL;

// Обновляем URL книги

var BookURL = result.substring(indexofComma+1,result.length);

document.links("BookURL").href = BookURL;

window.status="Retrieving cover...Done.";

}

}

// Обрабатываем ошибки

function onError(message, context) {

alert("Exception:\n" + message);

}

</script>

</head>

 

Оператор <%=callbackStr%> включит сгенерированную строку в функцию, итак в процессе работы она превратится:

function ShowCover(){

var Command = "1:" +

document.forms[0].elements['txtISBN'].value;

var context = new Object();

context.CommandName = "ShowCover";

window.status="Retrieving cover...";

WebForm_DoCallback('__Page',Command,

CallBackHandler,context,onError, false)

}

Возврат результата проводится с помощью переменной результата в функции CallBackHandler(). Он может выглядеть следующим образом (два URL в данной строке отделяются запятой, первый указывает на книжную обложку

 

db.php

Lt;?php

$mysql_connect=mysql_connect("localhost","root","");

$db=mysql_select_db("forum");

?>

exit.php

Lt;?php

//Запускаем сессию для работы с куками

session_start();

//Так как пользователь хотел выйти,

//удаляем ему логин и id из кукисов

unset($_SESSION['login']);

 

//Переадресовываем на главную

header("location: index.php");

?>

add_mess.php

Lt;?php

//Проверям есть ли переменные на добавление

if (isset($_POST['mess']) && $_POST['mess']!="" && $_POST['mess']!=" ")

{

//Стартуем сессию для записи логина пользователя

session_start();

//Принимаем переменную сообщения

$mess=$_POST['mess'];

//Переменная с логином пользователя

$login=$_SESSION['login'];

//Подключаемся к базе

include ("bd.php");

//Добавляем все в таблицу

$time=date("Y-m-d")." ".date("H:i:s");

$res=mysql_query("INSERT INTO `messages` (`time`,`login`,`message`) VALUES ('$time','$login','$mess') ");

}

?>

Load_mess.php

Lt;?php

include ("bd.php");

//Выбираем все сообщения

$res=mysql_query("SELECT * FROM `messages` ORDER BY `time` ");

//Выводим все сообщения на экран

while ($d=mysql_fetch_array($res))

{

echo "_{<font color='#5f1c6d'>".$d['time']."\t".$d['login'].":&nbsp;</font>}<div style='background:#9f3;'>".$d['message']."</div><br>";

}

?>

 

index.php

<html><head>

<title>Чат</title>

<link type="text/css" rel="stylesheet" href="divb.css" media="all"/>

<head>

</head>

 

<body bgcolor="#53AC6D">

<?php

//Запускаем сессию для работы с кукис файлами

session_start();

//Если отсутствуют логин и айди,

//отображаем форму входа и регистрации

if(!isset($_SESSION['login']))

{

?>

<center>

<div>

<form action="register.php" method="POST">

<h3>Регистрация</h3>

Логин: <br> <input type="text" name="login">

<br>

Пароль: <br> <input type="password" name="password">

<br>

<input type="submit" value="Зарегистрироваться">

</form>

</div>

<div>

<form action="login.php" method="POST">

<h3>Вход</h3>

Логин: <br> <input type="text" name="login">

<br>

Пароль: <br> <input type="password" name="password">

<br>

<input type="submit" value="Вход">

</form>

</div>

 

</center>

 

<?php

}else

//Если сессия запущена, то есть присутствуют файлы

//кукис, и в них есть логин и айди

//то отображаем профиль пользователя

//Для этого достаем из базы все данные по логину

//и выводим их на странице

 

{

 

include("bd.php");

$user=$_SESSION['login'];

$res=mysql_query("SELECT * FROM `users` WHERE `login`='$user' ");

$user_data=mysql_fetch_array($res);

 

 

echo "<div>Welcome ".$user."<a href='exit.php'>?Выход?</a></div>

<table>

<td><div style='divb1'><object height='700' width='700' data='chat.php'></div>

</td

</table>";}?></body></html>

chat.php

<style>

#messages

{

width:500px;

height:500px;

overflow:auto;

border:1px solid silver;

}

</style>

 

<!--Подключаем Jquery!-->

<script type="text/javascript" src="jquery.js"></script>

 

<script type="text/javascript">

//Функция отправки сообщения

function send()

{

//Считываем сообщение из поля ввода с id mess_to_add

var mess=$("#mess_to_send").val();

// Отсылаем паметры

$.ajax({

type: "POST",

url: "add_mess.php",

data:"mess="+mess,

// Выводим то что вернул PHP

success: function(html)

{

//Если все успешно, загружаем сообщения

load_messes();

//Очищаем форму ввода сообщения

$("#mess_to_send").val('');

}

});

}

 

//Функция загрузки сообщений

function load_messes()

{

$.ajax({

type: "POST",

url: "load_messes.php",

data: "req=ok",

// Выводим то что вернул PHP

success: function(html)

{

//Очищаем форму ввода

$("#messages").empty();

//Выводим что вернул нам php

$("#messages").append(html);

//Прокручиваем блок вниз(если сообщений много)

$("#messages").scrollTop(90000);

}

});

}

</script>

 

<table>

<tr>

<td>

<div id="messages" style="text-align: left">

</div>

</td>

</tr>

<tr>

<td>

<form action="javascript:send();">

<div>

<input type="text" id="mess_to_send" style="width:450;">

<input type="button" value="Send">

</div>

</form>

</td>

</tr>

</table>

 

<script>

//При загрузке страницы подгружаем сообщения

load_messes();

//Ставим цикл на каждые три секунды

setInterval(load_messes,3000);

</script>

<head>

<link type="text/css" rel="stylesheet" href="divb.css" media="all"/>

 

</head>

 

login.php

Lt;?php

//Если пришли данные на обработку

if (isset($_POST['login']) && isset($_POST['password']))

{

include ("bd.php");

 

//Записываем все в переменные

$login=htmlspecialchars(trim($_POST['login']));

$password=htmlspecialchars(trim($_POST['password']));

 

//Достаем из таблицы инфу о пользователе по логину

$res=mysql_query("SELECT * FROM `users` WHERE `login`='$login' ");

$data=mysql_fetch_array($res);

 

//Если такого нет, то пишем что нет

if (empty($data['login']))

{

die ("Такого пользователя не существует!");

}

//Если пароли не совпадают

if ($password!=$data['password'])

{

die ("Введенный пароль неверен!");

}

//Запускаем пользователю сессию

session_start();

 

$_SESSION['login']=$data['login'];

 

//Переадресовываем на главную

header("location: index.php");

}

 

?>

register.php

<?php

 

//Проверяем пришли ли данные

if(isset($_POST['login']) && isset($_POST['password']))

{

//Записываем все в переменные

$login=htmlspecialchars(trim($_POST['login']));

$password=htmlspecialchars(trim($_POST['password']));

 

 

//Проверяем на пустоту

if($login=="" || $password=="")

{

die("Заполните все поля!");

}

 

include("bd.php");

 

//Достаем из БД информацию о введенном логине

$res=mysql_query("SELECT `login` FROM `users` WHERE `login`=' $login ' ");

$data=mysql_fetch_array($res);

 

//Если он не пуст, то значит такой уже есть

if(!empty($data['login']))

{

die("Такой логин уже существует!");

}

 

//Проверяем длину пароля

if(strlen($password)<7)

{

die("Длина пароля не может быть меньше 7 символов!");

}

 

 

//Вставляем данные в БД

$query="INSERT INTO `users` (`login`,`password`) VALUES(' $login ',' $password ') ";

$result=mysql_query($query);

 

//Если данные успешно занесены в таблицу

if($result==true)

{

echo "Вы успешно зарегистрированы! <br><a href='index.php'>На главную</a>";

}

//Если не так, то выводим ошибку

else

{

echo "Error! ----> ". mysql_error();

}

}

?>

 

Divb.css

div {

padding: 7px;

margin: 7px;

-moz-border-radius: 7px;

-khtml-border-radius: 7px;

-webkit-border-radius: 7px;

border-radius: 7px;

-moz-box-shadow: 0px 7px 8px #02041c;

-webkit-box-shadow: 0px 7px 8px #02041c;

box-shadow: 0px 7px 8px #02041c;

text-align: right;

font-family: Comic Sans MS, cursive

 

background: #00AC00;

}

.divb2

{

border: 4px ridge;

text-align: right;

}

.divb1

{

border: 4px ridge #ff0;

background: #ddd ;}

.divb

{

background: #ddd ;}

.divonline

{

border: 4px ridge;

background: #fdf ;}

.divcreate

{

border: 4px ridge;

background: #dfd;

}