DEV Community

Jordan Finneran
Jordan Finneran

Posted on • Edited on • Originally published at jordanfinners.dev

What permissions does your website need?

Contents

  1. Intro
  2. Feature Policy
  3. Permissions Policy
  4. Summary

Intro

Continuing on from my previous blog about website security week, we're going to talk about Features and Permissions for websites.

These are set as headers on your site when it is served up.

Feature Policy

The feature policy was introduced several years ago and allows you to limit the web features that your website and anything embedded including iframes can use.

This helps protect your users from anything running that shouldn't be and accessing any web features that you didn't intend.

Here are some of the most important features to enable/disable:

  • accelerometer
  • camera
  • geolocation
  • gyroscope
  • magnetometer
  • microphone
  • payment
  • usb

The full list can be found on Modzilla.

Example Usage:

feature-policy: accelerometer 'none'; camera 'none'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; payment 'none'; usb 'none'
Enter fullscreen mode Exit fullscreen mode

The allowed values are:

  • * - allows the feature in all top level sites and embedded content
  • self - allows the feature in all top level sites and embedded content, but not cross origin documents in nested contexts
  • <origin> - allows the feature for a specific origin, in this case you'd replace <origin> with the origin you'd like to use
  • none - disables the feature

Permissions Policy

The features policy has been superseded by the better named Permissions Policy. I would still recommend setting both to support older browsers.

It supports the same features as the Features Policy but with a slightly different syntax.

In features policy it would look like:

feature-policy: accelerometer 'none'; camera 'self'; geolocation 'self' https://google.com
Enter fullscreen mode Exit fullscreen mode

which translates to:

permissions-policy: accelerometer=(), camera=(self), geolocation=(self "https://google.com")
Enter fullscreen mode Exit fullscreen mode

Really simple to convert from the old policy and a slightly nicer syntax too!

Summary

In summary, it's really easy to set two additional headers to help improve the security of your site. Denying permission to unused features limits the risk to your users and the possibilities if there is a breach of any untoward web features being used.

Set those headers now!

Happy Building!

Top comments (0)