OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

It is necessary to send the JWT token from the browser page to the server

  • Thread starter Thread starter PavelPavlik
  • Start date Start date
P

PavelPavlik

Guest
When I send a GET request to retrieve the page in Postman along with the authorization header, I see the following in the console logs:

Code:
    2024-06-26 17:33:53.036  INFO 6856 --- [nio-8080-exec-3] u.d.P.security.JWTTokenConfig                    : Filter starts
    2024-06-26 17:33:53.037  INFO 6856 --- [nio-8080-exec-3] u.d.P.security.JWTTokenConfig                    : Jwt Token: Bearer         eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxIiwicm9sZXMiOlsiUk9MRV9BRE1JTiJdLCJleHAiOjE3MTk0MTE4MDYsImlhdCI6MTcx        OTQwODgwNn0.YOdWUsdkTl4E4ucZ1gjk8sAYKaBMxrsVET5m6rnRXEg
    2024-06-26 17:33:53.037  INFO 6856 --- [nio-8080-exec-3] u.d.P.security.JWTTokenConfig                    : Received JWT token:         eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxIiwicm9sZXMiOlsiUk9MRV9BRE1JTiJdLCJleHAiOjE3MTk0MTE4MDYsImlhdCI6MTcx        OTQwODgwNn0.YOdWUsdkTl4E4ucZ1gjk8sAYKaBMxrsVET5m6rnRXEg

That is, my configuration filter is called once and receives the token. But when I refresh the page in the browser, here is its HTML code:

Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Admin Office Page</title>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    </head>
    <body>
    <h1>Welcome to Admin Office</h1>
    <script>
     function getCookie(name) {
      let cookieArr = document.cookie.split(";");

      for(let i = 0; i < cookieArr.length; i++) {
        let cookiePair = cookieArr[i].split("=");

        if(name == cookiePair[0].trim()) {
          return decodeURIComponent(cookiePair[1]);
        }
      }

      return null;
    }
    let jwtToken = getCookie("JWT_TOKEN");
    console.log('token '+jwtToken);


    fetch('/admin_office', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + jwtToken
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.text();
    })
    .then(data => {
        console.log('Server response:',jwtToken );
    })
    .catch(error => {
        console.error('Error sending token to server:', error);
    });
    </script>
    </body>
    </html>

I see the following in the logs:

Code:
    2024-06-26 17:40:50.160  INFO 6856 --- [nio-8080-exec-5] u.d.P.security.JWTTokenConfig                    : Filter starts
    2024-06-26 17:40:50.162  INFO 6856 --- [nio-8080-exec-5] u.d.P.security.JWTTokenConfig                    : Jwt Token: null
    2024-06-26 17:40:50.195  INFO 6856 --- [nio-8080-exec-6] u.d.P.security.JWTTokenConfig                    : Filter starts
    2024-06-26 17:40:50.195  INFO 6856 --- [nio-8080-exec-6] u.d.P.security.JWTTokenConfig                    : Jwt Token: Bearer         eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxIiwicm9sZXMiOlsiUk9MRV9BRE1JTiJdLCJleHAiOjE3MTk0MTUwODYsImlhdCI6MT        cxOTQxMjA4Nn0.Uwgj-5TuQnFtRxOQBnSVkIiBzTv4hg9swbAXHRX7dec
    2024-06-26 17:40:50.196  INFO 6856 --- [nio-8080-exec-6] u.d.P.security.JWTTokenConfig                    : Received JWT token:         eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxIiwicm9sZXMiOlsiUk9MRV9BRE1JTiJdLCJleHAiOjE3MTk0MTUwODYsImlhdCI6MT        cxOTQxMjA4Nn0.Uwgj-5TuQnFtRxOQBnSVkIiBzTv4hg9swbAXHRX7dec
    2024-06-26 17:40:50.201  INFO 6856 --- [nio-8080-exec-6]         u.d.PetMusicStorage.service.JWTService   : Parsed roles from token: [ROLE_ADMIN]
    2024-06-26 17:40:50.201  INFO 6856 --- [nio-8080-exec-7] u.d.P.security.JWTTokenConfig                    : Filter starts
    2024-06-26 17:40:50.202  INFO 6856 --- [nio-8080-exec-7] u.d.P.security.JWTTokenConfig            : Jwt Token: null
    2024-06-26 17:40:50.203  INFO 6856 --- [nio-8080-exec-6] u.d.P.security.JWTTokenConfig                    : User 1 with roles [ROLE_ADMIN]

My configuration filter is called three times, and the JWT token is obtained on the second call. When I make this endpoint protected, the filter is called only once, but the token is not obtained, and I get a 403 error on the frontend. I think the reason is that the request from the frontend first fetches the entire HTML file from the server and then sends the script request. I haven't delved deeply into JavaScript and HTML yet, so if possible, please explain or, if possible, write the code where the token is immediately sent from the frontend to the server. That is, first the frontend sends the token, and if it is valid, it opens the page. If not, a 403 error is returned.

Everything works on the backend! Access to protected endpoints with a valid token is available.

<p>When I send a GET request to retrieve the page in Postman along with the authorization header, I see the following in the console logs:</p>
<pre><code> 2024-06-26 17:33:53.036 INFO 6856 --- [nio-8080-exec-3] u.d.P.security.JWTTokenConfig : Filter starts
2024-06-26 17:33:53.037 INFO 6856 --- [nio-8080-exec-3] u.d.P.security.JWTTokenConfig : Jwt Token: Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxIiwicm9sZXMiOlsiUk9MRV9BRE1JTiJdLCJleHAiOjE3MTk0MTE4MDYsImlhdCI6MTcx OTQwODgwNn0.YOdWUsdkTl4E4ucZ1gjk8sAYKaBMxrsVET5m6rnRXEg
2024-06-26 17:33:53.037 INFO 6856 --- [nio-8080-exec-3] u.d.P.security.JWTTokenConfig : Received JWT token: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxIiwicm9sZXMiOlsiUk9MRV9BRE1JTiJdLCJleHAiOjE3MTk0MTE4MDYsImlhdCI6MTcx OTQwODgwNn0.YOdWUsdkTl4E4ucZ1gjk8sAYKaBMxrsVET5m6rnRXEg
</code></pre>
<p>That is, my configuration filter is called once and receives the token. But when I refresh the page in the browser, here is its HTML code:</p>
<pre><code> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Office Page</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>Welcome to Admin Office</h1>
<script>
function getCookie(name) {
let cookieArr = document.cookie.split(";");

for(let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr.split("=");

if(name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}

return null;
}
let jwtToken = getCookie("JWT_TOKEN");
console.log('token '+jwtToken);


fetch('/admin_office', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + jwtToken
}
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(data => {
console.log('Server response:',jwtToken );
})
.catch(error => {
console.error('Error sending token to server:', error);
});
</script>
</body>
</html>
</code></pre>
<p>I see the following in the logs:</p>
<pre><code> 2024-06-26 17:40:50.160 INFO 6856 --- [nio-8080-exec-5] u.d.P.security.JWTTokenConfig : Filter starts
2024-06-26 17:40:50.162 INFO 6856 --- [nio-8080-exec-5] u.d.P.security.JWTTokenConfig : Jwt Token: null
2024-06-26 17:40:50.195 INFO 6856 --- [nio-8080-exec-6] u.d.P.security.JWTTokenConfig : Filter starts
2024-06-26 17:40:50.195 INFO 6856 --- [nio-8080-exec-6] u.d.P.security.JWTTokenConfig : Jwt Token: Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxIiwicm9sZXMiOlsiUk9MRV9BRE1JTiJdLCJleHAiOjE3MTk0MTUwODYsImlhdCI6MT cxOTQxMjA4Nn0.Uwgj-5TuQnFtRxOQBnSVkIiBzTv4hg9swbAXHRX7dec
2024-06-26 17:40:50.196 INFO 6856 --- [nio-8080-exec-6] u.d.P.security.JWTTokenConfig : Received JWT token: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxIiwicm9sZXMiOlsiUk9MRV9BRE1JTiJdLCJleHAiOjE3MTk0MTUwODYsImlhdCI6MT cxOTQxMjA4Nn0.Uwgj-5TuQnFtRxOQBnSVkIiBzTv4hg9swbAXHRX7dec
2024-06-26 17:40:50.201 INFO 6856 --- [nio-8080-exec-6] u.d.PetMusicStorage.service.JWTService : Parsed roles from token: [ROLE_ADMIN]
2024-06-26 17:40:50.201 INFO 6856 --- [nio-8080-exec-7] u.d.P.security.JWTTokenConfig : Filter starts
2024-06-26 17:40:50.202 INFO 6856 --- [nio-8080-exec-7] u.d.P.security.JWTTokenConfig : Jwt Token: null
2024-06-26 17:40:50.203 INFO 6856 --- [nio-8080-exec-6] u.d.P.security.JWTTokenConfig : User 1 with roles [ROLE_ADMIN]
</code></pre>
<p>My configuration filter is called three times, and the JWT token is obtained on the second call. When I make this endpoint protected, the filter is called only once, but the token is not obtained, and I get a 403 error on the frontend. I think the reason is that the request from the frontend first fetches the entire HTML file from the server and then sends the script request. I haven't delved deeply into JavaScript and HTML yet, so if possible, please explain or, if possible, write the code where the token is immediately sent from the frontend to the server. That is, first the frontend sends the token, and if it is valid, it opens the page. If not, a 403 error is returned.</p>
<p>Everything works on the backend! Access to protected endpoints with a valid token is available.</p>
 

Latest posts

Top