Како омогућити ЦОРС помоћу ХТТПОнли колачића за безбедни токен?

У овом чланку видимо како да омогућимо ЦОРС (Унакрсно дељење ресурса) са ХТТПОнли колачићем да бисмо обезбедили наше токене за приступ.

Данас су бацкенд сервери и фронтенд клијенти распоређени на различитим доменима. Због тога сервер мора да омогући ЦОРС да омогући клијентима да комуницирају са сервером у претраживачима.

Такође, сервери имплементирају аутентификацију без стања ради боље скалабилности. Токени се чувају и одржавају на страни клијента, али не на страни сервера као на сесији. Ради безбедности, боље је чувати токене у ХТТПОнли колачићима.

Преглед садржаја

Зашто су захтеви за више порекла блокирани?

Претпоставимо да је наша фронтенд апликација постављена на хттпс://апп.вдзвдз.цом. Скрипта учитана на хттпс://апп.вдзвдз.цом може захтевати само ресурсе истог порекла.

Кад год покушамо да пошаљемо захтев за унакрсно порекло на други домен хттпс://апи.вдзвдз.цом или други порт хттпс://апп.вдзвдз.цом:3000 или другу шему хттп://апп.вдзвдз.цом, Захтев за више порекла ће бити блокиран од стране претраживача.

  13 пијаца за ангажовање стручњака за СЕО и напредовање у конкуренцији

Али зашто се исти захтев који је блокирао прегледач шаље са било ког позадинског сервера користећи цурл захтев или шаље помоћу алата као што је поштар без икаквих ЦОРС проблема. То је заправо за сигурност да заштити кориснике од напада као што је ЦСРФ (Цросс-Сите Рекуест Форгери).

Узмимо пример, претпоставимо да се било који корисник пријавио на свој ПаиПал налог у свом претраживачу. Ако можемо да пошаљемо захтев за више порекла на паипал.цом из скрипте учитане на другом домену малициоус.цом без ЦОРС грешке/блокирања, као да шаљемо захтев истог порекла.

Нападачи могу лако да пошаљу своју злонамерну страницу хттпс://малициоус.цом/трансфер-монеи-то-аттацкер-аццоунт-фром-усер-паипал-аццоунт тако што ће је конвертовати у кратки УРЛ да би сакрили стварни УРЛ. Када корисник кликне на злонамерну везу, скрипта учитана у домен малициоус.цом ће послати захтев за више порекла ПаиПал-у да пренесе кориснички износ на нападачки ПаиПал налог ће се извршити. Сви корисници који су се пријавили на свој ПаиПал налог и кликнули на ову злонамерну везу изгубиће свој новац. Свако може лако украсти новац без знања корисника ПаиПал налога.

Из горе наведеног разлога, претраживачи блокирају све захтеве за више порекла.

Шта је ЦОРС (унакрсно дељење ресурса)?

ЦОРС је сигурносни механизам заснован на заглављу који сервер користи да каже претраживачу да пошаље захтев за више порекла са поузданих домена.
Сервер са омогућеним ЦОРС заглављима који се користе да би се избегли захтеви са више извора које су блокирали прегледачи.

Како ради ЦОРС?

Пошто је сервер већ дефинисао свој поуздани домен у својој ЦОРС конфигурацији. Када пошаљемо захтев серверу, одговор ће рећи претраживачу да ли је тражени домен поуздан или не у његовом заглављу.

Постоје две врсте ЦОРС захтева:

  • Једноставан захтев
  • Префлигхт Рекуест

Једноставан захтев:

  • Прегледач шаље захтев на домен вишег порекла са пореклом (хттпс://апп.вдзвдз.цом).
  • Сервер шаље назад одговарајући одговор са дозвољеним методама и дозвољеним пореклом.
  • Након што прими захтев, прегледач ће проверити да ли су послата вредност заглавља порекла (хттпс://апп.вдзвдз.цом) и примљена вредност за контролу приступа (хттпс://апп.вдзвдз.цом) исте или џокер

. У супротном, избациће ЦОРС грешку.

  • Захтев пре лета:
  • У зависности од прилагођеног параметра захтева из захтева са више извора као што су методе (ПУТ, ДЕЛЕТЕ) или прилагођена заглавља или различити типови садржаја, итд. Прегледач ће одлучити да пошаље захтев ОПТИОНС пре објављивања да провери да ли је стварни захтев безбедан за слање или не.

Након што добије одговор (код статуса: 204, што значи да нема садржаја), претраживач ће проверити параметре контроле приступа за стварни захтев. Ако су параметри захтева дозвољени од стране сервера. Послат и примљен стварни захтев за више порекла

  Да ли сте се икада запитали шта је 192.168.1.1 ИП?

Ако приступ-цонтрол-аллов-оригин: *, онда је одговор дозвољен за сва порекла. Али није безбедно осим ако вам није потребно.

Како омогућити ЦОРС?

Да бисте омогућили ЦОРС за било који домен, омогућите ЦОРС заглавља да бисте омогућили порекло, методе, прилагођена заглавља, акредитиве итд.

  • Претраживач чита ЦОРС заглавље са сервера и дозвољава стварне захтеве од клијента тек након провере параметара захтева.
  • Аццесс-Цонтрол-Аллов-Оригин: Да бисте навели тачне домене (хттпс://апп.геекфлате.цом, хттпс://лаб.вдзвдз.цом) или џокер
  • Аццесс-Цонтрол-Аллов-Метходс: Да дозволимо ХТТП методе (ГЕТ, ПОСТ, ПУТ, ДЕЛЕТЕ, ПАТЦХ, ХЕАД, ОПТИОНС) које су само нама потребне.
  • Аццесс-Цонтрол-Аллов-Хеадерс: Да дозволите само одређена заглавља (Овлашћење, цсрф-токен)
  • Аццесс-Цонтрол-Аллов-Цредентиалс: Боолеан вредност која се користи за омогућавање акредитива са више извора (колачићи, заглавље ауторизације).

Аццесс-Цонтрол-Мак-Аге: Каже прегледачу да кешира одговор пре прегледа неко време.

Аццесс-Цонтрол-Екпосе-Хеадерс: Одредите заглавља која су доступна скрипти на страни клијента.

Да бисте омогућили ЦОРС у апацхе и Нгинк веб серверу, пратите овај водич.

const express = require('express');
const app = express()

app.get('/users', function (req, res, next) {
  res.json({msg: 'user get'})
});

app.post('/users', function (req, res, next) {
    res.json({msg: 'user create'})
});

app.put('/users', function (req, res, next) {
    res.json({msg: 'User update'})
});

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

Омогућавање ЦОРС-а у ЕкпрессЈС-у

Узмимо пример ЕкпрессЈС апликације без ЦОРС-а:

npm install cors

У горњем примеру, омогућили смо крајњу тачку АПИ-ја корисницима за методе ПОСТ, ПУТ, ГЕТ, али не и метод ДЕЛЕТЕ.

За једноставно омогућавање ЦОРС-а у апликацији ЕкпрессЈС, можете инсталирати цорс

app.use(cors({
    origin: '*'
}));

Аццесс-Цонтрол-Аллов-Оригин

app.use(cors({
    origin: 'https://app.techblog.co.rs.com'
}));

Омогућавање ЦОРС-а за све домене

app.use(cors({
    origin: [
        'https://app.geekflare.com',
        'https://lab.geekflare.com'
    ]
}));

Омогућавање ЦОРС-а за један домен

Ако желите да дозволите ЦОРС за порекло хттпс://апп.вдзвдз.цом и хттпс://лаб.вдзвдз.цом

app.use(cors({
    origin: [
        'https://app.geekflare.com',
        'https://lab.geekflare.com'
    ],
    methods: ['GET', 'PUT', 'POST']
}));

Аццесс-Цонтрол-Аллов-Метходс

Да бисте омогућили ЦОРС за све методе, изоставите ову опцију у ЦОРС модулу у ЕкпрессЈС-у. Али за омогућавање одређених метода (ГЕТ, ПОСТ, ПУТ).

app.use(cors({
    origin: [
        'https://app.geekflare.com',
        'https://lab.geekflare.com'
    ],
    methods: ['GET', 'PUT', 'POST'],
    allowedHeaders: ['Content-Type', 'Authorization', 'x-csrf-token']
}));

Аццесс-Цонтрол-Аллов-Хеадерс

Користи се за омогућавање слања заглавља осим подразумеваних са стварним захтевима.

app.use(cors({
    origin: [
        'https://app.geekflare.com',
        'https://lab.geekflare.com'
    ],
    methods: ['GET', 'PUT', 'POST'],
    allowedHeaders: ['Content-Type', 'Authorization', 'x-csrf-token'],
    credentials: true
}));

Аццесс-Цонтрол-Аллов-Цредентиалс

Изоставите ово ако не желите да кажете претраживачу да дозволи акредитиве на захтев чак и ако је витхЦредентиалс подешено на труе.

app.use(cors({
    origin: [
        'https://app.geekflare.com',
        'https://lab.geekflare.com'
    ],
    methods: ['GET', 'PUT', 'POST'],
    allowedHeaders: ['Content-Type', 'Authorization', 'x-csrf-token'],
    credentials: true,
    maxAge: 600 
}));

Аццесс-Цонтрол-Мак-Аге

Да бисте подстакнули прегледач да кешира информације о одговору пре летења у кеш меморију током одређене секунде. Изоставите ово ако не желите да кеширате одговор.

app.use(cors({
    origin: [
        'https://app.geekflare.com',
        'https://lab.geekflare.com'
    ],
    methods: ['GET', 'PUT', 'POST'],
    allowedHeaders: ['Content-Type', 'Authorization', 'x-csrf-token'],
    credentials: true,
    maxAge: 600,
    exposedHeaders: ['Content-Range', 'X-Content-Range']
}));

Кеширани одговор пре објављивања биће доступан 10 минута у прегледачу.

app.use(cors({
    origin: [
        'https://app.geekflare.com',
        'https://lab.geekflare.com'
    ],
    methods: ['GET', 'PUT', 'POST'],
    allowedHeaders: ['Content-Type', 'Authorization', 'x-csrf-token'],
    credentials: true,
    maxAge: 600,
    exposedHeaders: ['*', 'Authorization', ]
}));

Аццесс-Цонтрол-Екпосе-Хеадерс

  Како постати ОСЦП [Full Guide]

Ако ставимо џокер знак

у екпоседХеадерс, неће открити заглавље ауторизације. Дакле, морамо експлицитно да изложимо као испод

Горе наведено ће открити сва заглавља и заглавље ауторизације.

  • Шта је ХТТП колачић?
  • Колачић је мали део података који ће сервер послати претраживачу клијента. На каснијим захтевима, прегледач ће послати све колачиће који се односе на исти домен на сваки захтев.
  • Колачић има свој атрибут, који се може дефинисати да би колачић радио другачије како нам је потребно.
  • Име Назив колачића.
  • вредност: подаци колачића који се односе на име колачића
  • Домен: колачићи ће бити послати само на дефинисани домен
  • Путања: колачићи се шаљу само након дефинисане путање префикса УРЛ адресе. Претпоставимо да смо дефинисали нашу путању колачића као патх=’админ/’. Колачићи нису послати за УРЛ хттпс://вдзвдз.цом/екпире/, али се шаљу са УРЛ префиксом хттпс://вдзвдз.цом/админ/
  • Мак-Аге/Екпирес (број у секунди): Када колачић треба да истекне. Животни век колачића чини колачић неважећим након наведеног времена. [Strict, Lax, None]ХТТПОнли (Боолеан): Позадински сервер може да приступи том ХТТПОнли колачићу, али не и скрипти на страни клијента када је тачно. Безбедни (боолеан): Колачићи се шаљу само преко ССЛ/ТЛС домена када је тачно.самеСите(стринг

): Користи се за омогућавање/ограничавање колачића који се шаљу на захтеве за више локација. За више детаља о колачићима самеСите погледајте

МДН

. Прихвата три опције Строго, Лаксно, Ништа. Безбедна вредност колачића постављена на тачно за конфигурацију колачића самеСите=Ништа.

Зашто ХТТПОнли колачић за токене?

Чување приступног токена послатог са сервера у складишту на страни клијента, као што је локална меморија, индексирани ДБ и колачић (ХТТПОнли није подешен на тачно) рањивије су на КССС напад. Претпоставимо да је било која од ваших страница слаба на КССС напад. Нападачи могу да злоупотребе корисничке токене ускладиштене у претраживачу.

ХТТПОнли колачићи се постављају/добијају само од стране сервера/позадина, али не и на страни клијента.

  • Скрипта на страни клијента је ограничена на приступ том колачићу само за ХТТП. Дакле, ХТТПОнли колачићи нису рањиви на КССС нападе и сигурнији су. Зато што је доступан само серверу.
  • Омогући ХТТПОнли колачић у позадинској мрежи са омогућеном ЦОРС
  • За омогућавање колачића у ЦОРС-у потребна је следећа конфигурација у апликацији/серверу.
  • Подесите заглавље Аццесс-Цонтрол-Аллов-Цредентиалс на тачно.

Аццесс-Цонтрол-Аллов-Оригин и Аццесс-Цонтрол-Аллов-Хеадерс не би требало да буду џокер

const express = require('express'); 
const app = express();
const cors = require('cors');

app.use(cors({ 
  origin: [ 
    'https://app.geekflare.com', 
    'https://lab.geekflare.com' 
  ], 
  methods: ['GET', 'PUT', 'POST'], 
  allowedHeaders: ['Content-Type', 'Authorization', 'x-csrf-token'], 
  credentials: true, 
  maxAge: 600, 
  exposedHeaders: ['*', 'Authorization' ] 
}));

app.post('/login', function (req, res, next) { 
  res.cookie('access_token', access_token, {
    expires: new Date(Date.now() + (3600 * 1000 * 24 * 180 * 1)), //second min hour days year
    secure: true, // set to true if your using https or samesite is none
    httpOnly: true, // backend only
    sameSite: 'none' // set to none for cross-request
  });

  res.json({ msg: 'Login Successfully', access_token });
});

app.listen(80, function () { 
  console.log('CORS-enabled web server listening on port 80') 
}); 

.

Атрибут самеСите колачића треба да буде Ноне.

Да бисте омогућили вредност самеСите на ништа, подесите безбедну вредност на труе: Омогућите позадину са ССЛ/ТЛС сертификатом да ради у имену домена.

Погледајмо пример кода који поставља токен за приступ у ХТТПОнли колачић након провере акредитива за пријаву.

Можете да конфигуришете ЦОРС и ХТТПОнли колачиће применом горња четири корака у свом позадинском језику и веб серверу.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.techblog.co.rs.com/user', true);
xhr.withCredentials = true;
xhr.send(null);

Можете пратити овај водич за апацхе и Нгинк за омогућавање ЦОРС-а тако што ћете пратити горе наведене кораке.

fetch('http://api.techblog.co.rs.com/user', {
  credentials: 'include'
});

витхЦредентиалс за Цросс-Оригин захтев

$.ajax({
   url: 'http://api.techblog.co.rs.com/user',
   xhrFields: {
      withCredentials: true
   }
});

Акредитиви (колачић, ауторизација) се подразумевано шаљу са захтевом истог порекла. За унакрсно порекло, морамо да наведемо витхЦредентиалс на труе.

axios.defaults.withCredentials = true

КСМЛХттпРекуест АПИ

Дохвати АПИ

ЈКуери АјакАкиосЗакључак Надам се да ће вам горњи чланак помоћи да разумете како ЦОРС функционише и омогући ЦОРС за захтеве са више извора на серверу. Зашто је чување колачића у ХТТПОнли-у безбедно и како се витхЦредентиалс користе у клијентима за захтеве из више извора.