Знание компьютерной сети, которое должен понимать клиентский интерфейс — (междоменные, прокси, локальное хранилище)

Серия статей о компьютерных сетях, которые должны быть понятны фронтенду:

• DNS-серверы и междоменные проблемы
• Многоуровневая модель компьютерных сетей
• IP-адрес и MAC-адрес
• Знание компьютерной сети, которое должен понимать клиентский интерфейс — (междоменные, прокси, локальное хранилище)
• Внешний интерфейс должен понимать знание компьютерной сети - (TCP)
• Внешний интерфейс должен понимать знание компьютерной сети - (HTTP)
• Знание компьютера сетевых знаний о том, что передний конец должен понимать - (XSS, CSRF и HTTPS)

Процесс обработки данных сетевой модели

Пространственная структура доменных имен:

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

Процесс поиска DNS

1. Клиент отправляет запрос на локальный сервер доменных имен, чтобы запросить IP-адрес www.baidu.com.
2. Локальный DNS-сервер делает запрос к корневому DNS-серверу, и корневой DNS-сервер сообщает адрес локального сервера (.com).
3. Локальный DNS-сервер отправит запрос на (домен .com) и получит (baidu.com) адрес сервера
4. Локальный DNS-сервер отправит (baidu.com) отправляет запрос, получит(www.baidu.com) IP-адрес 61.135.169.125
5. Локальный DNS-сервер отвечает клиенту доменным именем (www.baidu.com) соответствует IP-адресу 61.135.169.125

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

Браузер имеет только одно и то же ограничение на сетевые запросы. Тот же источник означает, что протокол, имя домена и номер порта одинаковы. Скрипты на стороне клиента из разных источников не могут читать и записывать ресурсы XHR другой стороны без явного авторизация Ресурсы XHR являются междоменными. Возьмем в качестве примера обнаружение гомологии http://www.a.com/test/index.html:

• woooooo.ah.com/enemy/afraid.contract…----успех
• child.ah.com/test/index. …---- не удалось, доменное имя отличается
• woohoo.ahh.com/test/index. …---- не удалось, другой протокол (https)
• woohoo.ah.com:8080/test/index. …---- не удалось, номер порта другой

междоменное решение

• jsonp: поддерживает только GET, не поддерживает POST-запросы, небезопасный XSS
• postMessage: при использовании с iframe он должен быть совместим с IE6, 7, 8, 9.
• document.domain: ограничен субдоменами под одним и тем же доменным именем
• cors: требуется фоновое сотрудничество для связанных настроек
• websocket: требуется фоновое сотрудничество для изменения протокола, который несовместим.Требуется socket.io
• прокси: используйте прокси, чтобы избежать междоменных запросов, вам нужно изменить конфигурацию nginx, apache и т. д.

jsonp

• Браузер не имеет ограничений политики одного и того же происхождения для атрибута src тега script, атрибута ref тега link и атрибута src тега img. Использование этой «лазейки» может очень хорошо решать междоменные запросы. использует тот факт, что тег script не имеет ограничений по происхождению.
• При запросе стороннего сайта мы можем поместить запрос в атрибут src тега script, что похоже на запрос обычного JS-скрипта, который можно свободно запрашивать с разных сайтов.

//创建script发送请求
//请求返回执行cb函数，并且删除创建的script
//类似于$ajax中的jsonp
function jsonp(url,params,cb){
    return new Promimse((resolve,reject)=>{
        window[cb] = function(data){
            resolve(data);
            document.body.removeChild(script);
        }
        params={...params,cb},
        let arrs=[];
        for(let key in params){
            arrs.push(`${key}=${params[key]}`)
        }
        let script = document.createElement('script');
        script.src= url + '?'+ arrs.join('&');
        document.body.appendChild(script);
    })
}
jsonp({
    url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
    params:{wd:%E8%B7%A8%E5%9F%9F},
    cb:'show'}).then(data=>{
        console.log(data)    
    })

1. Введите https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=%E8%B7%A8%E5%9F%9F&&cb=show
2. Вернуть show({q:"междоменный",p:false,s:["междоменный запрос","междоменный доступ","междоменная проблема","запрос номера междоменной доставки","перекрестный -domain ajax" ,"Кросс-логистика","Кроссинг","Междоменный экспресс","Решения междоменных запросов","Как решать междоменные проблемы"]});

postMessage

Используется с iframe, предполагая, что a.html расположен на сервере localhost:3000, а b.html расположен на сервере localhost:4000.

//a.html
<body>
    <iframe id="frame"  src="http://localhost:4000/b.html" frameborder="0" onload="load()"></iframe>
    <script>
        function load(){
            let frame = document.getElementById('frame');
            frame.contentWindow.postMessage('我很帅','http://localhost:4000');
            window.onmessage =function (e){
                console.log(e.data);
            }
        }
    </script>
</body>
//otherWindow.postMessage(message, targetOrigin);
//otherWindow:指目标窗口，也就是给哪个window发消息，是 window.frames 属性的成员或者由 window.open 方法创建的窗口
//message:是要发送的消息，类型为 String、Object (IE8、9 不支持)
//targetOrigin: 是限定消息接收范围，不限制请使用'*'
//注意otherWindow和targetOrigin的区别

//b.html
<body>
    <script>
        //data:消息
        //origin:消息来源地址
        //source:源DOMWindow 对象
        window.onmessage =function (e){
            console.log(e.data);
            e.source.postMessage('不要脸',e.origin);
        }
    </script>
</body>

document.domain

//a.html
<body>
    helloa
    <iframe id="frame"  src="http://www.kongbz.com/b.html" frameborder="0" onload="load()"></iframe>
    <script>
        document.domain = 'kongbz.com';//设置domain
        function load(){
            let frame = document.getElementById('frame');
            console.log(frame.contentWindow.a)
        }
    </script>
</body>

<body>
    hellob
    <script>
        document.domain = 'kongbz.com';//设置domain
        var a = 'isB'
    </script>
</body>

websocket

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

//客户端
<body>
    hellob
    <script>
        let socket = new WebSocket('ws://localhost:3000');
        socket.onopen = function(){
            socket.send('我很帅')
        }
        socket.onmessage = function(e){
            console.log(e.data)
        }
    </script>
</body>

//服务端
let express = require('express');
let Websocket = require('wss');
let wss= new WebSocket.Server({port:3000})
wss.on('connection',function(ws){
    ws.on('message',function(data){
        console.log(data);
        ws.send('不要脸');
    })
})
let app = new express();
app.listen(3000)

cors

const http = require('http')
const whitList = ['http://localhost:4000'];
http.createServer(function (req, res) {
  let origin = req.headers.origin;
  //在白名单中的域名才能访问
  if(whitList.includes(origin)){
    //允许的域名(* 所有域)，*不能和Access-Control-Allow-Credentials一起使用
    res.header("Access-Control-Allow-Origin", "*");
    //允许携带哪个头访问，不设置不能携带参数
    res.header("Access-Control-Allow-Headers","ContentType");
    //允许的方法，不设置默认支持GET、HEAD、POST，其他类型必须设置才能处理请求
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    //运行携带cookie，设置之后还能服务器才能接受cookie
    res.header("Access-Control-Allow-Credentials",true);
    //允许前端获取哪个头，不设置浏览器不能解析后台返回的参数
    res.header("Access-Control-Allow-Expose-Headers",'ContentType');
    if(req.method=== 'OPTIONS'){
        res.end()
    }
  }
}).listen(9000, function () {
    console.log('server is runing at 9000')
})

proxy

Например, страница test.a.cn/index.html вызывает test.b.cn/service.json.

//nginx.conf
location / {
    root;
    index index.html index.htm;
}
location ~.*\.json {
    root json;
    add_header "Access-Control-Allow-Origin" "*";
}

прокси и шлюзы

• Прокси — это приложение с функцией пересылки, оно играет роль «посредника» между сервером и клиентом, принимает запрос, отправленный клиентом, без изменения URI запроса и перенаправляет его на сервер, а также получает ответ, возвращаемый сервером, и пересылает его клиенту.
• Кэширующий прокси: Когда прокси пересылает ответ, ресурс будет заранее кэширован на прокси-сервере.Когда прокси-сервер снова получает запрос на тот же ресурс, он не может получить ресурс с исходного сервера, а возвращает ранее кэшированный ресурс в ответ
• Прозрачный прокси: тип прокси, который не выполняет никакой обработки сообщения при пересылке запроса или ответа.
• Шлюз — это сервер, который пересылает коммуникационные данные других серверов.При получении запроса от клиента он обрабатывает запрос как исходный сервер, владеющий собственными ресурсами.Его механизм работы аналогичен механизму прокси.Сервер предоставляет службы для протоколов, отличных от HTTP.

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

• Каждый сталкивался с этим.Когда вы набираете номер службы поддержки 10086, в регионе может быть несколько или десятки служб поддержки клиентов 10086. Вам никогда не нужно заботиться о том, какой из них находится на другом конце телефона, как он называется, мужчина или женщина Да, красивый или красивый, вам все равно, вас волнует, можно ли профессионально ответить на ваши вопросы, вам просто нужно набрать номер коммутатора 10086, на другом конце телефона всегда будет кто-то чтобы ответить вам, но иногда медленно, а иногда быстро. Затем номер коммутатора 10086, вот что мы называем обратным прокси. Клиенты не знают, кто на самом деле предоставляет услугу.
• Обратный прокси скрывает настоящий сервер, когда мы запрашиваемwww.baidu.comПри звонке, как и при наборе 10086, нас могут обслуживать тысячи серверов, но вы не знаете, какой из них, вам не нужно знать, вам просто нужно знать, кто является обратным прокси-сервером.www.baidu.comЭто наш обратный прокси-сервер, и обратный прокси-сервер поможет нам перенаправить запрос на настоящий сервер. Nginx — это обратный прокси-сервер с очень хорошей производительностью, который используется для балансировки нагрузки.

Балансировка нагрузки и динамическое и статическое разделение

• Балансировка нагрузки — это тип обратного прокси.В бэкенде есть несколько серверов, и nginx распределяет серверы в соответствии с весом, нагрузкой и пропускной способностью, чтобы избежать ожидания и перегрузки.
• Динамическое и статическое разделение - это своего рода обратный прокси.Внутренний сервер разделен на сервер динамических ресурсов и сервер статических ресурсов.nginx будет распределять серверы в соответствии с запросами, различать логику обработки и ускорять ответ.

Разница между файлами cookie, localstroage и sessiontroage

• Файлы cookie подходят для хранения некоторой информации о сеансе:
  1. Размер куки ограничен, около 4k, что не подходит для хранения бизнес-данных, особенно значения с большим объемом данных.
  2. Есть срок годности, и он будет автоматически уничтожен, когда он истечет
  3. Файл cookie будет отправляться с каждым HTTP-запросом, что приводит к потере пропускной способности.
  4. Файл cookie устанавливается вместе с доменом и может использоваться совместно с субдоменами.
  5. Можно сканировать краулером
• localstroage подходит для хранения адресной информации, совместно используемой приложениями и т. д.:
  1. Большой объем хранимых данных, 5M и более
  2. Действует бессрочно
  3. не будет отправлено с HTTP-запросом
  4. Не междоменный, но можно использовать postMessage и iframe для устранения этого эффекта, например:cross-storage
  5. Не могу прочитать в приватном режиме браузера
  6. не может быть прочитан поисковыми роботами
• sessiontroage подходит для хранения состояния просмотра и т. д.:
  1. Большой объем хранимых данных, 5M и более
  2. Действует до закрытия браузера
  3. не будет отправлено с HTTP-запросом
  4. не может быть прочитан поисковыми роботами

Эпилог

ИТ — это Интернет-технология, и работа, которую вы выполняете, во многом связана с сетью.Внешняя часть отвечает за взаимодействие с задней частью (сервером), которая должна проходить через сеть, поэтому очень полезно знать некоторые сети. знание. Далее будут представлены:

• TCP
• HTTP
• HTTPS