Skip to content
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
February 18, 2020

Protecting UX with Feature Policy

Customer Experience, Front End Development, Open Source and Emerging Technology

Browsers are capable of bridging sensors, Bluetooth, USB, and other hardware to web apps like never before. However, as always in life, great power can be a double-edged sword. Securing access is a particularly sensitive issue for applications that serve 3rd party content – either as scripts, iframes, or user-supplied media files. Even browser extensions can introduce unexpected content to our products.

Emerging security measures in web browsers introduce a mechanism that allows feature availability management. Modern applications use Feature Policy to:

  • Enforce permissions
  • Enforce performance

Embedding 3rd party content opens the door to malicious or otherwise unwanted access to various features like geolocation, camera or Bluetooth access, and even automatic video playback. Feature policies can help control such access.

Some 3rd party scripts use notorious JavaScript features like synchronous document writing and communications with a server. These APIs deteriorate user experience because they block any interaction until complete. Feature policies can also help guardrail performance by denying access to such code. They can also be used to ensure properly optimized images are transferred to the browser, which makes Feature Policies a desirable performance enforcing mechanism.

Think of Feature Policies as a contract between the web product owners and their users that governs the use of browser features or lack thereof. For maximum effectiveness, use Feature Policies in development environments to enforce the contract early on.

Implementing Feature Policy

Feature Policy is Content Security Policy’s (CSP) younger sister. Directives are set in an HTTP header, which gives additional opportunity to set features from the server-side programmatically.

Feature-Policy:
    geolocation 'self';
    camera 'none';
    fullscreen '*'
In this example, we allow geolocation usage to our application only. The camera is strictly forbidden, but fullscreen is allowed to the app and any 3rd party scripts. Unlike CSP, Feature Policies cannot be specified as meta tags to prevent conflicts when resolving policies.

Controlling Iframe Features

Feature Policies can cascade to nested iframes. Developers can also set the allow attribute for more granular iframe control.
<iframe
 src="https://my.ads.com"
 allow="geolocation; document-write">

We can only cherry-pick the allowed features. The disallow attribute does not exist.

Iframe feature policies will inherit settings from the parent document. The more restrictive policy applies. Note that policies propagate to nested iframes in the same restrictive fashion.

Setting Allowed Contexts

Similar to Content Security Policies, each feature respects a list of permitted contexts:

  • * – Allow all
  • self – Allow the current document and all iframes with the same origin (domain)
  • none – Disable the feature altogether
  • Create a space-separated list of origins or domains allowed to access a functionality (e.g. https://example.com) with –
    <origins>

Reading Allowed Features

Using Javascript, developers should check if a feature is permitted before using it. In the following example, we will detect if camera access is allowed before connecting to it.

const isCameraAllowed = document.featurePolicy.allowsFeature('camera');

if (isCameraAllowed) {
 // Attach to the camera
        navigator.mediaDevices
          .getUserMedia({ video: true })
          .then(handleVideo)
          .catch(onError);
}

Here are a few other useful Javascript interfaces for Feature Policies:

  • document.featurePolicy.features() – get the list of all available features in a browser
  • document.featurePolicy.allowedFeatures() – returns an array of all available features for a document
  • document.featurePolicy.getAllowlistForFeature('camera') – get contexts that can access a feature (e.g camera)

Feature Policy Compatibility

It’s still early to capitalize on Feature Policies confidently, but most modern browsers support them in some capacity. Documentation is scarce, so rely on the Javascript methods described above.

You can begin introducing feature policies today. Policies are opt-in, so enable them where it makes sense. It’s best to start with your application context before restricting 3rd party content as some of it may break (especially ad-serving scripts).

Here are a few Feature Policies you could implement now:

  • oversized-images – disallow large images
  • geolocation – control access to user’s location data
  • camera – control camera access
  • document-write – disallow outdated document.write
  • wake-lock – control whether power-saving mode can be disabled
  • autoplay – should media like video play automatically
  • more policies

If your application doesn’t require hardware access, consider disabling access to the camera, microphone, speakers, and even autoplay. Doing so may help protect your users’ privacy and bandwidth.

You can help us in the mission to create a safer and more reliable Web by sharing this article with the people in your network.

Posted in Customer Experience, Front End Development, Open Source and Emerging Technology
Share this

Grgur Grisogono

Grgur Grisogono is a software architect at Modus Create, specializing in JavaScript performance, React JS, and Sencha frameworks. He helped clients ranging from Fortune 100 to major governments and startups successfully release enterprise and consumer-facing web applications. He has also organized three tech conferences and co-authored Ext JS in Action SE. If Grgur's posts were helpful, maybe his 16 years of experience could help your project too.
Follow

Related Posts

  • Business of UX Video
    UXCamp Redux: Business of UX Preso

    I had the pleasure of doing a 'lightning round' version of my Business of UX…

  • Baby Steps to Lean UX
    Baby Steps to Lean UX

    The world of software product development is complex. With so many moving pieces — idea…

Subscribe to the Modus Newsletter

Receive the latest blog articles and insights every month from the Modus team.

Let's Chat

If forms aren’t your thing, you can always call us (+1-855-721-7223).

Modus-Logo-Primary-White.svg
  • Services
  • About
    • Newsroom
  • Partners
  • Work
  • Insights
    • Blog
    • Modus Labs
  • Careers
Virginia (US)

12100 Sunset Hills Road
Suite 150
Reston, Virginia, 20190
Tel: +1-855-721-7223

California (US)
12130 Millennium Dr

Los Angeles, CA 90094

Missouri (US)
609 E High St

Jefferson City, MO 65101

Romania

Str. Mihai Veliciu, no. 17
Cluj-Napoca, Romania
Tel: +40-0786-887-444

Costa Rica

2nd Floor, Plaza Koros, Av 3
San José, Santa Ana, Costa Rica

© 2021 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

This website uses cookies.
These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Accept
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

Scroll To Top