Skip to content

X-DNS-Prefetch-Control ​

The X-DNS-Prefetch-Control middleware sets the X-DNS-Prefetch-Control header to control DNS prefetching, which can improve performance but may have privacy implications.

Quick Start ​

js
import { Hoa } from 'hoa'
import { xDnsPrefetchControl } from '@hoajs/secure-headers'

const app = new Hoa()

// Disable DNS prefetching (default)
app.use(xDnsPrefetchControl())

app.use(async (ctx) => {
  ctx.res.body = 'Hello, Hoa!'
})

export default app

Options ​

OptionTypeDefaultDescription
allowbooleanfalseIf true, enables DNS prefetching. If false, disables it.

Examples ​

Disable DNS Prefetching (Default) ​

js
// Sets: X-DNS-Prefetch-Control: off
app.use(xDnsPrefetchControl())

// Or explicitly
app.use(xDnsPrefetchControl({ allow: false }))

Enable DNS Prefetching ​

js
// Sets: X-DNS-Prefetch-Control: on
app.use(xDnsPrefetchControl({ allow: true }))

Behavior Details ​

  • DNS Prefetching: Browsers can prefetch DNS lookups for links on the page to reduce latency when users click on them.

  • Performance: Enabling DNS prefetching can improve perceived performance by reducing the time it takes to navigate to linked pages.

  • Privacy: DNS prefetching can leak information about which links are on a page, even if the user doesn't click them. This can be a privacy concern.

  • Default Off: By default, this middleware disables DNS prefetching for better privacy.

What is DNS Prefetching? ​

DNS prefetching is when browsers proactively perform DNS lookups for links on the page before the user clicks them. This can:

  • Improve performance: Reduce latency when navigating to linked pages
  • Privacy concerns: Leak information about page content to DNS servers
  • Increase traffic: Generate additional DNS queries

Common Use Cases ​

Privacy-Focused Applications (Default) ​

js
// Disable DNS prefetching for better privacy
app.use(xDnsPrefetchControl({ allow: false }))

Performance-Focused Public Websites ​

js
// Enable DNS prefetching for better performance
app.use(xDnsPrefetchControl({ allow: true }))

Conditional Configuration ​

js
const isPublicSite = process.env.SITE_TYPE === 'public'

app.use(xDnsPrefetchControl({ 
  allow: isPublicSite 
}))

Important Notes ​

  • Privacy vs Performance: Disabling DNS prefetching improves privacy but may slightly reduce performance.

  • HTTPS: DNS prefetching is automatically disabled for HTTPS pages in some browsers for security reasons.

  • User Control: Users can also control DNS prefetching through browser settings.

  • Default Disabled: This header is set to off by default in the main secureHeaders() middleware.

Legacy Alias ​

This middleware can also be accessed as dnsPrefetchControl:

js
import { dnsPrefetchControl } from '@hoajs/secure-headers'

app.use(dnsPrefetchControl({ allow: false }))

Manual Control in HTML ​

You can also control DNS prefetching per-link in HTML:

html
<!-- Force DNS prefetch for a specific link -->
<link rel="dns-prefetch" href="https://example.com">

<!-- Disable DNS prefetch for a specific link -->
<a href="https://example.com" rel="noreferrer">Link</a>