Основы браузера
Меня зовут Сяофэн, и я обычный офисный работник в Империи Windows.
Сегодня я присоединился к браузерной компании. Основной бизнес компании заключается в предоставлении услуг доступа в Интернет для людей. Моя должность заключается в том, чтобы отвечать за внедрениеJavaScriptкод.
На утренней встрече утром я встретил Лао Бая, который отвечал за сетевые подключения, и должен был просить его о помощи со всеми сетевыми запросами, а также Сяо Хэя, который отвечал за управление хранилищем, что?Cookie,LocalStorage,SessionStorageВсе зависит от него. Да, чуть не забыл, есть еще одна девушка, Сяосюэ, которая отвечает за рендеринг веб-страниц.
Затем супервайзер организовал мою работу: после того, как Лао Бай извлек веб-страницу из сети, он передал ее Сяосюэ для разбора и рендеринга.Когда он встречал код JavaScript на веб-странице, я обрабатывал и выполнял код.
Выслушав договоренность супервайзера, я очень счастлив, потому что мне нужно тесно сотрудничать на работе, супервайзер организовал рабочие места Сяосюэ и меня, и я счастлив думать об этом ^_^||
Вскоре после того, как я сел, я взял на себя инициативу поговорить с Сяосюэ.
«Сяосюэ, что ты обычно делаешь на работе?»
Сяосюэ обернулась: «Я отвечаю за синтаксический анализ файла HTML, который дал мне Лао Бай, построение дерева DOM, затем получение файла CSS, построение дерева CSSOM и, наконец, рисование веб-страницы».
Я понимающе кивнул и уже собирался продолжить поиск темы, когда подошел Лао Бай.
«Сяосюэ, давай жить, это файл веб-страницы, который я только что получил, разберись с ним быстро»
Сяосюэ обернулась и начала заниматься, а через некоторое время остановилась и сказала: «Брат Сяофэн, есть<script>Тэг, твоя очередь
Похоже, это мой шанс проявить себя, я получил его.<script>Код в , начал работать и вскоре завершил его, а затем продолжил передавать его Xiaoxue для завершения следующей работы.
Таким образом, вы пришли, а я прошел несколько раундов, и я почувствовал себя немного беспокойным: «Сяосюэ, если ты сначала справишься с этим, я вернусь и выполню все задачи в конце.<script>Код на этикетке, не так ли немного проще?»
«Это невозможно. Вы можете изменить содержимое дерева DOM, которое я построил, когда вы выполняете JavaScript. Мы должны прийти по порядку, иначе будут проблемы», — торжественно сказала Сяосюэ.
У меня не было выбора, кроме как послушать ее.
Таким образом, мы сотрудничаем упорядоченно, и время от времени мы будем обращаться к Laobai для отправки данных и запрашивать у Xiaohei файлы cookie, и вскоре мы познакомимся со всеми. После нескольких таких дней я не ожидал, что спокойная работа станет бурной...
междоменный запрет
Я сегодня получил кусок кода, и мне нужно запросить часть данных, это старое правило, я подготовил параметры запроса, чтобы найти Лао Бая, и я собирался позволить ему отправить их мне.
Неожиданно Лао Бай был потрясен, увидев это: «Этомеждоменный запросАх, не могу отправить! "
Я был ошеломлен на мгновение: «Междоменный запрос? Какого черта»
Лао Бай указал на параметры запроса, которые я дал, и сказал: «Посмотрите на URL-адрес запроса, который вы дали, и URL-адрес веб-страницы, с которой вы сейчас имеете дело, это не семья, и имя домена другое».
«Тебе все равно, родные они или нет, можешь выслать, поторопись, я все еще жду».
«Нет, вы знаете, как туда попал человек до вашей должности? Это потому, что он инициировал запрос на перевод на настоящий веб-сайт банка, когда он запустил JavaScript на поддельном веб-сайте онлайн-банкинга, и потерял свои деньги. Только из-за этого. Если бы я был открыл босс, если бы я не был рядом с боссом в будние дни, мне, возможно, пришлось бы сидеть вместе».
Выслушав слова Лао Бая, я был так напуган, что чуть не потерял работу, но в моем сердце все еще были сомнения.
«Старый Бай, с чего бы сайту настоящего банка доверять запросу этого веб-сайта-подражателя?»
«Потому что этот человек только что открыл настоящий веб-сайт банка и установил cookie для Сяо Хэя, чтобы сохранить его. для запроса, не так ли. Этот метод атаки называетсяCSRF，跨站请求伪造", - сказал Лао Бай.
«Что было потом? Что было потом?», — продолжал я спрашивать.
«Позже, пацана потом уволили, неужели это не проделало для вас дыру! Но для того, чтобы подобное не повторилось в будущем, компания сформулировала правило, запрещающее междоменные запросы!»
Во время разговора Лао Бай рассказал мне, что запрещает междоменные запросы.
Только тогда я узнал, что исходный запрошенный целевой URL-адрес имел протокол, имя домена и порт, отличный от URL-адреса веб-страницы, на которой он находился, даже если он был междоменным.
К счастью, сегодня у меня есть Лаобай, иначе я потерял бы свою с трудом заработанную работу. Попрощавшись со старым белым, вернувшись на рабочую станцию, я выкинул ошибку, запрещающую междоменные запросы, и проигнорировал ее.
Однако вскоре компания получила множество жалоб на то, что макет открываемых нами веб-страниц был испорчен, а иногда даже картинки не загружались.
В конце концов, вина была возложена на сестру Сяосюэ, и Сяосюэ обиженно сказала: «Я не могу винить себя, многие из их веб-страниц ссылаются на внешние файлы css и js, особенно тот, который называетсяjQueryбольшинство. Но каждый раз, когда я нахожу Лао Бай и прошу эти документы, Лао Бай отказывается мне их давать с запретом компании на междоменные запросы, и у меня нет выбора».
Ни в коем случае, компании пришлось внести ряд изменений в правила междоменных запросов, оговорив, что они будут выпущены при импорте внешних файлов через HTML-теги в будущем, а именно:
- <img>: импортировать внешние изображения
- <link>: импортировать внешний css
- <script>: импортировать внешний javascript
- ......
После того, как правила были пересмотрены, количество жалоб, наконец, уменьшилось, и отрисовка веб-страниц постепенно пришла в норму.
Междоменный: JSONP
Однако вскоре после мирных дней количество жалоб снова увеличилось. Я узнал, когда поинтересовался популярными сейчас технологиями разделения front-end и back-end, разъединением данных и отображения, причем данные больше не помещаются напрямую в веб-файлы, а должны извлекаться с сервера для динамического отображения через Только JavaScript.
Проблема в том, что интерфейсные веб-страницы и серверы интерфейса бизнес-данных этих веб-сайтов часто находятся не вместе, принадлежат к разным доменным именам или используют разные порты, что нарушает наш междоменный запрет, в результате чего не запрашиваются данные, а страницы часто пусты без данных.
Лидеры в этом вопросе стоят перед дилеммой: они хотят разобраться с этими жалобами как можно скорее, и они не хотят отказываться от принципа безопасности и отказываться от этих междоменных запросов.
В этот момент опытный Лао Бай предложил стратегию:Поскольку правила разрешают использование внешних JS-файлов, почему бы нам не использовать его для реализации запросов к внешним интерфейсам?"
Мы все были полны вопросительных знаков, озадачены. Лао Бай продолжил: «Я нарисую картинку, и вы поймете».
Я посмотрел на рисунок, который нарисовал Лао Бай, и понял, что он имел в виду: «Старый Бай, какой план,Используйте выпуск запроса тега "
«Сяофэн, ты очень умный», — гордо кивнул Лао Бай.
«Но почему сервер возвращает нужный вам формат?» — спросила Сяосюэ.
Старый Бай почесал затылок: «Ну, нам нужен сервер, чтобы сотрудничать с нами».
"Кажется, вы можете поддерживать только запросы GET,POST,PUT,DELETEА как быть с этими просьбами? ", я тоже задал вопрос.
Лицо Старого Бая сразу изменило цвет: «Это, это, кажется, есть эта проблема, но давай сначала разберемся, это не раздражает, что они жалуются на тебя каждый день».
После обсуждения мы все же планируем сначала запустить этот план, потому что большинство из них не хотят сотрудничать с бэкэндом этих сайтов, но поскольку другого плана нет, мы неохотно соглашаемся на него после нашего лоббирования.
Для облегчения продвижения мы также дали этой технологии название:JSONP,этоJSON with Paddingзначение.
Междоменный: CORS
Постепенно жалоб стало меньше, но, как ни странно, сократилось и присутствие компании в сети. Только после расспросов я понял, что людям мы больше не нужны, и они используют браузер Chrome по соседству.
Лао Бай, который отвечал за новости, ответил: «Нет, нам больше не нужна наша технология JSONP, и переключитесь на браузер Chrome по соседству.CORSтехнологии"
Лидер переживал: «Что это за технология, может быть лучше нашего JSONP?»
Лао Бай взволнованно сказал: «Да, лидер, полное название этого CORS —跨域资源共享(Cross-origin resource sharing), он реализован не оппортунизмом, как у нас, а штатным способом, а также решает проблему поддержки только GET-запросов, можно отправить любой запрос».
— Скажи мне, что они сделали?
Лао Бай подошел к чертежной доске и начал рисовать картинку, объясняя всем во время рисования: «Перед официальным междоменным запросом они отправилиOPTIONSrequest, чтобы узнать у сервера, разрешен ли следующий запрос между источниками"
"ВАРИАНТЫ? Если вы не скажете, я забыл, что в протоколе HTTP есть такой запрос", - сказал я с улыбкой.
- Что это за метод допроса? - нахмурившись, спросил лидер.
Лао Бай продолжил: «Они договорились с этими серверами веб-сайтов и добавили несколько полей в запрос OPTIONS:»
-
Origin: исходный домен, инициировавший запрос. -
Access-Control-Request-Method: Инициируемый метод междоменного запроса (GET/PUT/POST/DELETE/...) -
Access-Control-Request-Headers: Поле заголовка запроса, включенное в инициируемый запрос на другой источник.
"Сервер указывает, разрешен ли этот междоменный запрос в поле ответа. После того, как браузер его получит, он проверяет, не соответствует ли он требованиям, и отклоняет последующий запрос"
-
Access-Control-Allow-Origin: К каким доменам разрешен доступ (* означает, что запросы со всех доменов разрешены) -
Access-Control-Allow-Methods: какие методы запроса разрешены -
Access-Control-Allow-Headers: какие поля заголовка запроса разрешены -
Access-Control-Allow-Credentials: разрешать ли файлы cookie
После того, как Лао Бай закончил говорить, нарисовалась и картинка:
«Каждый раз задавать вопросы очень сложно», — сказала Сяосюэ, глядя на фотографию.
Старый Бай покачал головой и сказал: «Эй, Сяосюэ в курсе. Чтобы не спрашивать каждый раз, они также сделали две важные оптимизации».
Увидев, что мы все выпрямили шеи и стали ждать ответа, Лао Бай замедлил шаг и продолжил: «Во-первых, если это простая просьба, то сделайте запрос напрямую, просто добавьте его к запросу.OriginВ поле указано собственное происхождение, проверьте в ответе Access-Control-Allow-Origin, если оно не соответствует требованиям, будет сообщено об ошибке, и спрашивать отдельно не нужно"
«Так что же такое простая просьба?» — спросил я.
«Простой запрос означает, что метод запроса относится к одному из HEAD, GET и POST. Заголовки запроса являются только следующими. Если запрос не соответствует требованиям, это непростой запрос, и вы должны спросить ."
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type: (application/x-www-form-urlencoded, multipart/form-data, text/plain)
«Тогда какая вторая оптимизация?»
"Я пропустил один в предыдущем поле ответа сервера, и еще одинAccess-Control-Max-Age, он указывает срок действия результата запроса, и браузеру не нужно повторно спрашивать в течение срока действия».
Выслушав объяснение Лао Бая, все похвалили его, что выше, чем наш метод JSONP.
Руководители сразу же решили, что мы должны поддержать и этот междоменный подход, чтобы как можно быстрее сократить убытки компании.
Некоторые из нас действовали быстро, и после нескольких дополнительных дней работы мы, наконец, реализовали этот план. Тяжелая работа окупается, и наш бизнес постепенно улучшается.
Продолжение следует
пасхальные яйца
Утром, как только я прибыл в компанию, сестра Сяосюэ повернула голову и сказала мне: «Брат Фэн, начальник попросил вас пройти к нему в кабинет. Он не выглядит очень довольным, так что будьте осторожны».
— Вы знаете, что происходит?
«Я не знаю, я только что слышал, что вы выполнили какой-то неправильный код JavaScript»
Я так нервничаю, я чувствую, что что-то не так
Если вы предсказываете, что будет дальше, обратите внимание на продолжение захватывающего...
Прошлый популярный обзор
Всего за одну атомарную операцию бастуют все остальные ядра ЦП
Сделанный! Процессор слепо требует, чтобы что-то произошло в ближайшее время!
Ужасный! ЦП стал пособником хакеров!
Какая хеш-таблица сильнее? Несколько основных языков программирования спорят!
Kernel Address Space Adventure 4: Переключение потоков
Потрясенный! Первая панорама анализа исходного кода всей сети раскрывает секрет Nginx
Катастрофа, вызванная целым числом + 1
Все вместе! Краткое изложение методов взлома, которые должен знать каждый программист
DDoS-атака: Война Бесконечности
Воспоминания об объекте Java: сборка мусора
Кто переместил ваш HTTPS-трафик?
Фантастическое путешествие HTTP-пакета
Я мошеннический поток программного обеспечения