Русский
Русский
English
Статистика
Реклама

Geolocation

JavaScript за 60 секунд работаем с картой (Geolocation API, Leaflet.js, Nominatim)

14.12.2020 12:16:00 | Автор: admin


Доброго времени суток, друзья!

В этом небольшом туториале мы вместе с вами выполним три простых задания:

  • С помощью Geolocation API и Leaflet.js определим текущее местоположение пользователя и отобразим его на карте
  • Реализуем анимированный переход между городами
  • Реализуем переключение между адресами с предварительным получением названия объекта и его координат

Код проекта находится здесь.

Поиграть с кодом можно здесь:


Определяем текущее местоположение пользователя


Geolocation API позволяет пользователю предоставлять веб-приложению данные о своем местоположении. В приложении для запроса этих данных используется метод Geolocation.getCurrentPosition(). Данный метод принимает один обязательный и два опциональных параметра: success функция обратного вызова, получающая объект Position при предоставлении разрешения, error функция обратного вызова, получающая объект PositionError при отказе в доступе, и options объект с настройками. Вот как это выглядит в коде:

navigator.geolocation.getCurrentPosition(success, error, {  // высокая точность  enableHighAccuracy: true})function success({ coords }) {  // получаем широту и долготу  const { latitude, longitude } = coords  const position = [latitude, longitude]  console.log(position) // [широта, долгота]}function error({ message }) {  console.log(message) // при отказе в доступе получаем PositionError: User denied Geolocation}

Отображаем местоположение пользователя на карте


В качестве карты мы будем использовать Leaflet.js. Данный сервис является альтернативой Google Maps и OpenStreetMap, уступает им по функционалу, но подкупает простотой интерфейса. Создаем разметку, в которой подключаем стили и скрипт карты:

<head>  <!-- стили карты -->  <link      rel="stylesheet"      href="http://personeltest.ru/aways/unpkg.com/leaflet@1.7.1/dist/leaflet.css"      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="      crossorigin=""    />    <!-- скрипт карты -->    <script      src="http://personeltest.ru/aways/unpkg.com/leaflet@1.7.1/dist/leaflet.js"      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="      crossorigin=""    ></script>    <!-- наши стили -->    <link rel="stylesheet" href="style.css" /></head><body>  <!-- контейнер для карты -->  <div id="map"></div>  <!-- кнопка для вызова функции -->  <button id="my_position">My Position</button>  <!-- наш скрипт-модуль -->  <script src="script.js" type="module"></script></body>

Добавляем минимальные стили (style.css):

* {  margin: 0;  padding: 0;  box-sizing: border-box;}body {  min-height: 100vh;  display: grid;  place-content: center;  place-items: center;  background-color: rgb(241, 241, 241);}#map {  width: 480px;  height: 320px;  border-radius: 4px;  box-shadow: 0 0 1px #222;}button {  padding: 0.25em 0.75em;  margin: 1em 0.5em;  cursor: pointer;  user-select: none;}

Создаем модуль map.js следующего содержания:

// создаем локальные переменные для карты и маркера// каждый модуль имеет собственное пространство именlet map = nulllet marker = null// функция принимает позицию - массив с широтой и долготой// и сообщение, отображаемое над маркером (tooltip)export function getMap(position, tooltip) {  // если карта не была инициализирована  if (map === null) {    // второй аргумент, принимаемый методом setView - это масштаб (zoom)    map = L.map('map').setView(position, 15)  } else return  // что-то типа рекламы  // без этого карта работать не будет  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {    attribution:      ' <a href="http://personeltest.ru/aways/www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'  }).addTo(map)  // добавляем маркер с сообщением  L.marker(position).addTo(map).bindPopup(tooltip).openPopup()}

Наконец, создаем script.js:

// импортируем функциюimport { getMap } from './map.js'// находим кнопку и добавляем к ней обработчикdocument.getElementById('my_position').onclick = () => {  navigator.geolocation.getCurrentPosition(success, error, {    enableHighAccuracy: true  })}function success({ coords }) {  const { latitude, longitude } = coords  const currentPosition = [latitude, longitude]  // вызываем функцию, передавая ей текущую позицию и сообщение  getMap(currentPosition, 'You are here')}function error({ message }) {  console.log(message)}

Открываем index.html в браузере, нажимаем на кнопку, предоставляем разрешение на получение данных о местоположении, видим нашу позицию на карте.



Отлично. Двигаемся дальше.

Анимированный переход между городами


Предположим, что у нас имеется объект с тремя городами (Москва, Санкт-Петербург, Екатеринбург) и их координатами (db/cities.json):

{  "Moscow": {    "lat": "55.7522200",    "lon": "37.6155600"  },  "Saint-Petersburg": {    "lat": "59.9386300",    "lon": "30.3141300"  },  "Ekaterinburg": {    "lat": "56.8519000",    "lon": "60.6122000"  }}

Нам необходимо реализовать плавное переключение между этими городами на карте.

Добавляем в разметку контейнер для городов:

<div id="cities"></div>

Переписываем script.js:

import { getMap } from './map.js'// получаем контейнер для городовconst $cities = document.getElementById('cities');(async () => {  // получаем объект с городами  const response = await fetch('./db/cities.json')  const cities = await response.json()  // перебираем города  for (const city in cities) {    // создаем кнопку    const $button = document.createElement('button')    // текстовое содержимое кнопки - название города    $button.textContent = city    // получаем широту и долготу    const { lat, lon } = cities[city]    // записываем название города, широту и долготу    // в соответствующие data-атрибуты    $button.dataset.city = city    $button.dataset.lat = lat    $button.dataset.lon = lon    // добавляем кнопку в контейнер    $cities.append($button)  }})()// обрабатываем нажатие кнопки$cities.addEventListener('click', ({ target }) => {  // нас интересует только нажатие кнопки  if (target.tagName !== 'BUTTON') return  // получаем название города, широту и долготу из data-атрибутов  const { city, lat, lon } = target.dataset  const position = [lat, lon]  // вызываем функцию, передавая ей позицию и название города  getMap(position, city)})

Также немного изменим map.js:

let map = nulllet marker = nullexport function getMap(position, tooltip) {  if (map === null) {    map = L.map('map').setView(position, 15)  } else {    // перемещение к следующей позиции    map.flyTo(position)  }  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {    attribution:      ' <a href="http://personeltest.ru/aways/www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'  }).addTo(map)  // удаление предыдущего маркера  if (marker) {    map.removeLayer(marker)  }  marker = new L.Marker(position).addTo(map).bindPopup(tooltip).openPopup()}

Открываем index.html. При нажатии первой кнопки сразу получаем позицию и название города. При нажатии второй и последующих кнопок плавно перемещаемся между городами.



Плавное переключением между адресами


Предположим, что у нас имеются три объекта с названиями и адресами (db/addresses.json):

{  "Театр драмы": "Октябрьская площадь, 2",  "Театр оперы и балета": "Проспект Ленина, 46А",  "Коляда-Театр": "Проспект Ленина, 97"}

Нам необходимо реализовать переключение между этими объектами на карте. Но как нам это сделать без координат? Никак. Следовательно, нам каким-то образом нужно эти координаты получить. Для этого воспользуемся сервисом Nominatim от OpenStreetMap. О том, как правильно сформировать строку запроса, смотрите здесь. Я продемонстрирую лишь один из возможных вариантов.

Итак, создаем в разметке контейнер для адресов:

<div id="addresses"></div>

Переписываем script.js:

// получаем контейнер для адресовconst $addresses = document.getElementById('addresses');(async () => {  // названия и адреса объектов  const response = await fetch('./db/addresses.json')  const addresses = await response.json()  // для каждого места  for (const place in addresses) {    // создаем кнопку    const $button = document.createElement('button')    $button.textContent = place    // получаем адрес    const address = addresses[place]    // формируем строку запроса    const query = address.replace(      /([А-ЯЁа-яё]+)\s([А-ЯЁа-яё]+),\s([0-9А-ЯЁа-яё]+)/,      '$3+$1+$2,+Екатеринбург'    )    // получаем, например, 2+Октябрьская+площадь,+Екатеринбург    // записываем данные в соответствующие data-атрибуты    $button.dataset.address = address    $button.dataset.query = query    $addresses.append($button)  }})()// обрабатываем нажатие кнопки$addresses.addEventListener('click', async ({ target }) => {  if (target.tagName !== 'BUTTON') return  // получаем данные из data-атрибутов  const { address, query } = target.dataset  // получаем ответ от сервиса  const response = await fetch(    `https://nominatim.openstreetmap.org/search?q=${query}&format=json&limit=1`  )  // format - формат данных, limit - количество объектов с данными  // парсим ответ, извлекая нужные сведения  const { display_name, lat, lon } = (await response.json())[0]  // редактриуем название объекта  const name = display_name.match(/[А-ЯЁа-яё\s(\-)]+/)[0]  const position = [lat, lon]  // формируем сообщение  const tooltip = `${name}<br>${address}`  // вызываем функцию  getMap(position, tooltip)})

Открываем index.html. При нажатии первой кнопки сразу получаем позицию и название театра. При нажатии второй и последующих кнопок плавно перемещаемся между театрами.



Круто. Все работает, как ожидается.

На этом позвольте откланяться. Надеюсь, вы нашли для себя что-нибудь интересное. Благодарю за внимание и хорошего дня.
Подробнее..

Xtables-addons фильтруем пакеты по странам

17.07.2020 18:15:01 | Автор: admin

Задача блокировки трафика из определенных стран кажется простой, но первое впечатление обманчиво. Сегодня расскажем, как это можно реализовать.

Предыстория


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

Подготовка операционной системы


Фильтрация будет настраиваться с помощью утилиты iptables, которой требуется расширение для работы с GeoIP-данными. Такое расширение можно найти в xtables-addons. xtables-addons устанавливает расширения для iptables в виде самостоятельных модулей ядра, благодаря чему не нужно перекомпилировать ядро ОС.

На момент написания статьи актуальная версия xtables-addons 3.9. Тем не менее, в стандартных репозиториях Ubuntu 20.04 LTS можно найти только 3.8, а в репозиториях Ubuntu 18.04 3.0. Установить расширение из пакетного менеджера можно следующей командой:

apt install xtables-addons-common libtext-csv-xs-perl

Отметим, что между версией 3.9 и текущим состоянием проекта есть небольшие, но важные различия, о которых мы поговорим позднее. Для сборки из исходных кодов устанавливаем все необходимые пакеты:

apt install git build-essential autoconf make libtool iptables-dev libxtables-dev pkg-config libnet-cidr-lite-perl libtext-csv-xs-perl

Клонируем репозиторий:

git clone https://git.code.sf.net/p/xtables-addons/xtables-addons xtables-addons-xtables-addons

cd xtables-addons-xtables-addons

xtables-addons содержит множество расширений, но нас интересует только xt_geoip. Если не хочется тащить в систему ненужные расширения, их можно исключить из сборки. Для этого нужно отредактировать файл mconfig. Для всех желаемых модулей поставить y, а все ненужные отметить n. Собираем:

./autogen.sh

./configure

make

И устанавливаем с правами суперпользователя:

make install

Во время установки модулей ядра может возникнуть ошибка примерно такого содержания:

INSTALL /root/xtables-addons-xtables-addons/extensions/xt_geoip.koAt main.c:160:- SSL error:02001002:system library:fopen:No such file or directory: ../crypto/bio/bss_file.c:72- SSL error:2006D080:BIO routines:BIO_new_file:no such file: ../crypto/bio/bss_file.c:79sign-file: certs/signing_key.pem: No such file or directory

Такая ситуация возникает из-за невозможности подписать модули ядра, т.к. нечем подписывать. Решить эту проблему можно парой команд:

cd /lib/modules/(uname -r)/build/certs

cat <<EOF > x509.genkey

[ req ]default_bits = 4096distinguished_name = req_distinguished_nameprompt = nostring_mask = utf8onlyx509_extensions = myexts[ req_distinguished_name ]CN = Modules[ myexts ]basicConstraints=critical,CA:FALSEkeyUsage=digitalSignaturesubjectKeyIdentifier=hashauthorityKeyIdentifier=keyidEOF

openssl req -new -nodes -utf8 -sha512 -days 36500 -batch -x509 -config x509.genkey -outform DER -out signing_key.x509 -keyout signing_key.pem

Скомпилированный модуль ядра установлен, но система его не определяет. Попросим систему создать карту зависимостей с учетом нового модуля, а затем загрузим его:

depmod -a

modprobe xt_geoip

Убедимся, что xt_geoip загружен в систему:

# lsmod | grep xt_geoipxt_geoip               16384  0x_tables               40960  2 xt_geoip,ip_tables

Дополнительно убедимся, что расширение загрузилось в iptables:

# cat /proc/net/ip_tables_matches geoipicmp

Нас все устраивает и остается только добавить название модуля в /etc/modules, чтобы модуль заработал после перезагрузки ОС. С этого момента iptables понимает команды geoip, но ему не хватает данных для работы. Приступаем к загрузке базы данных geoip.

Получение базы данных GeoIP


Создаем каталог, в котором будет хранится информация, понятная расширению iptables:

mkdir /usr/share/xt_geoip

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

Версия из пакетного менеджера


Скрипт лежит по пути /usr/lib/xtables-addons, однако при попытке запуска можно увидеть не самую информативную ошибку:

# ./xt_geoip_dl unzip:  cannot find or open GeoLite2-Country-CSV.zip, GeoLite2-Country-CSV.zip.zip or GeoLite2-Country-CSV.zip.ZIP.

Ранее в качестве базы данных использовался продукт GeoLite, ныне известный как GeoLite Legacy, распространяемый по лицензии Creative Commons ASA 4.0 компанией MaxMind. С этим продуктом произошло сразу два события, которые сломали совместимость с расширением для iptables.

Во-первых, в январе 2018 года объявили о прекращении поддержки продукта, и второго января 2019 года с официального сайта убрали все ссылки на скачивание старой версии базы. Новым пользователям рекомендуется использовать продукт GeoLite2 или его платную версию GeoIP2.

Во-вторых, c декабря 2019 года MaxMind заявила о значительном изменении в доступе к их базам. Чтобы соответствовать Калифорнийскому закону о защите прав потребителей, компания MaxMind приняла решение прикрыть распространение GeoLite2 регистрацией.

Так как мы хотим воспользоваться их продуктом, зарегистрируемся на этой странице.


После на почту придет сообщение с просьбой установить пароль. Теперь, когда мы завели аккаунт, нужно создать лицензионный ключ. В личном кабинете находим пункт My License Keys, а затем нажимаем на кнопку Generate new License Key.

При создании ключа нам зададут только один вопрос: будем ли мы использовать этот ключ в программе GeoIP Update? Отвечаем отрицательно и нажимаем на кнопку Confirm. Во всплывающем окне будет отображен ключ. Сохраните этот ключ в надежное место, так как после закрытия всплывающего окна вы больше не сможете посмотреть ключ полностью.


У нас есть возможность скачивать базы GeoLite2 в ручном режиме, но их формат не совместим с форматом, который ожидает скрипт xt_geoip_build. Здесь на помощь приходят скрипты GeoLite2xtables. Для работы скриптов устанавливаем perl-модуль NetAddr::IP:

wget https://cpan.metacpan.org/authors/id/M/MI/MIKER/NetAddr-IP-4.079.tar.gz

tar xvf NetAddr-IP-4.079.tar.gz

cd NetAddr-IP-4.079

perl Makefile.PL

make

make install

Далее клонируем репозиторий со скриптами и записываем в файл полученный ранее лицензионный ключ:

git clone https://github.com/mschmitt/GeoLite2xtables.git

cd GeoLite2xtables

echo YOUR_LICENSE_KEY=\123ertyui123\' > geolite2.license

Запускаем в работу скрипты:

# Скачиваем данные GeoLite2./00_download_geolite2# Скачиваем информацию о странах (для соответствия коду)./10_download_countryinfo# Конвертируем GeoLite2 базу в формат GeoLite Legacy cat /tmp/GeoLite2-Country-Blocks-IPv{4,6}.csv |./20_convert_geolite2 /tmp/CountryInfo.txt > /usr/share/xt_geoip/dbip-country-lite.csv
MaxMind накладывает ограничение в 2000 скачиваний в сутки и при большом количестве серверов предлагает кэшировать обновление на прокси-сервере.
Обратите внимание, что выходной файл обязательно должен называться dbip-country-lite.csv. К сожалению, 20_convert_geolite2 выдает не идеальный файл. Скрипт xt_geoip_build ожидает три колонки:

  • начало диапазона адресов;
  • конец диапазона адресов;
  • код страны в iso-3166-alpha2.

А выходной файл содержит шесть колонок:

  • начало диапазона адресов (строковое представление);
  • конец диапазона адресов (строковое представление);
  • начало диапазона адресов (числовое представление);
  • конец диапазона адресов (числовое представление);
  • код страны;
  • название страны.

Это несоответствие критично и может быть исправлено одним из двух способов:

  1. править 20_convert_geolite2;
  2. править xt_geoip_build.

В первом случае сокращаем printf до нужного формата, а во втором изменяем присваивание переменной $cc на $row->[4]. После этого можно выполнять сборку:

/usr/lib/xtables-addons/xt_geoip_build -S /usr/share/xt_geoip/ -D /usr/share/xt_geoip

. . . 2239 IPv4 ranges for ZA  348 IPv6 ranges for ZA   56 IPv4 ranges for ZM   12 IPv6 ranges for ZM   56 IPv4 ranges for ZW   15 IPv6 ranges for ZW

Отметим, что автор GeoLite2xtables не считает свои скрипты готовыми для продакшена и предлагает следить за разработкой оригинальных скриптов xt_geoip_*. Поэтому перейдем к сборке из исходных кодов, в которой эти скрипты уже обновлены.

Версия из исходных кодов


При установке из исходных кодов скрипты xt_geoip_* располагаются в каталоге /usr/local/libexec/xtables-addons. В этой версии скрипта используется база данных IP to Country Lite. Лицензия Creative Commons Attribution License, а из доступных данных те самые необходимые три столбца. Скачиваем и собираем базу:

cd /usr/share/xt_geoip/

/usr/local/libexec/xtables-addons/xt_geoip_dl

/usr/local/libexec/xtables-addons/xt_geoip_build

После этих действий iptables готов к работе.

Используем geoip в iptables


Модуль xt_geoip добавляет всего два ключа:

geoip match options:[!] --src-cc, --source-country country[,country...]Match packet coming from (one of) the specified country(ies)[!] --dst-cc, --destination-country country[,country...]Match packet going to (one of) the specified country(ies)NOTE: The country is inputed by its ISO3166 code.

Способы формирования правил для iptables, в целом, остаются неизменными. Для использования ключей из дополнительных модулей необходимо явно указывать название модуля с ключом -m. Например, правило для блокировки входящих TCP-соединений на 443 порту не из США на всех интерфейсах:

iptables -I INPUT ! -i lo -p tcp --dport 443 -m geoip ! --src-cc US -j DROP

Файлы, созданные xt_geoip_build, используются только при создании правил, но не учитываются при фильтрации. Таким образом, для корректного обновления базы geoip необходимо сначала обновить iv*-файлы, а затем пересоздать все правила, которые используют geoip в iptables.

Заключение


Фильтрация пакетов в зависимости от принадлежности к странам несколько забытая временем стратегия. Несмотря на это, программные средства для такой фильтрации развиваются и, возможно, в скором времени в пакетных менеджерах появится новая версия xt_geoip с новым поставщиком geoip-данных, что значительно упростит жизнь системным администраторам.

Подробнее..

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru