Opens an external site in a new window
Mental Health Awareness Month
“Community”
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links
  • Profile
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links

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

blurry low resolution placeholder image Deno Fresh Middleware
  1. Home Rodney Lab Home
  2. Blog Posts Rodney Lab Blog Posts
  3. Deno Deno Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Deno Fresh Middleware: HTTP Security Headers 🔐 #

Published: 3 years ago
4 minute read
Gunning Fog Index: 6.7
Content by Rodney
blurry low resolution placeholder image Author Image: Rodney from Rodney Lab
SHARE:

🔐 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?
Voting reveals latest results.

🖥 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.

blurry low resolution placeholder image ask Rodney X (formerly Twitter) avatar

Rodney

@askRodney

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.

#learndenohttps://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, @[email protected]  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.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

blurry low resolution placeholder image Rodney from Rodney Lab
TAGS:
DENO

Likes:

Likes

  • Ryan Arpe profile avatar
  • MarcelloP profile avatar
  • Nenad Kostic  profile avatar
  • Raul Nohea Goodness profile avatar
Likes provided by Mastodon & X via Webmentions.

Related Posts

blurry low resolution placeholder image Astro Server-Side Rendering: Edge Search Site

Astro Server-Side Rendering: Edge Search Site

plus
astro
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Ask for more

1 Nov 2022 — Astro Server-Side Rendering: Edge Search Site
3 Oct 2022 — Svelte eCommerce Site: SvelteKit Snipcart Storefront
1 Sept 2022 — Get Started with SvelteKit Headless WordPress

Copyright © 2020 – 2025 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

  • Home
  • Profile
  • Plus +
  • Newsletter
  • Contact
  • Links
  • Terms of Use
  • Privacy Policy
We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.