Discussion :

[sahya]

Bonjour à tous,

Je suis un jeune développeur bientot diplomé en Bachelier en Informatique de Gestion,
En juin 2022 je dois rendre mon TFE (travail de fin d'étude).
Ce travail est fait en 3 couche:
MySQL,
Back-End : Rest-API Java
Front-End : Angular 11
je pense l'avoir terminé mais j'ai remarqué que j'ai un grop problème de securité... (code, donnée...)
il y a vraiment bcp à dire et à vous montrer. C'est pour cela que je me suis permis de vous faire une petite vidéo de 11mnt plus détaillé.
voila le lien :

Dans l'attente de vos réponse, bien à vous

[dukoid]

bonjour sahya,

c'est la 1ere fois en 10 ans que je vois une question en vidéo, c'est énorme

en tout cas pour un débutant, tu te poses les bonnes questions !

(1)
à partir du moment ou il n'y a pas le mot de passe dans le local storage, niveau sécurité ça va. on peux mettre dans le local par exemple l'email ...

(2)
d'abord il faut distinguer 2 types de ressources :
- (a) les ressources (images, textes....) qui composent le design du site
- (b) les ressources (images, textes, données...) qui appartiennent aux utilisateurs

* pour le (a), pas besoin de sécurité

* pour le (b), il faut bien sur mettre une sécurité


en général, une application Javascript en front communique avec le Back via une API REST + serveur authentification via token JWT
je ne sais pas si c'est le cas pour ton projet.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

                      front angular                                                                                           Back Java
                           [appli angular]                                           [API REST] (GET, POST, PUT, DELETE)  <-------  est relié  ------------>    [Serveur authentification]
                                                                                          les données


utilisateur A           |-- email + pwd ------------------------------------------------------------------------------------------------------------------------------>  vérifie si email +pwd est connu et valide ?
                                                                                                                                                                       si oui, envoi token
    mémorise JWT   < -----------------------------------------------------------------------------------------------------------------------------------------------|  token JWT

           demande  
    accès à une donnée       GET /comments/12     | ------------------------------->   demande au serveur auth  |-- JWT ------------------------------------------->  reçoit JWT 
                                       + token JWT                                    si le token est valide                                                           vérifie si valide, si oui
                                                                                                                 <--------------------------------------------------  EST VALIDE  
                                                                                   est valide ? ok
                                                                              le token correspond à tel utilisateur
                                                                              donc j'envoi le commentaire dont l'ID est 12
                                                                              et qui correspond à l'utilisateur du token                                                      

               <-------------------------------------------------- comment-------- |   envoi données
reçoit le commentaire

c'est sécurisé parceque si tu n'a pas le bon token qui correspond à tel utilisateur
le serveur d'authentification refusera l'accès
le token est obtenu seulement par celui qui le demande avec le bon mot de passe connu que du demandeur

donc même si les liens d'accès à l'api sont visibles dans le javascript , peu importe il faut fournir le bon token !
- le token n'apparait pas dans le code, ni même en local storage
(le token est stocké dans une variable Javascript de l'application. si tu rafraichis la page, elle disparait, faut se reconnecter)
- le mot passe n'apparait pas dans le code, ni même en local storage


(3) autres points


voici comment ne pas à chaque fois re ecrire options dans d*tes fonctions :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
};

@Injectable({
  providedIn: 'root',
})
export class AuthService {

 register(email: string, password: string): Observable<ICurrentUser> {
    return this.http
      .post<Data>(
        `${environment.urlApi}/${environment.pathAuth}/register`,
        { email, password },
        httpOptions                     // appel à httpOptions
      )
}

(4) utilise le fichier environement.yml pour sauvegarder des parametres dit de configuration comme le début d'une url par exemple

/environments/environment.prod.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  urlApi: 'http://jsonplaceholder.typicode.com',

/environments/environment.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  urlApi: 'http://localhost:8001'

utilisation

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { environment } from '../../../environments/environment'; 
...
...
@Injectable({
  providedIn: 'root'
})
export class TodoHttpService {

  private urlApi: string = environment.urlApi; 
  ...
  ...
  getTodo(id: number): Observable<Todo> {              
        return this.http.get<Todo>(`${this.urlApi}/todos/${id}`);
  }

(5)

si tu as d'autres questions, n'hésites pas

[sahya]

Encor merci pour ton retour.
Il y a vais tellement à dire que j'ai trouvé plus simple de faire une viédo.

d'apres tes réponses, j'ai 2-3 truc à changé

Mais j'ai surtout retenu un point. Que Angular fonction bien avec un API-REST, Et c'est cette API-REST qui est la base de la sécurité.
Comme dit plus haut mon application est créé en 3 couches
Mysql
java
et angular..

La couche Java est mon API-REST.
j'ai mis ce code en place pour la sécurité.
Qui oblige de répondre que à mon application Angular à l'adress: "http://localhost:4200"
Est ce suffisant??

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
package com.example.rdc_touristique;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
 
@Configuration
@EnableWebSecurity
public class appConfig extends WebSecurityConfigurerAdapter {
 
    private final static String user = "user";
    private final static String code = "root";
 
    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
 
        auth.inMemoryAuthentication()
                .withUser(user).password(encoder().encode(code))
                .authorities("ROLE_USER");
 
    }
 
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and().csrf().disable()
                .authorizeRequests()
                .anyRequest().permitAll()
                .and()
                .httpBasic();
    }
 
    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.addAllowedOrigin("http://localhost:4200");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addExposedHeader("Authorization");
        return request -> corsConfiguration;
    }
 
    @Bean
    public PasswordEncoder encoder(){
        return new BCryptPasswordEncoder();
    }
}

[krakatoa]

je ne connais pas java
l api doit être sécurisé par jwt

[sahya]

Un grand merci