Сводка знаний [Сеть]

опрос

1. Что происходит, когда браузер вводит адрес

  1. Разобрать URL
  2. Разрешение DNS, мониторинг кеша
  3. Клиент и сервер устанавливают TCP-соединение (трехстороннее рукопожатие).
  4. Запрос и передача данных
  5. визуализация данных
  6. Разбирать HTML, генерировать дерево DOM, анализировать код CSS, отображать данные на веб-странице

2. Разница между опросом, длинным опросом, длинным соединением и веб-сокетом

  • Опрос: регулярно отправляйте ajax-запросы на сервер, не дожидаясь ответа.
  • Долгий опрос: клиент отправляет запрос на сервер, сервер сохраняет соединение, и когда появляется сообщение об обновлении, он немедленно возвращается к клиенту, и соединение закрывается.
  • Длинное соединение: клиент отправляет запрос на сервер, а сервер сохраняет соединение.Когда появляется сообщение об обновлении, оно немедленно возвращается к клиенту, и соединение остается.
  • websocket: протокол двусторонней связи на основе TCP, предоставляемый H5, сервер активно отправляет сообщения клиенту, и постоянное соединение может быть установлено только с одним соединением рукопожатия.

3. websocket

Функции:

  1. На основе протокола TCP, первое рукопожатие через HTTP, порт по умолчанию 80\443
  2. Может передавать текст или двоичные данные
  3. нет ограничений по гомологии
  4. wss (зашифровано через TLS)

Как обновить:

 1. 客户端发起协议升级请求(http/get)
 Connection: Upgrade // 表示要升级协议
 Upgrade: websocket // 表示要升级到websocket协议
 Sec-WebSocket-Version: 13 // websocket的版本号
 Sec-WebSocket-Key: V8JrNqt+p99r+9wknOeGVw== // 匹配服务端返回的Sec-WebSocket-Accept，提供防护防止恶意连接
 
 2. 服务端响应并返回101，标识协议切换成功
 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f43a4a47e19040d3ba82e53e17edca3f~tplv-k3u1fbpfcp-zoom-1.image)

4. Три рукопожатия, четыре расставания

!Необходимо понимать протокол передачи, пакеты данных

  • трехстороннее рукопожатие
    客户端      ->(建立连接)->          服务器
    客户端   <-(确认接受，建立连接)<-   服务器
    客户端      ->(确认接受)->          服务器
  • четыре разрыва
    客户端      ->(关闭连接)->      服务器
    客户端      <-(确认关闭)<-      服务器
    客户端      <-(关闭连接)<-      服务器
    客户端      ->(确认关闭)->      服务器

5. Код статуса запроса

2XX запрос выполнен успешно

  • 200 Запрос выполнен успешно
  • 204 Запрос выполнен успешно, но ресурсы не возвращены.
  • 206 Сервер успешно обработал часть запроса на получение)

3XX редирект

  • 301 (Перемещено навсегда) Постоянное перенаправление

    Указывает, что запрошенный ресурс был перемещен на URL-адрес, указанный в заголовке Location, который является фиксированным и не изменится. Поисковая система внесет исправления на основе этого ответа.

  • 302 (Найдено) временное перенаправление

    Код состояния перенаправления указывает, что запрошенный ресурс был временно перемещен на URL-адрес, указанный в заголовке Location. Браузер перенаправит на этот URL, но поисковик не обновит ссылку на ресурс

  • 303 (См. Другое) Ссылка перенаправления ведет не на вновь загруженный ресурс, а на другую страницу
  • 304 (Не изменено) При доступе к кэшированным ресурсам сервер не возвращает данных

4XX Ошибка клиента

  • 401 Требуется аутентификация
  • 403 Доступ запрещен
  • 404 Ресурс на сервере не найден

5ХХ ошибка сервера

6. Вопросы безопасности

XSS (Cross Site Scripting) предназначен для внедрения незаконных js-скриптов на веб-страницы и получения файлов cookie для управления браузером.

  • DOM xss: Использование DOM позволяет программам и сценариям динамически получать доступ и обновлять содержимое, структуру и стиль документа.
  • светоотражающий хсс: когда запрос сделан, XSS-код появляется в URL-адресе, и окончательный ввод отправляется на сервер.После того, как сервер анализирует, XSS-код появляется в содержимом ответа, и, наконец, браузер анализирует и выполняет его.
  • хранится xss: Когда злоумышленник отправляет фрагмент кода XSS, он принимается и сохраняется на стороне сервера. Когда все браузеры посещают страницу, они будут XSS. Наиболее типичный пример — доска объявлений.

вред:

  • Получить информацию о пользователе с помощью виртуальной формы ввода
  • Получить файлы cookie, которые могут выполнять опасные действия от имени пользователя.

Метод профилактики:

  • httpOnly: установите атрибут HttpOnly в файле cookie, чтобы скрипт js не мог прочитать информацию о файле cookie.
  • Внешний и внутренний формат формы ввода проверки, фильтрация необоснованных символов

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

вред:

  • Использование аутентифицированных пользователей для проведения незаконных операций с информацией о продукте и личной информацией и т. д.

Метод профилактики:

  • Captcha: заставить пользователя взаимодействовать с приложением
  • уменьшить количество запросов на получение
  • Защитный механизм проверки токена CSRF признан наиболее подходящим решением

Принцип использования токена

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

7. Процесс запроса Ajax

  1. Создайте объект XMLHttpRequest,
  2. Создайте http-запрос и укажите URL, метод и параметры запроса.
  3. Функция для установки изменения статуса http-запроса
  4. отправить http-запрос
  5. Получить возвращенные данные через обратный вызов
  6. оказывать

8. Междоменный подход

Та же политика происхождения: Один и тот же протокол (http/https), доменное имя и порт имеют одно и то же происхождение, и междоменные связи отсутствуют, и наоборот.

  • Совместное использование ресурсов между источниками (CORS)

    Требуется настройка серверной части

  • сервер переадресации прокси

    Запросить прокси-интерфейс того же адреса, сервер обращается к междоменному интерфейсу и возвращает данные

  • jsonp

    Используйте функцию, согласно которой тег скрипта не ограничен политикой того же происхождения, напишите адрес запроса в src и перезвоните данные в конце

    <script type="text/javascript" src="http://localhost/Service.ashx?callback=jsonpCallback" />

    Ручная реализация

    function jsonp(url,callback) {
	// 定义回调函数
    window[callback] = function(){//...todo}
    // 生成script标签
    let script = document.createElement('script')
    // 设置src地址
    script.src = url + '?fn=' + callback
    // 添加到document中
    document.appendChild(script)
}

9. куки, сессионстораже, локальное хранилище

cookie

  • Размер хранилища до 4k
  • всегда переносится в http-запросах
  • Нужно установить максимальный возраст, он будет уничтожен, если превысит время

sessionStorage

  • Максимальный размер хранилища 5M
  • хранится локально
  • Текущая сессия действительна и уничтожается при закрытии страницы или браузера.
  • Переходя от A к B, B может совместно использовать sessionStorage с A; если B открыт отдельно, он будет нулевым

localStorage

  • Максимальный размер хранилища 5M
  • хранится локально
  • Если время истечения срока действия не установлено, оно будет сохранено навсегда.
  • общий между страницами

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

Категории