Skip to main content

HTTP Header: Feature Policy

The attack​

Web browsers have lots of different features, from vibration to fullscreen to microphone access. While some of these can be useful, you may not wish to use all of them, and you may not want any third-party scripts you include to use them either.

The header​

The Feature-Policy header tells browsers which features you can use. For example, if you want to disable notifications for everyone and allow payments from example.com, you could send a header like this:

Feature-Policy: notifications 'none'; payments example.com

List of Features​

Not all the browsers have a full support, but most of them have a partial support

Policy Controlled Features​

Posible values​

  • *: The feature is allowed in top-level browsing contexts and in nested browsing contexts (iframes).
  • 'self': The feature is allowed in top-level browsing contexts and same-origin nested browsing contexts. It is disallowed in cross-origin documents in nested browsing contexts.
  • 'none': The feature is disallowed in top-level browsing contexts and disallowed in nested browsing contexts.
  • <origin(s)>: specific origins to enable the policy for (e.g. https://example.com).

The code​

Helmet’s featurePolicy middleware lets you restrict which browser features can be used. For example, you can disable fullscreen or vibration APIs.

const helmet = require('helmet')

app.use(
  helmet.featurePolicy({
    features: {
      fullscreen: ["'self'"],
      vibrate: ["'none'"],
      payment: ['example.com'],
      syncXhr: ["'none'"]
    }
  })
)

Refs:​