Ensuring that our application is secure is one of the most important things we must do as developers. One of the ways to protect our application from…
Ensuring that our application is secure is one of the most important things we must do as developers. One of the ways to protect our application from well-known vulnerabilities is to set appropriate response headers. There are quite a lot of different security-related response headers to consider. Fortunately, the helmet library can set them for us. Helmet maintains a set of various response headers that aim to make applications more secure. When we look at their changelog, we can see that the maintainers keep the list of headers up to date by adding new ones and deprecating headers that are no longer necessary. In this article, we learn how to use the helmet library with NestJS and its advantages. Using the Helmet library with NestJS To use Helmet with NestJS, we first need to install it.npm install helmetWe can now use it in our bootstrap function. main.ts import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; import helmet from 'helmet'; async function bootstrap() { const app = await NestFactory.create(AppModule); app.use(helmet()); await app.listen(3000); } bootstrap();Now, when we make a request to our API, we can see that it responds with various new headers. Let’s go through them. Content-Security-Policy When a cross-site scripting (XSS) attack occurs, the attacker injects malicious code into our application. This often involves JavaScript code that can harm our users, for example, by stealing their cookies. The person carrying out the XSS attack takes advantage of the browser’s inability to distinguish between a script that is part of our application and one that the attacker adds. By setting up a Content-Security-Policy header, we can specify what resources the browser can load and execute and avoid the others.Content-Security-Policy: script-src 'self';For example, script-src 'self' tells the browser not to load any scripts from origins different than the opened page. It also prevents all inline scripts and inline event handlers from running. If you want to know more about origins and Cross-Origin Resource Sharing (CORS), check out API with NestJS #117. CORS – Cross-Origin Resource Sharing. There are many other rules besides script-src that Helmet sets by default, such as:default-src 'self'; base-uri 'self'; font-src 'self' https: data:; form-action 'self'; frame-ancestors 'self'; img-src 'self' data:; object-src 'none'; script-src 'self'; script-src-attr 'none'; style-src 'self' https: 'unsafe-inline'; upgrade-insecure-requests;If you want to know more about them, read the article that covers the Content-Security-Policy in depth: Fighting cross-site-scripting (XSS) with content security policy. Cross-Origin-Opener-Policy In modern web development, websites often interact with resources from multiple origins. While this is a useful feature, it also opens up security risks. For example, one website can open another using the window.open function. The newly opened website can then access the window object of the website that opened it through the window.opener property. Thanks to Helmet setting the Cross-Origin-Opener-Policy header to same-origin, we isolate the browsing context. Then, the window.opener property is not available if both websites don’t have the same origin. Cross-Origin-Resource-Policy When a website requests resources from a different origin, it is considered a cross-origin request. Browsers implement a same-origin policy to restrict such requests. The same-origin policy allows a website to access data from another page only if both have the same origin. We can alter this behavior through Cross-Origin Resource Sharing. However, the same-origin policy does not prevent the browser from embedding resources from other origins. For example, it can display images using the tag or play media using