Как вставить API token в http заголовок?

Question

[masb]

Изучаю Django/Django rest framework, но вопрос наверно по JS.
Есть страница localhost/login/ где пользователь вводит логин-пароль, бэкэнд возвращает token.
Пользователь идет на localhost/api/23/ который доступен только авторизованному пользователю, что проверяется по заголовку Authentication в http запросе. Так вот как вставить полученный token в заголовок? Нужно для этого JS на стороне клиента? Как сохранить token у клиента для последующих запросов?

Answer 1

[Valeron Sergeev]

полученный токен можешь сохранять в localStorage и в заголовки пихать типа

// localStorage.setItem("token", "Ваш токен");
let token = localStorage.getItem("token");
$.ajax
({
  type: "GET",
  url: "localhost/api/23/",
  headers: {
    "Authorization": "Basic " + token
  },
  success: function (){
    alert('Success'); 
  }
});

Comments

[Шохрух Шаймардонов]

Valeron Sergeev, согласен с логикой в целом, но вот с токеном(если он приватный) в localStorage надо подумать. Мб в куки его?

[masb]

Не очень понимаю как это работает. Откуда и когда исполняется данный код. После localhost/login/ пусть пользователь просто увидит "Success", после чего он сам в адресную строку введет localhost/api/23/.

[Valeron Sergeev]

Шохрух Шаймардонов, возможно да, в куку лучше

[Алексей]

Добавлять токен в куку с флагом httOnly со стороны бэкенда в ответе, никаких localStorage

[Yustas Alexu]

Алексей, что это даст в плане безопасности?

[planc]

masb, django rest просто отдает данные

Откуда и когда исполняется данный код.

у пользователя есть отдельный клиент ( другой сайт с использованием js / мобильное приложение / нативное приложение на компе )
клиент делает запросы к rest api и представляет их в удобном виде для пользователя

[Valeron Sergeev]

masb,
при переходе localhost/login/ если все ок, получаем токен, и сохраняем его, в текущем примере я привел localStorage, далее дергать его и подставлять в запрос, но вот при ручном переходе на localhost/api/23/ запрос формируется самим браузером, тут уже никак не подправишь заголовки (да и по сути в сам браузер он ничего и не должен отдавать) его можно подставить при формировании скажем запроса на бекенде, или как в моем примере, в аякс

[Алексей]

Yustas Alexu, то, что js на стороне клиента не будет иметь доступ к токену, это не спасет полностью, но значительно усложнит задачу его кражи

[Yustas Alexu]

Алексей, какой тогда толк от этой куки? Токен должен передаваться в хедере Authorization а не через куки. И вообще:
"Безопасные" (secure) cookie отсылаются на сервер только если запрос выполняется по протоколу SSL и HTTPS. Однако важные данные никогда не следует передавать или хранить в cookies, поскольку сам их механизм весьма уязвим в отношении безопасности, а флаг secure никакого дополнительного шифрования или средств защиты не обеспечивает. Начиная с Chrome 52 и Firefox 52, незащищенные сайты (http:) не могут создавать куки с флагом secure.

[masb]

Valeron Sergeev, тоесть пользователь идет на localhost/api/23/, бэкэнд генерирукт html+ajax, ajax у клиента берет токен пихает его в заголовок и отправляет опять на localhost/api/23/, и бэкэнд уже возвращает данные, что за этим апи?

[Valeron Sergeev]

masb, пользователь сам не должен ходить на localhost/api/23/

[Valeron Sergeev]

masb, вот смотри, у тебя скажем есть апи на localhost, по сути туда должен бегать твой клиент, как человек выше описал, это может быть другой сайт с использованием js / мобильное приложение / нативное приложение на компе, может даже другой бекенд,

и вот на примере что у тебя есть другой сайт, простая страничка html+js, где js бегает к API localhost/login, получает токен и сохраняет его (на данный момент без разницы куда) и после уже с этим токеном, мы не будем повторно авторизовываться, а уже получать данные из localhost/api/23/

и вот другой пример, у нас есть другой бекенд, который запрашивает логин и пароль, по курлу или что там будет на бекенде не важно, идет к localhost/login получает токен и сохраняет его (сейчас тоже не важно где именно), и идет к localhost/api/23/ где получает данные, и отдает готовую страницу пользователю в том виде который тебе нужен

[masb]

Valeron Sergeev, Я понимаю случай когда клиент

другой сайт с использованием js / мобильное приложение / нативное приложение на компе, может даже другой бекенд,

, но вот не понимаю случай когда клиент это человек обращающийся к localhost/api/23/ вводя адресную строку в браузере.

[Valeron Sergeev]

masb, по сути, пользователь туда сам и не должен переходить, а если и перейдет выбьет что-то вроде 403, Ошибка авторизации, ну вот при переходе туда что он должен увидеть то?

[masb]

Valeron Sergeev, допустим просто получить текст в json формате

[Valeron Sergeev]

masb, возможно и увидит в json формате сообщение об ошибке авторизации, ты пойми еще раз, при переходе куда либо из браузера, браузер формирует заголовки запроса, ты туда не подставишь ничего

[masb]

Valeron Sergeev, значит если я хочу дать доступ к ресурсу и по АПИ и через браузер, то нужно иметь два пути например localhost/api/23/ и localhost/23/, при этом делать две разные аутенфикации?

[Valeron Sergeev]

masb, вообще, я не понимаю зачем вообще что-то так показывать, а так, если прям хочется что-то в браузере видеть лучше просто другой способ авторизации придумать, как пример токен через гет передавать, localhost/api/23/ - ошибка авторизации
localhost/api/23/?token=TOKEN - показывать какие-либо данные

Answer 2

[Владимир Коротенко]

Храните токен в куках, localStorage это проходной двор, кто хочет тот и пишет и читает.
https://www.rdegges.com/2018/please-stop-using-loc...

Comments

[masb]

У меня пока проблема не как хранить, а как передавать.

[Владимир Коротенко]

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

https://api.jquery.com/jQuery.ajaxSetup/

https://github.com/axios/axios#interceptors