React/Django REST - stan aplikacji (logowanie)

0

Hej. Mam sobie aplikację napisaną w django, którą staram się przerobić, żeby działała razem z Reactem (backend Django REST, frontend react). Chciałem się zapytać bardziej doświadczonych programistów o dobre praktyki w zakresie logowania, przechowywania stanu aplikacji jeśli chodzi uwierzytelnianie użytkowników. Strona główna ma wyświetlać tablicę wyników przyporządkowaną do poszczególnych użytkowników. Jeśli użytkownik nie będzie zalogowany, ma nastąpić przejście do strony logowania. Analogicznie po zalogowaniu ma nastąpić przejście do strony głównej i wyświetlenie listy wyników. Poniżej kod który napisałem z prośbą o wytknięcie błędów (ewentualnie wskazanie, że moje rozwiązanie jest poprawne). Klucz logowania przechowuję w localstorage.
Strona główna:

import React, { Component } from "react";
import axios from "axios";
import SiteTable from './SitesTable';
import { Redirect } from 'react-router-dom';

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      sites: [], 
      username: localStorage.getItem('username') ? (localStorage.getItem('username')) : (''), 
      token: localStorage.getItem('token') ? (localStorage.getItem('token')) : ('')};
  }

  componentDidMount() {
    if (this.state.username) {
      axios.get("http://127.0.0.1:8000/api/sites/", {
        headers: {
          Authorization: `Token ${this.state.token}`
        }
      }).then(res => {
        this.setState({
          sites: res.data
        });
      });
    } else {
      console.log('Something went wrong')
    }
  }

  handleLogout = () => {
    localStorage.clear()
    this.setState({username: ''})
  }

  render() {
    if (!this.state.username) {
      return (
        <Redirect to='/login' />
      )
    }
    return (
      <div className="containter">
        <SiteTable sites={this.state.sites} />
        <button type="submit" onClick={this.handleLogout}>Logout</button>
      </div>
    );
  }
}

export default Home;

Strona logowania:

import React, { Component } from 'react';
import axios from 'axios';
import { Redirect } from 'react-router-dom';

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            username: "", 
            password: "", 
            isAuthenticated: false};
    }

    componentDidUpdate() {
        console.log(this.state)
    }

    handleChange(e, param) {
        e.preventDefault()
        this.setState({[param]: e.target.value})
    }

    handleSubmit = (e) => {
        e.preventDefault()
        axios.post('http://127.0.0.1:8000/rest-auth/login/', {
            username: this.state.username,
            password: this.state.password
          })
          .then(response => {
            const token = response.data.key;
            localStorage.setItem('username', this.state.username)
            localStorage.setItem('token', token)
            this.setState({isAuthenticated: true})
          })
          .catch(error => {
            console.log(error.response.statusText);
            alert('Please fill correct credentials')
            this.setState({username: "", password: ""})
          });
        console.log('Submitted')
    }

    render() {
        if (this.state.isAuthenticated) {
            return <Redirect to={{pathname: '/'}} />
        }
        return (
            <div className="container">
                <form onSubmit={this.handleSubmit}>
                    <input type="text" placeholder="Enter username" value={this.state.username} onChange={(e) => this.handleChange(e, 'username')}/>
                    <input type="password" placeholder="Enter password" value={this.state.password} onChange={(e) => this.handleChange(e, 'password')}/>
                    <button type="submit">Submit</button>
                </form>
            </div>
        )
    }
}

export default Login

Z góry dziękuję za wszelkie rady.

0

Nie bardzo widzę jaka jest relacja pomiędzy tymi dwoma komponentami, brakuje kodu który spaja to w całość. Z tego co wkleiłeś najbardziej się rzuca w oczy że token przechowujesz jako stan komponentu, jest to kompletnie nie potrzebna duplikacja danych już trzymanych w localstorage. W stanie komponentu powinieneś przechowywać jedynie rzeczy które wpływają na wygląd komponentu i się zmieniają, token zawsze możesz brać z localstorage.

0
neves napisał(a):

Nie bardzo widzę jaka jest relacja pomiędzy tymi dwoma komponentami, brakuje kodu który spaja to w całość. Z tego co wkleiłeś najbardziej się rzuca w oczy że token przechowujesz jako stan komponentu, jest to kompletnie nie potrzebna duplikacja danych już trzymanych w localstorage. W stanie komponentu powinieneś przechowywać jedynie rzeczy które wpływają na wygląd komponentu i się zmieniają, token zawsze możesz brać z localstorage.

Brzmi logicznie;) Faktycznie chyba nie muszę trzymać tego w state . Czy teraz jest lepiej (zmieniłem tylko component Home )?

import React, { Component } from "react";
import axios from "axios";
import SiteTable from './SitesTable';
import { Redirect } from 'react-router-dom';

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sites: [],
    }
  }
  componentDidMount() {
    if (localStorage.getItem('token')) {
      axios.get("http://127.0.0.1:8000/api/sites/", {
        headers: {
          Authorization: `Token ${localStorage.getItem('token')}`
        }
      }).then(res => {
        this.setState({
          sites: res.data
        });
      });
    } else {
      console.log('Something went wrong')
    }
  }

  handleLogout = () => {
    localStorage.clear()
  }

  render() {
    if (!localStorage.getItem('token')) {
      return (
        <Redirect to='/login' />
      )
    }
    return (
      <div className="containter">
        <p>You are logged as {localStorage.getItem('username')}</p>
        <SiteTable sites={this.state.sites} />
        <button type="submit" onClick={this.handleLogout}>Logout</button>
      </div>
    );
  }
}

export default Home;

Korzystając z okazji zapytam od razu o samo localStorage . Czy zapisywanie danych logowania w ten sposób jest bezpieczne? Na co tutaj ewentualnie trzeba uważać?

0

LocalStorage w ogóle nie jest bezpieczne, tzn. bezpieczeństwo ogranicza się do tego, że dla każdej domeny masz osobny localStorage czyli jak strona X ustawi tam coś, to strony Y nie widzi tego wpisu. Nie powinno się jednak używać localStorage do przechowywania wrażliwych danych dotyczących sesji, ponieważ można je w dosyć łatwy sposób zaatakować.

Sesje albo trzymasz na serwerze albo używasz ciasteczek z flagą HttpOnly. Flaga HttpOnly wpływa na bezpieczeństwo w ten sposób, że blokuje próby odczytu cookie z tą flagą przez API inne niż HTTP. Oznacza to, że np. JavaScript nie może odczytać takiego cookie. Czyli atakujący nie da rady odczytać ciasteczka z flagą HttpOnly posługując się atakiem XSS.

0
Haskell napisał(a):

LocalStorage w ogóle nie jest bezpieczne, tzn. bezpieczeństwo ogranicza się do tego, że dla każdej domeny masz osobny localStorage czyli jak strona X ustawi tam coś, to strony Y nie widzi tego wpisu. Nie powinno się jednak używać localStorage do przechowywania wrażliwych danych dotyczących sesji, ponieważ można je w dosyć łatwy sposób zaatakować.

W jaki łatwy sposób można zaatakować localStorage? jeśli masz na myśli XSS, to jak strona jest podatna na XSS to bez różnicy czy trzymasz w localStorage czy ciasteczku httpOnly i tak atakujący będzie mógł zrobić co zechce. Jak napastnik może wstrzyknąć dowolny kod to nic nie jest bezpieczne, dlatego należy dołożyć wszelki starań żeby strona nie była podatna na XSS, z Reactem jest o tyle fajnie że pozwala ustawić bardzo restrykcyjne CSP (nie to co Angular), blokujące wszelkie inlinowane rzeczy, evaly.

Haskell napisał(a):

Czyli atakujący nie da rady odczytać ciasteczka z flagą HttpOnly posługując się atakiem XSS.

Atakujący nie potrzebuje odczytać ciasteczka, wystarczy że wstrzyknie kod js wysyłający żądanie http, a ciasteczko zostanie dołączone automatycznie więc ciasteczko pada tak samo jak localStorage.

0

Piszesz o XST? O ile wiem przeglądarki obecnie zapobiegają przed TRACE requestem wykonanym w JS.

Generalnie ja nie trzymałbym tokena w localStorage, przedstawiłem swój punkt widzenia i argumenty powyżej. Z podatnością localStorage na ataki chodziło mi o to, że z pomocą XSS odczytasz go za pomocą JS, z kolei ciasteczka HttpOnly nie odczytasz za pomocą JS.

0

Trochę poczytałem w necie i już totalnie zgłupiałem. Głosy są podzielone. Jedni używają localStorage do przechowywania wrażliwych danych, inni odradzają. Tak się zastanawiam jak w praktyce mógłby wyglądać taki atak przechwytujący token logowania. Przecież localStorage zapisuje dane na urządzeniu użytkownika. Czy xss jest faktycznie realny do zastosowania na aplikacjach pisanych z zastosowaniem podstawowych zasad bezpieczeństwa. Chociażby większość frameworków czy to frontendowych czy backendowych ma zaimplementowane zabezpieczenia zapobiegające tego typu atakom. Jeśli sami nie napiszemy spartaczonego kodu to ciężko mi sobie wyobrazić sytuację, że ktoś faktycznie przechwyci dane zapisane w localStorage... Z chęcią poczytam więcej opinii na ten temat...;)

1 użytkowników online, w tym zalogowanych: 0, gości: 1