Feature Policy

Written by Ulises Gascón

Apr 08, 2020 — 2 min read

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: