3000 слов о кроссдоменности! Интервьюер показал удовлетворенную улыбку после прослушивания 😎

JavaScript

18 марта 2020 г.
"Ежедневная серия вопросов 🚀"
Автор: Ван Эргоу
Блог:Наггетс,думаю нет,Знай почти,короткая книга,CSDN
Ставьте лайк и смотрите снова, сформируйте привычку, ежедневная серия вопросов будет постоянно обновляться, ваша поддержка - самая большая мотивация для меня продолжать делиться 😘

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

Прежде чем говорить о кросс-доменном, необходимо сначала понять концепцию”同源策略“.

Что такое источник?

Источник = протокол + имя домена + номер порта.

если дваurlПротокол, имя домена и номер порта точно такие же, тогда эти дваurlявляется гомологичным.

мы можем пройтиwindow.originилиlocation.originПолучить текущий источник.

https://wang.com
https://ergou.com
//不同源，域名不一致（记住：只有完全一模一样才算同源）

http://wang.com/index.html
http://wang.com/server.php
//同源

localhost 调用 127.0.1 
//不同源

Что такое политика единого происхождения?

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

Характеристики браузера: еслиJSзапустить на источникеA, то можно получить только исходникAданные, не могу получить источникBdata, то есть междоменное использование запрещено.

Предположениеwang.com/index.htmlцитируетсяergou.com/1.jsТак что просто скажи1.jsзапустить на источникеwang.comвнутри

Обратите внимание, что это иergou.comхотя это не имеет значения1.jsскачал с него.

так1.jsпросто получитьwang.comданные, это то, что делают браузеры, и браузеры специально разработаны таким образом.

Почему существует политика того же происхождения?

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

Взяв за пример WeChat, источникhttps://user.weixin.com, предполагая, что текущий пользователь вошел в систему, иAJAXпросить/friends.jsonВы можете получить список друзей пользователя.

В это время пришел хакер и поставилhttps://user-winxin.comПоделитесь этим с вами, на самом деле это фишинговый сайт, вы нажимаете на эту страницу, эта страница также запрашивает ваш список друзейhttps://user.weixin.com/friends.json。

Извините, ваш список друзей в это время был украден хакерами?

корень проблемы

Причина, по которой возникает эта проблема, заключается в том, чтоНеспособность отличить отправителя.

в WeChatJSи хакерскийJSотправленный запрос мало что меняет(refererразница)

Но если разработчик в фоновом режиме не проверяетreferer, то абсолютно никакой разницы.

Поэтому, если нет политики одного и того же происхождения, любая страница может украсть данные в WeChat и даже баланс в Alipay.

принципы безопасности

Некоторые друзья могут спросить, так какrefererЕсть разница, тогда проверяйrefererРазве это не будет хорошо?

принципы безопасности: Прочность цепи безопасности зависит от самого слабого звена в цепи безопасности.

Кроме того, что, если бэкэнд-разработчик этого веб-сайта идиот?

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

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

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

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

Что такое междоменный домен?

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

Несколько вопросов о междоменном

Зачемa.wang.comдоступwang.comТакже считается междоменным?

Потому что в истории были разные компании, использующие доменные имена,a.wang.comа такжеwang.comНе обязательно тот же веб-сайт, браузеры осторожны и считают, что это другой источник.

Почему разные порты считаются перекрестными достоянием?

По той же причине порт не является ситуацией компании, нет.

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

почему два сайтаIPТо же самое, тоже считается междоменным?

По той же причине, посколькуIPтакже можно поделиться.

Почему его можно использовать в разных доменахCSS,JSи фотографии и т.д.?

Политика того же происхождения ограничивает доступ к данным, цитируемCSS,JSА когда дело доходит до картинок, мы на самом деле не знаем их содержания, мы просто цитируем.

Перекрестный домен CORS

Что такое КОРС?

CORSПолное название "Совместное использование ресурсов между источниками"(Совместное использование ресурсов из разных источников). Это позволяет браузеру отправлятьXMLHttpRequestзапрос, тем самым преодолеваяAJAXОграничение только для гомологичного использования.

Как понять КОРС?

еслиwang.comа такжеergou.comОба сайта мои, я просто хочуwang.comпосетитьergou.comЧто мне делать с данными в нем?

нужно толькоwang.comнапишите в шапке ответаergou.comможно получить доступ. ЭтоCORS.

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

две просьбы

CORSСуществует два типа междоменных запросов, один из нихпростой запросДругойсложный запрос.

простой запрос

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

  • Метод запросаHEAD,POSTилиGET
  • Информация заголовка http не превышает следующих полей:Accept,Accept-Language,Content-Language,Last-Event-ID,Content-Type(Ограничено тремя значениями:application/x-www-form-urlencoded,multipart/form-data,text/plain)

Реализация простого запроса заключается в добавленииOriginПоле:

GET /cors HTTP/1.1
Origin: http://wang.com
Host: api.ergou.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0
...

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

еслиOriginУказанный источник не принимается сервером, то есть браузер считает, что заголовок ответа не содержитAccess-Control-Allow-Originполе, автоматически выдается ошибка.

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

еслиOriginУказанный источник принимается сервером, и сервер возвращает следующий ответ:

Access-Control-Allow-Origin: http://api.ergou.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8
  • Access-Control-Allow-Origin: Это поле обязательно к заполнению. Его значение либо при запросеOriginзначение поля, либо*, что означает, что принимаются запросы с любого доменного имени
  • Access-Control-Allow-Credentials: Это поле является необязательным. Его значение является логическим значением, указывающим, разрешать ли отправкуCookie. по умолчанию,Cookieне входит вCORSв запросе. установить какtrue, указывая, что сервер явно разрешает,CookieМожно включить в запрос и отправить на сервер вместе. Это значение такжеможно установить толькоtrue, если сервер не хочет, чтобы браузер отправлялCookie, удалите поле. (Примечание: если вы хотите отправитьcookie, не только сделать вышеуказанные настройки, но иAJAXустановить в запросеwithCredentialsАтрибуты)
  • Access-Control-Expose-Headers: Это поле является необязательным.CORSпри запросе,XMLHttpRequestобъектgetResponseHeader()Метод может получить только 6 основных полей:Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma. Если вы хотите получить другие поля, вы должныAccess-Control-Expose-Headersуказано внутри.

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

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

Например, метод запросаPUTилиDELETE,илиContent-TypeТип поляapplication/json.

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

var url = 'http://api.wang.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();

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

После того, как сервер получает предварительный запрос, он проверяетOrigin,Access-Control-Request-Methodа такжеAccess-Control-Request-HeadersПосле подтверждения того, что кросс-оригинальный запрос разрешен, будет сделан соответствующий ответ.

Access-Control-Allow-Origin: http://api.wang.com
Content-Type: text/html; charset=utf-8

Проблемы с CORS

не поддерживаетсяIE8/9, если вы хотитеIE8/9использоватьCORSНеобходимо использовать кросс-доменыXDomainRequestвозражать против поддержкиCORS.

кросс-доменный JSONP

Что такое JSONP?

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


let script = document.createElement('script');

script.src = 'http://www.wang.cn/login?username=wang&callback=callback';

document.body.appendChild(script);

function callback(res) {
  console.log(res);
}

Как называется функция обратного вызова?

Имя обратного вызова — это случайное число, которое может быть сгенерировано случайным образом, мы берем это имя какcallbackПараметры передаются фону, фон снова вернет нам эту функцию и выполнит

Междоменные преимущества JSONP

  • совместимыйie
  • междоменный

Междоменные недостатки JSONP

  • Так как этоscriptтеги, поэтому не могу прочитатьajaxТак что точный статус, не знаю, что такое код состояния или заголовок ответа, он знает только успех и неудачу.
  • не поддерживаетсяpost(потому чтоscriptтеги, поэтому поддерживает толькоgetпросить)

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

Если в статье что-то не так, поправьте меня.

Спасибо всем~ 💘

Категории