Эти вопросы интервью браузера, видите, сколько вы можете ответить?

браузер опрос
Эти вопросы интервью браузера, видите, сколько вы можете ответить?

Эта статья в основном объясняет знания, связанные с браузерами.Содержание статьи относительно длинное и содержит много знаний.Настоятельно рекомендуется собрать и прочитать~

предисловие

Если вам помогла эта статья, ️️ Подписывайтесь + Сайт, поощряйте автора, статья первая, обратите вниманиеПередняя часть НанцзюПолучите последние статьи в первый раз~

哪吒2.gif

1. Каковы распространенные ядра браузеров?

Ядро браузера можно разделить на две части:

渲染引擎а такжеJS引擎(⚠️note: ядро ​​браузера мы часто говорим, относится к двигателю рендеринга)

Поскольку движок JS становится все более и более независимым, ядро ​​​​относится только к движку рендеринга, который в основном используется для запроса ресурсов веб-страницы для анализа и форматирования и представления их пользователю.

Браузер/среда выполнения ядро (движок рендеринга) JavaScript-движок
Chrome Blink (28~) Webkit (Chrome 27) V8
FireFox Gecko SpiderMonkey
Safari Webkit JavaScriptCore
Edge EdgeHTML Чакра (Для JavaScript)
IE Trident Чакра (для JScript)
Opera Presto->blink Линейный алфавит А (4,0-6,1) / линейный алфавит В (7,0-9,2) / футарк (9,5-10,2) / каракан (10,5-)
Node.js - V8

2. Каковы основные компоненты браузера?

  • Пользовательский интерфейс: включая адресную строку, кнопки для перехода вперед/назад/обновления/закладок 🔖
  • Движок браузера: передача инструкций между пользовательским интерфейсом и механизмом рендеринга.
  • Механизм рендеринга: используется для отрисовки запрошенного контента.
  • Сеть: используется для выполнения сетевых вызовов, таких как http-запросы, имеет независимый от платформы интерфейс и может работать на разных платформах.
  • Интерпретатор JavaScript: используется для анализа и выполнения кода JavaScript.
  • Серверная часть пользовательского интерфейса: используется для рисования основных виджетов, таких как поля со списком и окна, с использованием пользовательского интерфейса операционной системы под капотом.
  • Хранение данных: относится к уровню сохраняемости. Браузер хранит различные данные, похожие на файлы cookie, на жестком диске. HTML5 определяет технологию веб-базы данных, которая представляет собой облегченную и полную технологию хранения данных на стороне клиента.

⚠️ ПРИМЕЧАНИЕ. В отличие от большинства браузеров, Google (Chrome) имеет один экземпляр механизма рендеринга для каждой вкладки. Каждая вкладка — это отдельный процесс

2-浏览器组成.png

3. Подскажите, что произошло от ввода URL до отрисовки страницы?

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

1. Браузер принимает URL-адрес для открытия потока сетевых запросов (включая: механизм браузера, поток и процесс и т. д.).

2. Откройте сетевой поток, чтобы отправить полный http-запрос (включая: DNS-запрос, TCP/IP-запрос, сетевой протокол уровня 5 и т. д.).

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

4. HTTP-взаимодействие между фоном и передним планом (включая: заголовок http, код ответа, структуру сообщения, файлы cookie и т. д.)

5. Проблемы с кешем (включающие: сильный кеш http и кеш согласования, заголовок кеша, etag, просроченный, контроль кеша и т. д.)

6. Процесс синтаксического анализа после того, как браузер получает пакет данных http (включая лексический анализ html, синтаксический анализ в дереве DOM, синтаксический анализ CSS для создания дерева CSSOM и слияние для создания дерева рендеринга). синтез слоев, отрисовка графического процессора, обработка внешних ссылок и т. д.)

7. Визуальная модель css (включая: правила рендеринга элементов, такие как: содержащий блок, блок управления, BFC, IFC и т. д.)

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

Вы обнаружите, что существует так много процессов между простым вводом URL-адреса и отображением страницы, чувствуете ли вы, что мгновенно сломались? (Не волнуйтесь, мы не будем углубляться в эту главу, давайте научим вас, как отвечать сначала этот вопрос, а потом этот Отдельная статья по нему)

  • Браузер получает IP-адрес доменного имени через DNS-сервер и запрашивает HTML-текст с этого IP-адреса.
  • Процесс рендеринга браузера анализирует HTML-текст и создает дерево DOM
  • Чтобы проанализировать HTML, если вы столкнулись с встроенным стилем или стилем файла, загрузите и создадите правило стиля. Если вы столкнулись с скриптом JavaScript, вы скачаете сценарий выполнения.
  • После построения дерева DOM и CSSOM процесс рендеринга объединяет их в дерево рендеринга.
  • Процесс рендеринга начинается с компоновки дерева рендеринга, создавая дерево компоновки.
  • Дерево рендеринга рисует дерево компоновки и создает записи чертежей.

render.png

4. Как браузер анализирует код?

Разобрать HTML

HTML анализируется построчно, а механизм рендеринга браузера анализирует и преобразует HTML-документ в узлы DOM.

  • HTML будет разобран на несколько токенов
  • Разбирать токены на объекты
  • Объединение объектов в DOM-дерево

Разобрать CSS

Браузер будет анализировать селектор CSS справа налево

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

Давайте рассмотрим пример 🌰:

<style>
.nav .title span {color:blue}
</style>
​
<div class='nav'>
  <div class='title'>
    <span>南玖</span>
  </div>
  <div class="sub_title">前端</header>
</div>

Соответствовать справа налево:

  1. Сначала найдите все самые правые отрезки, ища узлы Div.Title для каждого отрезка.
  2. Найдите узел div.nav от h3 и выше
  3. Наконец, нахождение корневого элемента html завершает обход этой ветки.

Разбор JS

В браузере есть инструмент парсера js, который специально используется для разбора нашего кода js.

Когда браузер сталкивается с js-кодом, он немедленно вызывает «парсер js» для работы.

Парсер найдет все переменные, функции, параметры и т. д. в js и присвоит переменной значение undefined.

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

5. В чем разница между DOMContentLoaded и load?

  • DOMContentLoaded: срабатывает только после завершения синтаксического анализа DOM, за исключением таких ресурсов, как таблицы стилей и изображения.
  • Загрузка: срабатывает, когда загружаются все DOM, таблицы стилей, скрипты, изображения и другие ресурсы на странице.

6. В чем разница между перерисовкой браузера и перестановкой домена?

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

Перерисовка не обязательно ведет к перерисовке, но перерисовка должна вести к перерисовке.

Как вызвать перерисовку и перекомпоновку?

Любые изменения информации, используемой для построения дерева рендеринга, приведут к перекомпоновке или перерисовке:

  • Добавлять, удалять, обновлять узлы DOM
  • По показанию: нет, чтобы скрыть узел DOM - триггера перестановки и перерисования
  • Скрытие узла DOM с помощью видимости: hidden — вызывает только перерисовку, так как геометрия не меняется.
  • Перемещение или анимация узлов DOM на странице
  • Добавьте таблицу стилей и настройте свойства стиля
  • Действия пользователя, такие как изменение размера окна, изменение размера шрифта или прокрутка.

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

  • Централизованное изменение стилей: например, используйте класс для централизованного изменения стилей.

  • использоватьdocument.createDocumentFragment(): мы можем создать узел вне дерева DOM с помощью createDocumentFragment, затем выполнить пакетные операции с этим узлом и, наконец, вставить его в дерево DOM, поэтому запускается только одна перестановка.

  • Поднять на синтетический слой

    Продвижение элемента к композитому слою имеет следующие преимущества:

    • Синтез растровой слой, будет называтьсяGPUсинтетический, чемCPUобрабатывать быстрее

    • при необходимостиrepaintКогда, простоrepaintсам, не повлияет на другие слои

    • дляtransformа такжеopacityэффект, не срабатываетlayoutа такжеpaint

      Лучший способ — улучшить синтетический слой с помощью CSS.will-changeАтрибуты

7. Почему JS однопоточный?

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

Например 🌰:Если JS многопоточный, один поток хочет изменить элемент DOM, а другой поток хочет удалить этот элемент DOM, то браузер не знает, кого слушать. Поэтому, чтобы избежать сложности, JavaScript с самого начала был спроектирован как однопоточный.

Чтобы воспользоваться вычислительной мощностью многоядерных процессоров, HTML5 предлагает стандарт Web Worker, который позволяет сценариям JavaScript создавать несколько потоков, но подпотоки полностью контролируются основным потоком и не должны работать с DOM. Таким образом, этот новый стандарт не меняет однопоточной природы JavaScript.

8. Будет ли загрузка CSS блокировать DOM?

Вывод первый

  • CSSне блокируетDOMразбирает, но блокируетDOMоказание
  • CSSзаблокируетJSвыполняется, но не блокируетсяJSЗагрузка файла

Роль CSSOM

  • Во-первых, предоставить возможность работать с таблицами стилей JavaScript.

  • Во-вторых, предоставить базовую информацию о стиле для композиции дерева макета.

  • Этот CSSOM отражается в DOM какdocument.styleSheets

Из процесса рендеринга браузера, упомянутого ранее, мы можем видеть, что:

  • DOM и CSSOM обычно строятся параллельно, поэтомуЗагрузка CSS не блокирует синтаксический анализ DOM

  • Визуализация дерева зависит от дерева DOM и CSSOM, поэтому он должен подождать, пока оба не будут загружены, чтобы начать рендеринг построения, такЗагрузка CSS блокирует рендеринг DOM

  • Поскольку JavaScript может манипулировать DOM и CSS, если интерфейс визуализируется при изменении атрибутов этих элементов (то есть поток JavaScript и поток пользовательского интерфейса выполняются одновременно), элементы, полученные до и после потока визуализации, могут быть непоследовательный. Таким образом, чтобы предотвратить непредсказуемые результаты рендеринга, настройки браузераПоток рендеринга GUI и поток JavaScript являются взаимоисключающими.Отношение

JS должен ждать загрузки CSS, почему? (CSS блокирует выполнение DOM)

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

Избегайте белых экранов и улучшите скорость загрузки CSS

  • Используйте CDN (CDN выберет ближайший узел с кэшированным содержимым, чтобы предоставить вам ресурсы в зависимости от условий вашей сети, что сократит время загрузки)
  • Сжать CSS
  • Используйте кеш с умом
  • Уменьшите количество HTTP-запросов, Merge CSS-файлов

9. Не заблокирует ли JS страницу?

Вывод первый

JS блокирует разбор DOM, поэтому заблокирует загрузку страницы

Вот почему мы часто говорим размещать файлы JS внизу.

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

Поэтому, чтобы предотвратить непредсказуемые результаты рендеринга, браузер устанавливает взаимосвязь между «потоком рендеринга GUI и механизмом JavaScript, которые являются взаимоисключающими».

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

Когда браузер выполняет программу JavaScript, поток рендеринга GUI будет сохранен в очереди и не будет продолжаться, пока выполнение программы JS не будет завершено.

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

10. В чем разница между отсрочкой и асинхронностью?

  • Оба являются асинхронными для загрузки внешних файлов JS без блокировки анализа DOM.
  • Асинхронный выполняется после загрузки внешнего JS, когда браузер бездействует и до того, как запускается событие Load. Сценарии, помеченные как асинхронные, не гарантируют выполнение в том порядке, в котором они указаны. Это свойство не влияет на встроенные скрипты (то есть скрипт атрибута **"src"** отсутствует).
  • defer срабатывает после загрузки JS и анализа всего документаDOMContentLoadedВыполняется перед событием, если отсутствуетsrcСвойства (I.E., встроенный скрипт), свойство не должно использоваться, поскольку в этом случае он не работает

11. Механизм сборки мусора в браузере

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

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

Поскольку строки, массивы, объекты и т. д. не имеют фиксированного размера, их необходимо динамически выделять, когда их размер известен. Каждый раз, когда программа JavaScript создает строку, массив или объект, интерпретатор должен выделить память для хранения этого объекта.

Интерпретатор JavaScript может определить, когда программа больше не использует объект, и когда он определяет, что объект бесполезен, он знает, что объект больше не нужен, и может освободить занимаемую им память.

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

пометить как очищенный

Это самый распространенный способ сборки мусора в JavaScript.

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

Так что помечено удалить его?

В JavaScript есть глобальный объект.Периодически сборщик мусора будет запускаться с этого глобального объекта, находить все объекты, на которые ссылается этот глобальный объект, а затем находить объекты, на которые ссылаются эти объекты... Отметьте эти активные объекты, это этап разметки. Фаза очистки состоит в том, чтобы очистить те объекты, которые не отмечены.

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

В процессе маркировки вводится понятие: метод трехцветной маркировки, три цвета:

  • Белый: неотмеченные объекты, то есть недостижимые объекты (объекты, которые не сканируются), могут быть переработаны.
  • Серый: Объект (может быть объектом), но объект не просканирован, не перерабатывается
  • Черный: он был отсканирован (доступные объекты) и не может быть восстановлен.

Отделка тегов:

Фаза маркировки ничем не отличается от метода очистки меток, за исключением того, что после завершения маркировки метод очистки меток перемещает уцелевшие объекты в одну сторону памяти и, наконец, очищает граничную память.

подсчет ссылок

Смысл подсчета ссылок заключается в отслеживании количества ссылок на каждое значение. При присвоении переменной A количество ссылок на это значение равно 1, а при переназначении переменной A количество ссылок на предыдущее значение уменьшается на 1. Когда количество ссылок становится равным 0, это означает, что доступа к этому значению нет, поэтому память, занятая этим значением, может быть очищена.

Большинство браузеров отказались от этого метода утилизации.

утечка памяти

Чтобы избежать утечек памяти, когда данные больше не используются, лучше всего сделать это, установив для него значениеnullчтобы освободить его ссылку, этот метод вызываетсяКонтактные ссылки

Какие ситуации могут вызвать утечку памяти? Как этого избежать?

Взяв в качестве примера Vue, обычно возникают следующие ситуации:

  • слушаюwindow/bodyПодождите, пока событие не отвяжется
  • ГалстукEventBusСобытие не несвязанное
  • Vuexиз$store,watchнет послеunwatch
  • Создано с использованием сторонней библиотеки, не вызывается корректная функция уничтожения

Решение:beforeDestroyСвоевременное разрушение

  • границаDOM/BOMсобытия в объектахaddEventListener,removeEventListener.
  • Шаблон наблюдателя$on,$offиметь дело с.
  • Если компонент используется в таймере, должно быть уничтожено.
  • если вmounted/createdВ хуке используется сторонняя библиотека для его инициализации и уничтожения соответственно.
  • Используйте слабые ссылкиweakMap,weakSet.
Когда освобождается память разных типов переменных в браузере?

  • тип ссылки

    • Автоматически восстанавливается V8 после отсутствия ссылок.

  • базовый тип

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

12. Расскажите о механизме кэширования браузера?

Понимание кэша браузера

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

Как узнать, является ли ресурс запрошенным сервером или прочитан из кеша?

10.缓存.png

Глядя на приведенное выше изображение, значение размера некоторых ресурсов равно размеру, а некоторыеfrom disk cache,некоторыеfrom memory cache, отображаемый размер — это запрошенный ресурс сервера, а последние два — кэш чтения.

  • дисковый кеш:Он заключается в том, чтобы сохранить ресурс на диске, дождаться следующего обращения без повторной загрузки и прочитать его прямо с диска.CurlCacheManager. (Кэш-память эффективна, чем медленнее, но большая емкость хранения, длительное время хранения)
  • кеш памяти:Это кеширование ресурсов в памяти и чтение напрямую из памяти без повторной загрузки при ожидании следующего доступа. (Это самый быстрый с точки зрения эффективности и самый короткий с точки зрения времени жизни.)
- memory cache disk cache
Та же точка Может хранить только некоторые файлы ресурсов производного класса Может хранить только некоторые файлы ресурсов производного класса
разница Данные очищаются при выходе из процесса Данные не очищаются при выходе из процесса
ресурсы хранения Общие скрипты, шрифты и картинки будут храниться в памяти Как правило, в памяти будут существовать не-скрипты, такие как css и т. д.

Классификация кэша браузера

  • Сильный кеш
  • Согласовать кеш

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

Сильный кеш

Когда браузер загружает ресурс, он сначала кэширует ресурс в соответствии с локальнымheaderОпределяется, попал ли в сильный кеш или нет.Если он попал, ресурсы в кеше используются напрямую, и на сервер больше не отправляются запросы.(Информация в заголовке здесь относится кexpiresа такжеcache-control)

Expires

Полеhttp1.0спецификации, его значение равноабсолютное времяСтрока времени в формате GMT, например Expires:Mon,18 Oct 2066 23:59:59 GMT. Это время представляет собой время аннулирования ресурса. До этого времени происходит попадание в кеш. Этот метод имеет очевидный недостаток: поскольку время инвалидации является абсолютным временем, при большой разнице во времени между сервером и клиентом это приведет к путанице в кеше. Так что от этого метода быстро отказались в более поздней версии HTTP 1.1.

Cache-Control

Кэш-Контроль даhttp1.1Информация заголовка, которая появляется, когдаmax-ageценность, чтобы судить, этоОтносительное время,НапримерCache-Control:max-age=3600Это означает, что срок действия ресурса составляет 3600 секунд. В дополнение к этой области, Cache-Control имеет следующие часто используемые значения настройки:

no-cache: согласование кеша, отправка запроса на сервер для подтверждения использования кеша.

no-store: отключить использование кеша и каждый раз повторно запрашивать данные.

public: может кэшироваться всеми пользователями, включая конечных пользователей и промежуточные прокси-серверы, такие как CDN.

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

Согласовать кеш

Когда надежный кеш отсутствует, браузер отправит запрос на сервер, и серверheaderчтобы определить, нужно ли обращаться к кэшу согласования или нет. вернуться, если попал304, который сообщает браузеру, что ресурс не обновляется и может использовать локальный кеш.(Информация заголовка здесь относится кLast-Modify/If-Modify-Sinceа такжеETag/If-None-Match)

Last-Modify/If-Modify-Since

Когда браузер запрашивает ресурс в первый раз, заголовок, возвращаемый сервером, добавляет Last-Modify, Last-modify — это время, определяющее время последней модификации ресурса.

Когда браузер снова запрашивает ресурс, заголовок запроса будет содержать If-Modify-Since, то есть Last-Modify, возвращаемый перед кешем. После получения If-Modify-Since сервер определяет, нужно ли попадать в кеш, в соответствии со временем последней модификации ресурса.

Если кеш попал, возвращается 304, а содержимое ресурса не возвращается, а Last-Modify не возвращается.

недостаток:

Ресурсы изменились за короткий промежуток времени, и Last-Modified не изменится.

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

ETag/If-None-Match

В отличие от Last-Modify/If-Modify-Since, Etag/If-None-Match возвращает контрольную сумму. ETag может гарантировать, что каждый ресурс уникален, а изменения ресурсов приведут к изменениям ETag. Сервер определяет, нужно ли попадать в кеш, в соответствии со значением If-None-Match, отправленным браузером.

И Last-Modified не то же самое, когда сервер возвращает ответ 304 Not Modified, поскольку ETag также регенерируется, заголовок ответа в этом ETag возвращается без изменений даже до этого ETag.

Last-Modified и ETAG можно использовать вместе, сервер будет отдавать приоритет ETAG, который продолжит возвращаться к 304, если последнее изменение будет продолжено.

Суммировать

Когда браузер обращается к уже посещенному ресурсу, его действия таковы:

1. Сначала посмотрите, попадает ли он в надежный кеш, если он попадает в 🎯, используйте кеш напрямую.

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

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

4. Если кеш согласования не попал, сервер вернет браузеру новые ресурсы.

13. Что такое политика браузера в отношении одного и того же источника и междоменного доступа?

Та же политика происхождения

Политика того же происхождения — это поведение браузеров для самозащиты. Так называемая гомология означает, что протокол, доменное имя и порт должны быть одинаковыми.

Большая часть контента в браузере ограничена политикой одного и того же источника, но следующие три вкладки не ограничены:

<img src="..." />
<link href="..." />
<script src="..."></script>

перекрестный домен

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

Вы можете задаться вопросом, действительно ли запрос о перекрестном происхождении отправляется на сервер?

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

Междоменные решения (перечислите несколько часто используемых)

JSONP

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

Преимущества и недостатки:

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

Идеи:

  • Объявите функцию обратного вызова, имя функции которой (например, Show) используется в качестве значения параметра, которое будет передано на сервер, который запрашивает данные между доменами, и параметр функции - это целевые данные, которые будут получены (данные, возвращаемые сервером).
  • Создавать<script>Пометить, присвоить адрес междоменного API-интерфейса данных src скрипта и в этом адресе передать серверу имя функции (можно передать параметр через вопросительный знак: ?callback=show).
  • После того, как сервер получит запрос, ему необходимо выполнить специальную обработку: объединить переданное имя функции и данные, которые он должен вам предоставить, в строку, например: переданное имя функции — show, а ее подготовленные данные —show('南玖').
  • Наконец, сервер возвращает подготовленные данные клиенту через протокол HTTP, а затем клиент вызывает и выполняет функцию обратного вызова (show), объявленную перед операцией с возвращенными данными.
// front
function jsonp({ url, params, callback }) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script')
    window[callback] = function(data) {
      resolve(data)
      document.body.removeChild(script)
    }
    params = { ...params, callback } // wd=b&callback=show
    let arrs = []
    for (let key in params) {
      arrs.push(`${key}=${params[key]}`)
    }
    script.src = `${url}?${arrs.join('&')}`
    document.body.appendChild(script)
  })
}
jsonp({
  url: 'http://localhost:3000/say',
  params: { wd: 'wxgongzhonghao' },
  callback: 'show'
}).then(data => {
  console.log(data)
})

// server 借助express框架
let express = require('express')
let app = express()
app.get('/say', function(req, res) {
  let { wd, callback } = req.query
  console.log(wd) // Iloveyou
  console.log(callback) // show
  res.end(`${callback}('关注前端南玖')`)
})
app.listen(3000)

Приведенный выше код эквивалентенhttp://localhost:3000/say?wd=wxgongzhonghao&callback=showЭтот адрес запрашивает данные, а затем возвращается в фоновом режиме.show('关注前端南玖'), и, наконец, запустите функцию show(), чтобы распечатать «Follow the front end Nanjiu».

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

CORS (Cross-Origin Resource Sharing) совместное использование ресурсов между источниками определяет, как браузер и сервер должны взаимодействовать при доступе к ресурсам из разных источников. Основная идея CORS заключается в использовании настраиваемых заголовков HTTP, позволяющих браузеру взаимодействовать с сервером, чтобы решить, будет ли запрос или ответ успешным или нет.

CORS требует поддержки как браузера, так и серверной части. IE 8 и 9 должны делать это через XDomainRequest.

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

Сервер может установить Access-Control-replow-Stork, чтобы включить CORS. Этот атрибут указывает, какие доменные имена могут получить доступ к ресурсу. Если установлен подстановочный знак, это означает, что все веб-сайты могут получить доступ к ресурсу.

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

Простой запрос:(Следующие два условия выполнены, что является простым запросом)

1. Метод запроса является одним из следующих трех:

  • GET
  • POST
  • HEAD

2. Content-Type является одним из следующих трех:

  • text-plain
  • multiparty/form-data
  • application/x-www-form-urlencoded

сложный запрос:

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

Обратный прокси Nginx

Принцип обратного прокси-сервера Nginx очень прост, то есть все клиентские запросы должны обрабатываться nginx, а nginx выступает в роли прокси-сервера, а затем перенаправляет запрос на серверную часть, тем самым избегая политики одного и того же происхождения браузера.

14. Расскажите о том, что такое XSS-атака

Что такое XSS?

Полное имя XSSCross Site ScriptingЧтобыcssдифференцированный, поэтому аббревиатураXSS, называется по-китайскимежсайтовый скриптинг

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

Что может XSS?

  • украсть печенье
  • Мониторинг пользовательского поведения, такое как ввод пароль учетной записи, есть хакерский сервер
  • Создание всплывающей рекламы на веб-страницах
  • Измените DOM на фальшивую форму входа

XSS-реализация

  • Отраженная XSS-атака
  • XSS-атака на основе DOM

Как остановить XSS-атаки?

Фильтровать или перекодировать входные сценарии

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

CSP

Реализация этой политики безопасности основана наContent-Security-PolicyHTTP-заголовки. (Политика безопасности содержимого браузера). Ее основная идея заключается в том, что сервер решает, какие ресурсы загружает браузер.

  • Ограничить загрузку файлов ресурсов в других доменах, чтобы даже если хакер вставил файл JavaScript, файл JavaScript не мог быть загружен;
  • Запретить отправку данных на сторонние домены, чтобы не произошла утечка пользовательских данных;
  • Предоставление механизма отчетности может помочь нам вовремя обнаруживать XSS-атаки.
  • Запретить выполнение встроенных скриптов и неавторизованных скриптов;

Использовать HttpOnly

Поскольку многие атаки XSS должны украсть печенье, они также могут защитить нашу безопасность cookie, используя свойство HttPonly. В этом случае JavaScript не может прочитать значение cookie. Это может также предотвратить атаки XSS.

Обычно сервер может установить некоторые файлы cookie в качестве флага HttpOnly. HttpOnly устанавливается сервером через заголовок ответа HTTP. Ниже приведен раздел в заголовке ответа HTTP при открытии Google:

set-cookie: NID=189=M8l6-z41asXtm2uEwcOC5oh9djkffOMhWqQrlnCtOI; expires=Sat, 18-Apr-2020 06:52:22 GMT; path=/; domain=.google.com; HttpOnly

Для ненадежного ввода длина ввода может быть ограничена

15. Что такое CSRF-атака?

Что такое CSRF-атака?

Полное имя CSRFCross-site request forgeryкитайский языкПодделка межсайтовых запросов, злоумышленник побуждает жертву зайти на сторонний веб-сайт, а на стороннем веб-сайте отправляет межсайтовый запрос на атакуемый веб-сайт. Используя регистрационные данные, которые жертва получила на атакованном веб-сайте, аутентификация пользователя в фоновом режиме обходится, и достигается цель выдачи себя за пользователя для выполнения операции на атакуемом веб-сайте.Атака CSRF заключается в том, что хакеры используют статус входа пользователя, чтобы делать плохие вещи через сторонние сайты..

Несколько распространенных типов атак

1. ПОЛУЧИТЬ тип CSRF

Получаемый тип CSRF очень прост и обычно требует только одного HTTP-запроса:

 <img src="http://bank.example/withdraw?amount=10000&for=hacker" >

После этой жертвы IMG посещает страницу, браузер автоматическиhttp://bank.example/withdraw?account=xiaoming&amount=10000&for=hackerСделайте HTTP-запрос. bank.example получит перекрестный запрос, содержащий данные для входа жертвы.

2. CSRF типа POST

Этот тип CSRF обычно эксплуатируется с использованием автоматически отправляемой формы, например:

 <form action="http://bank.example/withdraw" method=POST>
    <input type="hidden" name="account" value="xiaoming" />
    <input type="hidden" name="amount" value="10000" />
    <input type="hidden" name="for" value="hacker" />
</form>
<script> document.forms[0].submit(); </script>

После посещения страницы форма будет автоматически отправлена, что эквивалентно имитации выполнения пользователем операции POST.

3. Тип ссылки CSRF

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

  <a href="http://test.com/csrf/withdraw.php?amount=1000&for=hacker" taget="_blank">
  重磅消息！！
  <a/>

Поскольку пользователь входит на доверенный веб-сайт A и сохраняет состояние входа в систему, до тех пор, пока пользователь активно обращается к вышеуказанной странице PHP, атака успешна.

Особенности CSRF

  • Атаки, как правило, запускаются на сторонние веб-сайты, а не на атакуемый веб-сайт. Скомпрометированный веб-сайт не может предотвратить атаку.
  • Атака использует учетные данные жертвы для входа на атакуемый веб-сайт, чтобы выдать себя за жертву для выполнения операций, вместо того, чтобы напрямую красть данные.
  • В течение всего процесса злоумышленник не может получить учетные данные жертвы для входа, а только «мошенническое использование».
  • Межсайтовые запросы можно выполнять различными способами: URL-адреса изображений, гиперссылки, CORS, отправка форм и многое другое. Некоторые методы запросов могут быть напрямую встроены в сторонние форумы и статьи, которые трудно отследить.

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

Политика защиты

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

Это говорит нам о том, что объекты, которые мы хотим защитить, — это те сервисы, которые могут напрямую генерировать изменения данных, в то время как для сервисов, которые считывают данные, нам не нужноCSRFзащита. Ключ к защите«Добавить в запрос информацию, которая есть у хакера».

Обнаружение гомологии

Поскольку большинство CSRF исходят от сторонних веб-сайтов, мы напрямую запрещаем внешним доменам (или ненадежным доменным именам) отправлять нам запросы.

Итак, вопрос в том, как определить, исходит ли запрос из чужого домена?

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

  • Origin Header
  • Referer Header

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

Используйте заголовок Origin для определения имен исходных доменов

В некоторых запросах, связанных с CSRF, поле Origin находится в заголовке запроса. Поле содержит запрошенное доменное имя (исключая путь и запрос).

Если Origin существует, вы можете напрямую подтвердить исходное доменное имя, используя поля в Origin.

Но Origin не существует в следующих двух случаях:

  • IE11 Политика того же происхождения:IE 11 не будет добавлять заголовок Origin в запросы CORS между сайтами, заголовок Referer по-прежнему будет уникальным идентификатором. Самая фундаментальная причина заключается в том, что определение гомологии в IE 11 отличается от других браузеров.Есть два основных отличия, о которых вы можете узнатьMDN Same-origin_policy#IE_Exceptions
  • 302 редирект:Источник не включается в перенаправленный запрос после перенаправления 302, поскольку источник может считаться конфиденциальной информацией из других источников. В случае перенаправления 302 он направляется на URL-адрес на новом сервере, поэтому браузер не хочет передавать источник на новый сервер.
Используйте заголовок Referer, чтобы определить исходное доменное имя

В соответствии с протоколом HTTP в заголовке HTTP есть поле Referer, которое записывает исходный адрес HTTP-запроса. Для запросов ресурсов, таких как запросы Ajax, изображения и сценарии, Referer — это адрес страницы, которая инициирует запрос. Для переходов по страницам Referer — это адрес предыдущей страницы для открытия истории страниц. Следовательно, мы можем использовать часть ссылки Origin в Referer, чтобы узнать исходное доменное имя запроса.

Этот метод не является надежным. Значение Referer предоставляется браузером. Хотя существуют четкие требования к протоколу HTTP, каждый браузер может иметь разные реализации Referer, и нет гарантии, что в самом браузере нет дыр в безопасности. . Использование метода проверки значения Referer заключается в том, чтобы полагаться на третью сторону (т.е. браузер) для обеспечения безопасности.Теоретически это не очень безопасно. В некоторых случаях злоумышленник может скрыть или даже модифицировать запрошенный им Referer.

В 2014 году рабочая группа W3C по безопасности веб-приложений выпустила проект политики Referrer Policy, в котором указывается, как браузеры должны отправлять Referrers. На данный момент большинство новых браузеров поддерживают этот проект, и мы, наконец, можем гибко управлять политикой Referer на нашем веб-сайте. В новой версии политики реферера указаны пять политик реферера: «Нет реферера», «Нет реферера при переходе на более раннюю версию», «Только происхождение», «Происхождение при перекрестном происхождении» и «Небезопасный URL-адрес». Три стратегии, существовавшие ранее: никогда, по умолчанию и всегда, изменили свои названия в новом стандарте. Их соответствующие отношения следующие:

Название политики стоимость свойства (новое) Стоимость недвижимости (старая)
No Referrer no-Referrer never
No Referrer When Downgrade no-Referrer-when-downgrade default
Origin Only (same or strict) origin origin
Origin When Cross Origin (strict) origin-when-crossorigin -
Unsafe URL unsafe-url always

В соответствии с таблицей выше необходимо установить политику REFERRER Policy на Same-Origin, для гомологичных ссылок и ссылок реферер отправляется на хост без PATH, междоменный доступ не несет Referr. Например:aaa.comЦитироватьbbb.comресурс, реферер отправляться не будет.

Существует три способа установки политики реферера:

  1. Установить в CSP
  2. Добавьте метатеги в шапку страницы
  3. Добавьте атрибут referrerpolicy в тег a

Вышеупомянутого много, но мы можем знать проблему: злоумышленник может скрыть Referer в своем собственном запросе. Если злоумышленник заполнит свой запрос следующим образом:

 <img src="http://bank.example/withdraw?amount=10000&for=hacker" referrerpolicy="no-referrer">

Тогда атака, запущенная этим запросом, не будет нести Referer.

Кроме того, Referer недоступен или ненадежен в следующих случаях:

1. Вид6,7 Случай использования window.location.href = URL-интерфазальный прыжок, потерянный резерняй.

2. При использовании window.open в IE6 и 7 Referer также будет отсутствовать.

3. Страница HTTPS переходит на страницу HTTP, и все рефереры браузера теряются.

4. Когда вы нажимаете на Flash, чтобы перейти на другой веб-сайт, ситуация с Referer становится беспорядочной и ненадежной.

Не удалось подтвердить исходное доменное имя

Что делать, если заголовки Origin и Referer не существуют? Если ни Origin, ни Referer не существуют, рекомендуется заблокировать напрямую, особенно если вы не используете случайный токен CSRF (ссылка ниже) в качестве второй проверки.

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

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

Мы уже знаем, относится ли запрашиваемое доменное имя к ненадежному доменному имени. Можем ли мы предотвратить атаки CSRF, заблокировав эти запросы напрямую?

Подождите минуту! Когда запрос является запросом страницы (например, домашней страницы веб-сайта), а источником является ссылка из поисковой системы (например, результаты поиска Baidu), это также будет рассматриваться как подозреваемая атака CSRF. Поэтому при судействе необходимо отфильтровывать ситуацию запроса страницы.Обычно шапка соответствует следующим условиям:

Accept: text/html
Method: GET

Но, соответственно, запрос страницы подвергается атаке CSRF. Если ваш сайт что-то делает с текущим пользователем в GET-запросе страницы, предупреждение будет недействительным.

Например, следующий запрос страницы:

GET https://example.com/addComment?comment=XXX&dest=orderId

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

Кроме того, как упоминалось ранее, CSRF в большинстве случаев происходит от сторонних доменных имен, но это не исключает происхождения этого домена. Если злоумышленник имеет право размещать комментарии (в том числе ссылки, изображения и т. д., в совокупности именуемые пользовательским контентом) в этом домене, он может напрямую запускать атаки в этом домене. В этом случае политика одного и того же источника не может обеспечить защиту.

Подводя итог: гомологичная проверка является относительно простым методом предотвращения, мы можем предотвратить подавляющее большинство атак CSRF. Но это не является надежным, для более высоких требований безопасности или большего количества входных данных с сайта пользователя мы предпримем дополнительные меры защиты для ключевых интерфейсов.

CSRF Token

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

Причина успеха CSRF-атаки заключается в том, что сервер ошибочно рассматривает запрос, отправленный злоумышленником, как собственный запрос пользователя. Затем мы можем потребовать, чтобы все пользовательские запросы содержали токен, который не может быть получен злоумышленниками CSRF. Сервер отличает обычные запросы от запросов атаки, проверяя, содержит ли запрос правильный токен, а также может предотвращать атаки CSRF.

Воспользуйтесь преимуществами атрибута SameSite файлов cookie.

Вы можете увидеть объяснение MDN по этому поводу

SameSiteМожно установить до трех значений,Strict,Laxа такжеNone.

  1. существуетStrictВ режиме браузер полностью запрещает запрашивать сторонние запросы от файлов cookie. такие как запросsanyuan.comСайт может быть толькоsanyuan.com
  2. существуетLaxрежиме, он немного свободнее, но только вget 方法提交表单состояние илиa 标签发送 get 请求Cookie могут быть перенесены в случае , но не в других случаях.
  3. В режиме None файлы cookie будут отправляться во всех контекстах, т. е. разрешена междоменная отправка.

Ставьте лайки, подписывайтесь и комментируйте

я前端南玖, Спасибо тебе за:«Нравится, подписывайтесь и комментируйте», увидимся в следующий раз!

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

Категории