In my previous blog, Spring Boot HttpOnly Cookie Example, I demonstrated how to use the HttpOnly flag to protect your cookie. Since an HttpOnly cookie cannot be managed on the front-end, here is a demonstration on how to manage it via the back-end. For this example we'll just expire the cookie when the user clicks a button. Shouldn't be tricky so let's get right to it.
Demonstration
Before we begin, these are the tools I used to make this example:
- IntelliJ IDEA 2023.3.4 (Community Edition)
- openjdk-17.0.10
- Spring Boot v3.4.1
- Windows 11
The example code is here, github.com/jpllosa/httponly-cookie/tree/manage-httponly. Grab a copy of this branch or if you have done the Spring Boot HttpOnly Cookie Example, you can make updates to the code as you wish.
Code Changes
A couple of changes to the code. First, the endpoint to hit that then tells the browser to expire the cookie. Second, an update on the UI to trigger the cookie deletion.
LoginController.java
... code snipped ...
import org.springframework.web.bind.annotation.*;
@Controller
public class LoginController {
... code snipped ...
@GetMapping("/clear-my-session")
public @ResponseBody String clearMySession(HttpServletResponse response) {
Cookie cookie = new Cookie("MY_SESSION", "deleted");
cookie.setHttpOnly(true);
cookie.setMaxAge(0);
response.addCookie(cookie);
return "";
}
}
The /clear-my-session resource simply responds by setting the MaxAge of the cookie to zero for it to be deleted on the browser. In some other languages, in Go for example, you'll have to set the MaxAge to -1 to expire the cookie. So please read the API documentation if you're wondering why MaxAge zero doesn't work. Since we are just running on our local machhine, we don't provide the Path and Domain. When not running on your local machine, most likely you'll need to supply a Path (e.g. "/") and a Domain (e.g. example.com) to make things work.
welcome.html
... code snipped ...
<body>
... code snipped ...
<button id="clearMySession">JS Clear MY_SESSION</button>
<button id="beClearMySession">BE Clear MY_SESSION</button>
</body>
<script th:inline="javascript">
$(document).ready(function() {
$("#clearMySession").on("click", function() {
console.log("JS removing MY_SESSION");
document.cookie = "MY_SESSION=; expires=Thu, 01-Jan-70 00:00:01 GMT;";
});
$("#beClearMySession").on("click", function() {
console.log("BE removing MY_SESSION");
$.get("/clear-my-session", function() {
console.log("MY_SESSION removed");
});
});
});
</script>
</html>
Here, we added a button that hits the endpoint we created above. Simples.
Ready, Set, Go
Run the Spring Boot app. Go to the login page. Just type any username and password. You should have something like below. Open Web Tools and head over to the Storage tab (it could be called a different name on a different browser). Take note of the cookie named MY_SESSION.
As you already know from the previous blog, clicking on "JS Clear MY_SESSION" (JS for JavaScript) will not do anything. Now, try clicking on "BE Clear MY_SESSION", BE for back-end :). The MY_SESSION cookie disappears right before our eyes and you should have something like below. You can also check the network and console tabs to see what's happening behind the scenes.
Managing HttpOnly Cookie Wrap Up
There you have it. A nice way of managing your cookie from the back-end. Having the HttpOnly flag set prevents thrid parties from accessing your very important cookie. Now, it's only the back-end that can manipulate it. Thank you for reading.
No comments:
Post a Comment