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

На подробное прочтение этой статьи уходит около 15 минут, пожалуйста, не смотрите ее, когда ходите в платный туалет, во избежание геморроя - Микро Доктор с Сердцем

Гудан пришел на место интервью, интервьюер был свирепым татуированным мужчиной, и его сердце было полно трусости, чувств Александра~~

Интервьюер: Да ладно, скажите, какая оптимизация, по вашему мнению, может дать вашему проекту самый качественный скачок?

Собачьи яйца: ресурсы H T T P

Интервьюер иронизировал 😏 Парень начал копать яму

Интервьюер: Как оптимизировать?

Собачьи яйца: два направления, уменьшение количества запросов или размера ресурса

Интервьюер: Каковы конкретные?

уменьшить размер ресурса

gzip

GZIP с использованием кодирования Huffman и алгоритмы LZ77 для сжимания файлов, чем выше, тем больше повторяемость сжимаемого файлового пространства

Включение gzip может сжимать код, как проверить, включен ли gzip?

- Откройте панель управления и войдите в сеть, щелкните правой кнопкой мыши, чтобы выбрать заголовки ответов, и выберите «Просмотр содержимого-Кодировка».

Content-Encoding: форматы кодирования контента gzip и deflate

1.首先浏览器（也就是客户端）发送请求时，通过Accept-Encoding带上自己支持的内容编码格式列表
2.服务端在接收到请求后，从中挑选出一种用来对响应信息进行编码，并通过Content-Encoding来说明服务端选定的编码信息
3.浏览器在拿到响应正文后，依据Content-Encoding进行解压。

кейс

Мы видим, что после включения gzip-сжатия на картинке файл стал намного меньше (чем меньше файл, тем менее это заметно)

оптимизация

nginx открыть

перечислены некоторые ключевые моменты

gzip on;
gzip_min_length 1k; //不压缩临界值，大于1K的才压缩，一般不用改
gzip_comp_level 2; //压缩级别，1-10，数字越大压缩的越细，时间也越长
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; //进行压缩的文件类型
gzip_disable "MSIE [1-6]\.";//ie兼容性不好所以放弃

вебпак включен

Compression-webpack-plugin Этот плагин может предоставлять функции и расширять преимущества для вечеринок.

const CompressionWebpackPlugin = require('compression-webpack-plugin');
plugins.push(
    new CompressionWebpackPlugin({
        asset: '[path].gz[query]',// 目标文件名
        algorithm: 'gzip',// 使用gzip压缩
        test: new RegExp(
            '\\.(js|css)$' // 压缩 js 与 css
        ),
        threshold: 10240,// 资源文件大于10240B=10kB时会被压缩
        minRatio: 0.8 // 最小压缩比达到0.8时才会被压缩
    })
);

Интервьюер: Какая связь между gzip в webpack и nginx?

1.nginx没有开启gzip压缩,webpack打包出的.gz文件是用不到的
2.nginx开启了gzip，nginx查找静态资源是否存在已经压缩好的gzip压缩文件，如果没有则自行压缩（消耗cpu但感知比较少）
3.nginx开启gzip压缩,webpack打包出的.gz文件被找到，提前（打包）压缩直接使用，减少了nginx的压缩损耗

глубоко

Интервьюер: сжатие gzip это как?

到这一步的都不是一般人了，我就简述一下:使用"滑动窗口"的方法，来寻找文件中的每一个匹配长度达到最小匹配的串
，重复的内容以一个哈希值存储在字典表中并替换到匹配的串上，以此来达到压缩，因此重复度越高的文件可压缩的空间就越大。

управления источником

Решений здесь много.Например, мы часто говорим, что webpack использует сплитчанки для распаковки и некоторых методов загрузки, так что изначально большой appjs разбивается на несколько маленьких пакетов.Оптимизация webpack будет рассмотрена в следующей теме.

картина

webp, представляет собой формат файла изображения, который обеспечивает как сжатие с потерями, так и сжатие без потерь (обратимое сжатие). Сжатый без потерь файл WebP на 26% меньше, чем файл PNG, а сжатое изображение WebP с потерями имеет такое же качество. Изображения индикаторов в формате JPEG уменьшается на 25%~34% по объему.

Единственная проблема может быть в совместимости! ! Совместимость всех зол, я не делю с тобой небо

Есть и решение: в древности мы также использовали прямое сжатие изображений с потерями для уменьшения размера.
zhainanba.net/go/13513

http2 - сжатие заголовков

HTTP-запросы и ответы сделаны «в строке состояния, заголовки запроса / ответа, тело сообщения», состоящее из трех частей. В целом, тело сообщения пройдет через сжатие GZIP, или сама передача - это двоичные файлы (такие как изображения, аудио) после сжатия, но строка состояния и головки, но без какого-либо сжатия, непосредственно в обычной передаче текста.
На сайте всегда много http-запросов, и его заголовки занимают много байт, особенно куки, а иногда заголовки даже превышают размер тела.

Откройте веб-сайт по желанию, чтобы увидеть, повторяется ли эта картина в основном для большинства заголовков http.

глубоко

Интервьюер: Как достигается компрессия головы?

Концепция фрейма будет рассмотрена позже.

Подобно форме пар ключ-значение объекта:

1、完全匹配的头部键值对例如 :method: GET，可以直接使用一个字符表示
2）HTTP/2 中的静态字典大致如下：

    method    GET
    path    /index.html
    scheme    https
    cookie

同时，浏览器可以告知服务端，将 cookie: xxxxxxx 添加到动态字典中，这样后续整个键值对就可以使用一个字符表示了。
类似的，服务端也可以更新对方的动态字典。需要注意的是，动态字典上下文有关，需要为每个 HTTP/2 连接维护不同的字典。

其中静态字典在首次请求中就可以使用,对于静态、动态字典中不存在的内容，还可以使用哈夫曼编码来减小体积。
HTTP/2 使用了一份静态哈夫曼码表，需要内置在客户端和服务端之中。

Уменьшить запрос ресурсов

DNS

что такое днс?

Это разрешение доменного имени на ip. Например, посетите baidu.com, чтобы узнать его ip-адрес через систему DNS, и тогда вы сможете получить к нему доступ. Основная причина в том, что ip слишком сложно запомнить нашим пользователям, а dns делает разрешение доменного имени на ip.

Во время процесса DNS-запроса браузер входит и ждет, а время белого экрана слишком велико.Если DNS-запросов слишком много, это повлияет на производительность, поэтому необходимо использовать кеш DNS.

глубоко

Интервьюер: Как работает DNS?

1.浏览器是否有缓存
2.操作系统是否缓存，常见的如hosts文件
3.路由器是否有缓存
4.域名服务器是否有缓存：根域服务器（.） -> 顶级域名服务器（com）->主域名服务器（baidu.com）

оптимизация

<link rel="dns-prefetch" href="//baidu.com">

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

Чтобы отключить неявную предварительную выборку DNS:

<meta http-equiv="x-dns-prefetch-control" content="off">

http-протокол

В основном все еще оптимизация http2,

Базовое двоичное наслоение
Причина, по которой он считается ядром, заключается главным образом в том, что некоторые оптимизации http2 основаны на двоичном многоуровневом подходе.

Фрейм (Frame) — это наименьшая единица передачи в HTTP2-связи, все кадры начинаются с фиксированного 9-октетного заголовка, за которым следует полезная нагрузка переменной длины.

Как показано выше, http-сообщение разбивается на кадры DATA и кадры HEADERS.

мультиплексирование

Когда tcp устанавливает соединение, http2 повторно использует tcp для нескольких запросов и делит его на несколько потоков для чередующейся передачи.Медленные запросы или запросы, отправленные первыми, не будут блокировать возврат других запросов и, наконец, реорганизуются и возвращаются в соответствии с идентификатором потока. , Подобно параллелизму, ощущение непараллельности.

Кадр заголовка должен быть перед фреймом данных, а фрейм данных зависит от анализа информации фрейма заголовка.

глубоко

Интервьюер: В чем разница между мультиплексированием http2 и поддержкой http1.x?

乍一看好像都是复用了TCP连接，但俩这是截然不同的。

http1.x：
    它是遵循先进先出，服务端只能按顺序响应请求，所以如果前面的请求没有响应完变灰发生 队头阻塞，造成延迟，同时保持不必要的连接会影响服务器性能，同时浏览器限制了http同时并发的上限。
http2：
    多个请求可以同时发送（不分先后），按序响应，解决1.x的一些问题。

сервисный толчок

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

кейс

Сервер может активно передавать файлы JS и CSS клиенту, не отправляя эти запросы, когда клиент анализирует HTML.

выполнить:

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    http2_push /Home.css;     //推送css
    http2_push /Home.png;     //推送图片
  }

глубоко

Интервьюер: Почему ваша компания еще не включила http2? ? ?

Фронт-энд nginx большегрудого брата готов. Ты подумал о чувствах моего бэкэнд-брата?

nginx 1.1 и более поздних версий (nginx будет выполнять изящный переход на более раннюю версию, если он не поддерживается, используйте 1.1)
Сначала мне нужна поддержка https
причал 9.3 и выше
Апач 2.4.17 и выше

Что делать, если вы хотите обновиться, но сервер его не поддерживает?

方案来了：
  client->nginx http2.0    
  nginx->service http1.1

тайник

Это вопрос, который был задан (написан) плохо. Если вам все еще не ясно, вам нужно пересмотреть (обыграть) себя.

Если http-код равен 304, это означает, что кеш попал.

Блок-схема кэширования

Сильный кеш: Expires, Cache-Control

Жестче, если правило кеша сработает, оно будет кэшироваться напрямую

Интервьюер: разница между Expires и Cache-control

  Expires 如：Thu, 01 Dec 1994 16:00:00 GMT
  表示资源的具体过期时间，过期了就得向服务端发请求，
  然而服务器资源和电脑本地时间不同步会导致缓存更新策略不一致,例如用户自己修改时间。

  Cache-control，指定从请求的时间开始，允许获取的响应被重用的最长时间（单位：秒）。
  例如，max-age=60 表示可在接下来的 60 秒缓存和重用响应。

  若俩者同时存在Expires则被Cache-Control的max-age覆盖

глубоко

Интервьюер: Вы знаете, какие свойства есть у Cache-control?

  no-cache: 数据内容不能被缓存，每次请求都重新访问服务器， 若有max-age，则缓存期间不访问服务器
  no-store: 不仅不能缓存，连暂存也不可以(即: 临时文件夹中不能暂存该资源).
  private(默认): 只能在浏览器中缓存，只有在第一次请求的时候才访问服务器，若有max-age， 则缓存期间不访问服务器
  public: 可以被任何缓存区缓存, 如: 浏览器、服务器、代理服务器等
  max-age: 相对过期时间, 即以秒为单位的缓存时间
  s-maxage: 只用于共享缓存，比如CDN缓存（s -> share）。与max-age 的区别是：max-age用于相对过期时间的普通缓存
            而s-maxage用于代理缓存。如果存在s-maxage,则会覆盖max-age 和 Expires

Когда кеш ресурсов превышает ограничение по времени размера строгого буфера, это кеш согласования..

Кэш согласования: Last-Modified, ETag

Как следует из названия, вы можете договориться с сервером о кэшировании

Есть две пары согласованных кэшей:

 If-Modified-since: Last-Modifed

 If-None-Match: Etag

Last-Modified

Запрос браузера → сервер возвращает поле Last-Modified (время последней модификации) → браузер снова запрашивает → заголовок запроса браузера содержит поле If-Modified-Since: время последней модификации, возвращаемое сервером → сервер принимает If-Modified -Поскольку и сравнение времени последней модификации ресурса сервера → равно возвращению 304 для чтения кеша, повторить первый доступ, если оно меньше, чем время последней модификации

ETag
Запрос браузера → сервер возвращает поле ETagd (уникальный идентификационный код, сгенерированный в соответствии с содержимым текущего файла) → браузер снова запрашивает → заголовок запроса браузера содержит поле If-None-Match: уникальный идентификационный код → сервер принимает If-None-Match и Comparison текущего ETag ресурсов на сервере → equal возвращает 304 для чтения кеша, не ожидание указывает на то, что ресурс был обновлен и его необходимо повторно запросить

глубоко

Интервьюер: разница между Last-Modified и ETag

Last-Modified在秒级改变的情况下是无法更新的，也就是说如果文件在 1 秒内改变了多次，是无法监听到变化的，可能导致文件被缓存住。

但是Last-Modified的计算方式比Etag简单，原因上面也说过了时间点和计算唯一标识哈希码的算法难度是不同的，所以性能上是Last-Modified占优

服务器优先级ETag>Last-Modified。

рассмотрение

Вы понимаете свойства кеша внутри?

локальное хранилище, хранилище сессий

Локальное хранилище на уровне браузера существует в локальном браузере пользователя и может просматриваться через хранилище приложения в браузере.

Размер хранилища заполнен cookie (хранилище 5M, cookie4k), а также соответствует доменному имени.

Обратите внимание, что если вы используете localStorage для постоянного хранения, очень важно использовать код для регулярного выпуска.

Только клиент не участвует в связи с сервером, поэтому проблема безопасности файлов cookie избегает в проверке личности.

    const Interviewer = { name:"李狗蛋", position:"FE"};
    // 设置
    sessionStorage.setItem("Interviewer", JSON.stringify(Interviewer));
    localStorage.setItem("Interviewer", JSON.stringify(Interviewer));
    // 读取
    const localviewer = sessionStorage.getItem("Interviewer");
    const sessionviewer = localStorage.getItem("Interviewer");

глубоко

Интервьюер: разница между localStorage и sessionStorage и сценарии применения

localStorage：浏览器关闭依旧存在
1.存储token
2.资源存储
3.用户习惯存储

sessionStorage：浏览器关闭随之消失
1.当前数据存储节省http请求
2.翻页，前后数据存储

cdn

Как показано на рисунке, cdn — это то, что мы называем принципом близости.

глубоко

Интервьюер: Расскажите мне о принципе cdn

基于智能DNS对用户的IP地址综合参考规则和数值指标的解析，将用户调度到择最快的Cache服务器

说人话！：选取最近站点进行请求，节省了对源站的消耗（回源）

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

CDN также может выполнять кэширование, предотвращать атаки и т. д. Если вы хотите узнать об этом больше, лучше обратиться к решениям CDN, предоставляемым крупными отраслевыми производителями.

картина

Интервьюер: Какие существуют варианты уменьшения запросов на ресурсы изображения, отличные от уменьшения размера изображения?

1.雪碧图
2.图片转base64

Спрайт

Это изображение, которое объединяет несколько изображений вместе и использует фоновое позиционирование для получения того, что вы хотите.Он часто используется в коллекциях значков, так что одно изображение может уменьшить HTTP-запросы для нескольких значков.

Конечно, недостатком этой схемы является то, что фоновая позиция очень неприятна, так что давайте не будем забывать об этом, люди не хотят, чтобы это было так хлопотно~

Если используется HTTP2, эта проблема блокировки заголовка запроса, конечно, может быть решена.

base64

Base64 — это метод представления, основанный на выборе 64 печатных символов «A-Z, a-z, 0-9, +, /» для представления двоичных данных.
Первоначально Base64 появился снова, потому что двоичные файлы содержат много символов, которые нельзя отобразить и распечатать. Base64 может преобразовывать и отображать двоичные строки. Например, при открытии файлов exe, jpg и pdf с помощью Блокнота будут неотображаемые двоичные данные.

Последние браузеры поставляются с двумя методами кодирования и декодирования base64.

Это atob (от Base64 до ASCII) и btoa (от ASCII до Base64).

глубоко

Интервьюер: Как перекодировать base64 и сценарии его применения?

Транскодирование Base64 заключается в преобразовании 4 байтов в 3. Сначала считываются 4 6-бита (используя операцию ИЛИ), каждый раз сдвигается на 6 бит влево, а затем сдвигается вправо 3 раза, каждый раз на 8 бит, чтобы восстановить .

Сцены:

простое кодирование данных
Безошибочная передача контента
Электронная почта (протокол SMTP)
кодировка изображения base64

Интервьюер: Какова цель преобразования изображений в base64?

Меньшие изображения, такие как значки, используют кодировку base64,Это может уменьшить сетевой запрос на изображение; Большие изображения, использующие кодировку base64, будут смешиваться с html, увеличивая размер html-страницы,Вместо этого он увеличивает размер страницы загрузки., поэтому url-loader предоставляет функцию установки лимита

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

Как этого добиться?

1. window.btoa(str)
2. canvas.toDataURL();
3. var reader = new FileReader();
   imgUrlBase64 =reader.readAsDataURL(file);
4. webpack:url-loader

Асинхронная загрузка

отложить, асинхронный, модуль

<script async src="index1.js"></script>
<script defer src="index2.js"></script>
<script type="module" src="index3.js"></script>

Давайте сначала разберемсяDOMContentLoaded:

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，并且DOM树已经生成好了。
但是其他外部资源，如样式文件、图片、字体等并没有加载好。

deferВыполняемые до события DOMContentLoaded, сценарии выполняются в том порядке, в котором объявлены сценарии отсрочки (ставятся в очередь на выполнение). ps В зависимости от браузера не всегда может выполняться до события DOMContentLoaded, поэтому лучше включать только скрипт задержки

asyncОн будет выполнен после загрузки, поэтому рендеринг будет прерван, поэтому асинхронность не может гарантировать порядок.

module/nomoduleБраузер поддерживает код es6 напрямую, а также отложенный (по умолчанию) и асинхронный.

Проблемы совместимости между модулем браузера во всем рекомендуется оптимизировать размер файла (транскодирование восстановления громкости)

Просмотрите изображение выше:

рендеринг дома
скачать
воплощать в жизнь
Три цвета соответствуют горизонтальным линиям на рисунке ниже.

глубоко

Интервьюер: Расскажите мне о сценариях использования отсрочки и асинхронности.

不难揣测，defer肯定是更加适合多个js互相依赖且有执行顺序的场景，大多数情况都适用，包括各大脚手架也是默认defer（页面底部），业务代码最合适。

async则更加适合存放sdk或者其他毫不相关的第三方资源。

Интерактивная программа

Ленивая загрузка изображения
Водопады текут
загрузка прокрутки

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

Пересечение наблюдателя может видеть конкретную MDN

Предварительная загрузка

preload

<link rel="preload" href="style.css" as="style">

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

Скриншот: введение MDN в предварительно загружаемый контент:

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

prefetch

Браузер извлекает предварительно загруженные ресурсы при бездействии (не по запросу) и сохраняет их в кеше браузера.При использовании статического ресурса с предварительной выборкой он загружает содержимое из кеша.

глубоко

Интервьюер: Сходства и различия между предварительной загрузкой и предварительной выборкой

точки соприкосновения

异步预加载
页面加载中发现资源含有 preload 或者 prefetch 时，会从网络堆栈传输到 HTTP 缓存并进入渲染器的内存缓存。

若资源含有缓存字段（例如，存在有效的 cache-control 和 max-age），它将存储在 HTTP 缓存中，可用于当前和未来触发它的请求；
若是没有设置缓存则它会被缓存到内存缓存中并保持不变直到它被使用。

разница

preload：  直接请求
prefetch： 空闲时间请求

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

Безопасная ориентация

Это обязательный вопрос на собеседовании

https

Болевые точки

HTTP — это передача открытого текста без сохранения состояния, а HTTPS предоставляет такие функции, как зашифрованная передача и аутентификация личности, которые относительно неуязвимы.

отличие от http

Как показано на рисунке, мы видим, что к tcp к http добавлен слой SSL\TLS.

Номер порта 80 для HTTP и 443 для HTTPS.
За использование HTTPS взимается плата, в основном из-за промежуточного центра сертификации ЦС.

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

Глоссарий

对称密钥： 相同的密钥可以用于信息的加密和解密
非对称密钥：一个私钥一个公钥。用私钥加密的数据，只有对应的公钥才能解密，用公钥加密的数据， 只有对应的私钥才能解密。

глубоко

Интервьюер: Почему должно быть агентство CA?

防监听
http是明文的，而https监听得到的数据是密文。

防中间人攻击
在服务端和客户端中间进行劫持通讯，伪装为客户端伪装和服务器伪装，再加以篡改的攻击方式。

** ca机构怎么解决 **
证书由第三方权威机构颁布，在客户端浏览器中存在ca根证书的公钥
tcp握手的时候，服务端会返回自己包装过的ca证书，
ca证书包装包含了申请者公钥、申请者的组织信息和个人信息、签发机构 CA 的信息、有效时间、证书序列号等信息的明文和CA私钥对信息摘要加密的签名，
最主要是携带了公司信息、域名、
服务器信息，因此即使通过了劫持也无法完美伪造。

Интервьюер: Почему после прохождения проверки ЦС клиент генерирует случайный симметричный ключ вместо асимметричного?

HTTPS 在内容传输的加密上使用的是对称加密，非对称加密只作用在证书验证阶段。

非对称加密的加解密效率是非常低的，而 http 的应用场景中通常端与端之间存在大量的交互，非对称加密的效率是无法接受的。

同时，在 HTTPS 的场景中只有服务端保存了私钥，一对公私钥只能实现单向的加解密，所以 HTTPS 中内容传输加密采取的是对称加密，而不是非对称加密。

базовая атака

Зная, что вы больше не можете учиться, я упрощу это, и вы можете проверить другие статьи для деталей!

Атака межсайтового скриптинга XSS (межсайтовый скрипт)

xss для внедрения вредоносных скриптов от других людей на вашу страницу

Рефлексивный: сервер возвращает скрипт, а клиент выполняет его (напрямую через параметры URL).
Тип хранилища: фоновое хранилище, внешнее отображение (вводимое содержимое публикации или комментария, хранится в базе данных и вводится при чтении)
Тип DOM: на основе DOM (перехват трафика, перехват DNS, изменение структуры сценария страницы)

план обороны

Только для http: после установки атрибута HttpOnly в файле cookie сценарий js не сможет прочитать информацию о файле cookie.
Фильтр и перевод: Наггетсы, например, есть функция комментариев, но наше оповещение (1) не работает, не так ли? Передняя часть обработки должна выполняться для чувствительного текста, меток .innerHTML, .outerHTML, document.write(), eval(), setTimeout(), setInterval(), v-html (vue), опасноSetInnerHTML (реагировать) и т.п. и даже предварительный запуск кода требует абсолютного внимания к содержимому строки.

порекомендовать одинxssпакет нпм

глубоко

Что такое sql-инъекция

这不是后端知识吗？很多同学下意识的就怂了

别紧张其实就是之前说过的xss，只不过注入的是sql命令语句，
达到欺骗服务器执行恶意的SQL命令。

CSRF (подделка межсайтовых запросов)/XSRF

Баланс стоимости и сложности, этот метод атаки меньше, чем xss

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

Подделка личности: перехват файлов cookie, получение информации о пользователе для другого использования, кража учетных записей, незаконные транзакции, переводы
Межсайтовый: междоменный запрос GET с img и другими тегами, автоматическая отправка формы POST, переход по вредоносной ссылке, использование статуса входа и файлов cookie для выполнения межсайтовых поддельных запросов.

план обороны

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

Методы аутентификации: проверка реферера, проверка изображения, аутентификация в реальном времени, голосовые подсказки, распознавание лиц...
токен: токен вставки страницы (скрытый внутри тега, обычно при вводе формы, а не в файле cookie), JWT (веб-токен JSON)

Конец Сахуа ✿✿ ヽ (° ▽ °) Техно ✿

Интервьюер: Неплохо, завтра доложу в охрану.

Яйцо собаки: ? ? ?

Присылайте свое резюме на мой почтовый ящик yangyz1@guahao.com

Период смены работы в следующем году на один шаг ближе. .

Четыре последовательных качества, лайк, подписка, пересылка, комментарий

уменьшить размер ресурса

gzip

кейс

оптимизация

nginx открыть

вебпак включен

глубоко

управления источником

картина

http2 - сжатие заголовков

глубоко

Уменьшить запрос ресурсов

DNS

глубоко

оптимизация

http-протокол

мультиплексирование

глубоко

глубоко

тайник

Сильный кеш: Expires, Cache-Control

глубоко

Кэш согласования: Last-Modified, ETag

глубоко

рассмотрение

локальное хранилище, хранилище сессий

глубоко

cdn

глубоко

картина

Спрайт

base64

глубоко

Асинхронная загрузка

отложить, асинхронный, модуль

глубоко

Интерактивная программа

Предварительная загрузка

preload

prefetch

глубоко

Безопасная ориентация

https

Болевые точки

отличие от http

глубоко

базовая атака

Атака межсайтового скриптинга XSS (межсайтовый скрипт)

план обороны

глубоко

CSRF (подделка межсайтовых запросов)/XSRF

план обороны

Конец Сахуа ✿✿ ヽ (° ▽ °) Техно ✿

Чтобы узнать больше, обратите внимание на технический паблик: ihap technology blackhole! ! !