Programmersdiary blog: a short day

Hi. This is the twenty-seventh part of the diary about developing the “Programmers’ diary” blog. Previous part: https://hashnode.programmersdiary.com/implementing-password-reset-functionality-in-spring. The open source code of this project is on: https://github.com/TheProgrammersDiary. The first diary entry explains why this project was done: https://medium.com/@vievaldas/developing-a-website-with-microservices-part-1-the-idea-fe6e0a7a96b5.

Next entry:

—————

2024-01-29

Let’s improve security. Logs are excellent for debugging microservices however if everything is logged and an attacker gets access to the logs we application is doomed.

Currently the logs store lots of data. Let’s hide the body and headers in request and response so we don’t leak confidential data (e.g. CSRF token) if logs are compromised.

Let’s add a flag for masking log data:

post:
  frontend-url: "<https://localhost:3000>"
  http-masking-turned-on: true

If there is a need to see the masked data in logs for debugging the flag can be switched off.

In HTTPLoggingFilter, let’s assign the flag to a field:

@Value("${post.http-masking-turned-on}")
private boolean isHttpMaskingOn;

When simply modify the body:

requestNode.put("body", isHttpMaskingOn ? "[hidden]" : requestBody);

and headers:

.put(headerName, isHttpMaskingOn ? "[hidden]": response.getHeader(headerName));

Similar config in blog microservice is needed.

When user logs in and creates a post, you will see it’s CSRF token is hidden:

The security of software is improved.

Let’s solve another issue:

If FE can’t not contact post microservice to retrieve posts, it will show Next.js error.

I asked chatGPT to refactor the FE:

const [requestStatus, setRequestStatus] = useState(
    <div className="flex items-center justify-center">
      <p className="text-blue-500">Loading</p>
    </div>
  );
useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(postUrl + "/posts", { method: "GET", next: { revalidate: 10 } });
        if (!response.ok) {
          const text = await response.text();
          throw new Error(text);
        }

        const data = await response.json();

        setArticles(
          data.map((article) => (
            <Link key={article.id} href={"/post/" + article.id} className="block p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
              <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{article.title}</h5>
              <p className="font-normal text-gray-700 dark:text-gray-400">{article.author}</p>
            </Link>
          ))
        );
      } catch (error) {
        setRequestStatus(
          <div className="flex items-center justify-center">
            <p className="text-red-500">{"Error fetching data: " + error.message}</p>
          </div>
        );
      }
    };

    fetchData();
  }, []);

// other code

<ul className="list-none">{articles}</ul>
{requestStatus}

After this change instead of seeing Next.js error in developer console we get this:

And this:

With these security improvements let’s finish this short day.

—————

Thanks for reading.

The project logged in this diary is open source, so if you would like to code or suggest changes, please visit https://github.com/TheProgrammersDiary.

Next part is coming soon.