Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

кодирование JavaScript

кодирование  JavaScript

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

Допустим у нас есть строка такого типа:

var str = "<script> alert('Hello!!!'); <\/script>";
document.write(str);

здесь в качестве строки у нас указан JavaScript-сценарий(вывод модального окна).

C помощью метода write объекта document, мы выводим нашу строку в браузер в результате чего и выполняется сценарий строки. Хочу отметить что для символа '/' я применил экранирование '\'.

Ну да ладно, теперь давайте рассмотрим нашу первую функцию , функцию кодирования escape():

var str = escape("<script> alert('Hello!!!'); <\/script>");
document.write(str);

как видите теперь нам вывелась строка в новом формате, и понятно что не о каком выполнении сценария строки речи уже не идет:

%3Cscript%3E%20alert%28%27Hello%21%21%21%27%29%3B%20%3C/script%3

Что же здесь произошло? А произошло следующее, функция escape() - возвращает строковое значение в формате Юникода , то есть все специальные символы пробелы, кавычки и т. п. кодируются(к примеру пробел преобразуется в %20, а знак ! в %21), также все знаки значений которые превышают 255 сохраняются в формате %uxxxx.

Вы уже наверняка видели подобные строки в адресной строке:

http://js-test/index.html?newwindow=1&rlz=1C1BLWB_enRU768&ei=wqHyWcb0A8STadb1v5AN&q=%D0%BA%D0%B0%D0%BA+%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B8%D1%82%D1%8C+%D0%B8+%D0%BF%D0%B5%D1%80%D0%B5%D0%B1%D1%80%D0%B0%D1%82%D1%8C+%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B+%D0%B8%D0%B7+%D0%B0%D0%B4%D1%80%D0%B5%D1%81%D0%BD%D0%BE%D0%B9+%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8+%D1%81+%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E+js&oq=%D0%BA%D0%B0%D0%BA+%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B8%D1%82%D1%8C+%D0%B8+%D0%BF%D0%B5%D1%80%D0%B5%D0%B1%D1%80%D0%B0%D1%82%D1%8C+%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B+%D0%B8%D0%B7+%D0%B0%D0%B4%D1%80%D0%B5%D1%81%D0%BD%D0%BE%D0%B9+%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8+%D1%81+%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E+js&gs_l=psy-ab.3...430978.466415.0.466626.103.83.20.0.0.0.154.6073.75j6.81.0....0...1.1.64.psy-ab..2.82.4691...0j0i131k1j0i67k1j0i10i1k1j0i10i1i67k1j0i10i67k1j0i10i1i42k1j0i3k1j0i22i30k1j33i22i29i30k1j33i160k1j33i21k1.0.sfEPGbNjSm0

так вот если вы хотите закодировать какое либо значение в адресной строке, то функцию escape() использовать не стоит, так для кодирования строки URL есть специальная функция encodeURI, пример:

var url = encodeURI ('/test.html?code="<script>document.write("Hello!!!")<\/script>');
document.write(url);

В результате на выходе мы получаем кодированную строку , которую можем вставлять в url. Используя данную функцию следует учитывать что она не кодирует символы (: , /, ; , ?) для кодирования этих знаков нужно воспользоваться другой функцией encodeURIComponent:

var url = encodeURIComponent ('/test.html?code="<script>document.write("Hello!!!")<\/script>');
document.write(url);

результат

%2Ftest.html%3Fcode%3D%22%3Cscript%3Edocument.write(%22Hello!!!%22)%3C%2Fscript%3E

как вы понимаете с таким адресом мы не сможем никуда перейти , поэтому пользуйтесь данной функцией разумно.

Итак мы рассмотрели основные функции кодирования в js. Теперь непосредственно перейдем к функциям декодирования, которые из формата Юникод приводят нашу строку к более менее читаемому виду.

Декодирование это обратный процесс кодирования. К примеру если мы возьмем строку которую мы кодировали в самом начале с помощью функции escape()

var str = unescape('%3Cscript%3E%20alert%28%27Hello%21%21%21%27%29%3B%20%3C/script%3E');
document.write(str);

Благодаря использованию функции декодирования unescape() наш закодированный сценарий на javaScript вновь будет выполняться.

для работы со строками url также есть функции декодирования decodeURI() и decodeURIComponent они же являются обратными для encodeURI и encodeURIComponent

var url = decodeURI('http://js-test/index.html?newwindow=1&rlz=1C1BLWB_enRU768&ei=wqHyWcb0A8STadb1v5AN&q=%D0%BA%D0%B0%D0%BA+%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B8%D1%82%D1%8C+%D0%B8+%D0%BF%D0%B5%D1%80%D0%B5%D0%B1%D1%80%D0%B0%D1%82%D1%8C+%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B+%D0%B8%D0%B7+%D0%B0%D0%B4%D1%80%D0%B5%D1%81%D0%BD%D0%BE%D0%B9+%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8+%D1%81+%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E+js&oq=%D0%BA%D0%B0%D0%BA+%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B8%D1%82%D1%8C+%D0%B8+%D0%BF%D0%B5%D1%80%D0%B5%D0%B1%D1%80%D0%B0%D1%82%D1%8C+%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B+%D0%B8%D0%B7+%D0%B0%D0%B4%D1%80%D0%B5%D1%81%D0%BD%D0%BE%D0%B9+%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8+%D1%81+%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E+js&gs_l=psy-ab.3...430978.466415.0.466626.103.83.20.0.0.0.154.6073.75j6.81.0....0...1.1.64.psy-ab..2.82.4691...0j0i131k1j0i67k1j0i10i1k1j0i10i1i67k1j0i10i67k1j0i10i1i42k1j0i3k1j0i22i30k1j33i22i29i30k1j33i160k1j33i21k1.0.sfEPGbNjSm0');
document.write(url);

Здесь мы преобразовали эту ужасающую строку к более читабельному виду

http://js-test/index.html?newwindow=1&rlz=1C1BLWB_enRU768&ei=wqHyWcb0A8STadb1v5AN&q=как+получить+и+перебрать+параметры+из+адресной+строки+с+помощью+js&oq=как+получить+и+перебрать+параметры+из+адресной+строки+с+помощью+js&gs_l=psy-ab.3...430978.466415.0.466626.103.83.20.0.0.0.154.6073.75j6.81.0....0...1.1.64.psy-ab..2.82.4691...0j0i131k1j0i67k1j0i10i1k1j0i10i1i67k1j0i10i67k1j0i10i1i42k1j0i3k1j0i22i30k1j33i22i29i30k1j33i160k1j33i21k1.0.sfEPGbNjSm0

Что касается decodeURIComponent

var url = decodeURIComponent('%2Ftest.html%3Fcode%3D%22%3Cscript%3Edocument.write(%22Hello!!!%22)%3C%2Fscript%3E');
document.write(url);

результат:

/test.html?code="Hello!!!

Вот так вот дорогие друзья сегодня вы узнали как кодировать и декодировать строки в javaScript , я надеюсь что данная статья была для вас интересной и познавательной и вы не раз еще воспользуетесь полученными знаниями.

А я желаю вам успехов и удачи! Пока!

Оцените статью:

Статьи

Разработки

Комментарии

В данном разделе пока нет комментариев!

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm