Does Deno deploy have Edge Functions or Middleware?

Deno deploy is an Edge hosting service which deploys your Deno apps instantly. Because it already likes on the edge, you can add your middleware in your app. As an example, Deno Fresh supports this intrinsically, with no need to create a separate functions folder for your host or anything of that nature. You can use the middleware to update security headers or page HTML body. On top you might want to check for an authorisation cookie and redirect the visitor to the log page, it they are not yet logged in.

How do you add middleware in Deno Fresh?

Middleware runs just before a user request hits the destination server endpoint. In effect it intercepts the request. In Deno Fresh, you just create a `_middleware.ts` file in the `routes` directory. Add a handler there and Deno Fresh will apply it to all routes on your site. Let's day you have a /newsfeed route on your site that is always changing. If you wanted to add middleware there to set more appropriate caching headers, this is also easy. Just create a routes/newsfeed directory and place a `_middleware.ts` file in there. This middleware file will only apply to the newsfeed route and any child routes you might define.

How can you set HTTP security headers with Deno Fresh?

You can set HTTP header on an API route just by returning a Response object with the headers set within the second parameter. On a page route with a handler where you are already rendering server-side fetched data (with context.render), that context.render call actually returns a Response object. Instead of immediately returning the result, put it into a response variable. Now you can response.headers.set("Header-Name", "header value"') to set the header. Finally, return the modofied header. Of course this works for any HTTP and not just security headers.

Deno Fresh Middleware: HTTP Security Headers 🔐 # Deno Fresh Middleware: HTTP Security Headers 🔐 #

Deno Fresh Middleware: HTTP Security Headers 🔐 #

Published: 2 years ago

4 minute read

Gunning Fog Index: 6.7

Content by Rodney

🔐 Deno Fresh Middleware: Acing HTTP Security Headers #

In this Deno Fresh middleware video, we see just how middleware works in Deno Fresh and how the developer experience is enhanced compared to other platforms. First, we see how you can update HTTP headers on a route-by-route basis. Then, with the preliminaries out of the way, we move on to see what middleware is and how you can use it. We end by using Deno Fresh middleware to add HTTP security headers to all routes from a single location. Finally, testing locally, we run an instant deploy and bask in the glory of our new SecurityHeaders.com A rating!

Anyway, that is enough of an introduction, if you still think you’re in the right place then hit play below on the video! You can drop a comment below or reach out for a chat on Element as well as Twitter @mention if you have suggestions for improvements or questions.

📹 Video #

Please enable JavaScript to watch the video 📼

Deno Fresh Middleware: HTTP Security Headers

🗳 Poll #

How easy does adding HTTP headers in Deno Fresh look compared to other frameworks you already know?

🖥 Deno Fresh Middleware: Code #

routes/_middleware

typescript

    1 import { MiddlewareHandlerContext } from "$fresh/server.ts";
2 
3 export async function handler(
4   _request: Request,
5   context: MiddlewareHandlerContext,
6 ) {
7   const response = await context.next();
8   const { ok } = response;
9 
10   if (ok) {
11     response.headers.set(
12       "Strict-Transport-Security",
13       "max-age=31536000; includeSubDomains; preload",
14     );
15     response.headers.set("X-Frame-Options", "DENY");
16     response.headers.set("X-Content-Type-Options", "nosniff");
17     response.headers.set("Referrer-Policy", "strict-origin-when-cross-origin");
18     response.headers.set(
19       "Permissions-Policy",
20       "accelerometer=(), camera=(), document-domain=(), encrypted-media=(), gyroscope=(), interest-cohort=(), magnetometer=(), microphone=(), midi=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), sync-xhr=(), usb=(), xr-spatial-tracking=(), geolocation=()",
21     );
22   }
23 
24   return response;
25 }

🔗 Links #

Getting Started with Deno Fresh post,
Fresh docs on middleware ,
SecurityHeaders.com ,
Mozilla Observability Security Scanner ,
Element chat: #Rodney matrix chat ,
Twitter handle: @askRodney .

🏁 Deno Fresh Middleware: Summary #

Does Deno deploy have Edge Functions or Middleware? #: Deno deploy is an Edge hosting service which deploys your Deno apps instantly. Because it already likes on the edge, you can add your middleware in your app. As an example, Deno Fresh supports this intrinsically, with no need to create a separate functions folder for your host or anything of that nature. You can use the middleware to update security headers or page HTML body. On top you might want to check for an authorisation cookie and redirect the visitor to the log page, it they are not yet logged in.
How do you add middleware in Deno Fresh? #: Middleware runs just before a user request hits the destination server endpoint. In effect it intercepts the request. In Deno Fresh, you just create a `_middleware.ts` file in the `routes` directory. Add a handler there and Deno Fresh will apply it to all routes on your site. Let's day you have a /newsfeed route on your site that is always changing. If you wanted to add middleware there to set more appropriate caching headers, this is also easy. Just create a routes/newsfeed directory and place a `_middleware.ts` file in there. This middleware file will only apply to the newsfeed route and any child routes you might define.
How can you set HTTP security headers with Deno Fresh? #: You can set HTTP header on an API route just by returning a Response object with the headers set within the second parameter. On a page route with a handler where you are already rendering server-side fetched data (with context.render), that context.render call actually returns a Response object. Instead of immediately returning the result, put it into a response variable. Now you can response.headers.set("Header-Name", "header value"') to set the header. Finally, return the modofied header. Of course this works for any HTTP and not just security headers.

🙏🏽 Feedback #

Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also, if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.

Just dropped a new video on how you can quickly configure the inbuilt route middleware in Deno 🍋 Fresh to add HTTP security headers.

Got security header score up from F to 🏆 A!

Hope you find it useful.

#learndeno https://t.co/VpcPJzjp3V
— Rodney (@askRodney) January 9, 2023

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter, @rodney@toot.community on Mastodon and also the #rodney Element Matrix room. Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as Deno. Also, subscribe to the newsletter to keep up-to-date with our latest projects.