Firefox 60 is here, and the Quantum lineage continues apace. The parallel processing prowess of Quantum CSS is now available on Firefox for Android, and work continues on WebRender, which modernizes the whole idea of what it means to draw a web page. But we’re not just spreading the love on internals. Firefox 60 boasts a number of web platform and developer-facing improvements as well. Here are a few highlights:

ES Modules are Here!

Modular code isn’t just a good idea, it’s the law it’s a great idea! Being able to separate functional units of software allows for cleaner re-use of individual modules and easier inclusion of third-party code. Many languages have support for modules, and if you’re familiar with Node.JS, they’ve been available in some form with the CommonJS require API, but a standardized syntax was created as part of ES2015 (ES6).

Although the syntax for ES modules was standardized, it was left as an exercise for browsers to understand and retrieve the modules. This took a bit of extra time, but now that the browser loading behavior is standardized, support has started rolling out, and this release brings that support to Spidermonkey, Firefox’s JavaScript engine. You can check out the docs on MDN, and of course don’t miss Lin Clark’s breakdown of ES modules either!

Keep Your Cookies to Yourself

Firefox 60 supports the Same-Site attribute when setting cookies. When set, the browser will not send cookies along with a cross-origin request to the issuing server, e.g. during fetch or loading an image. This helps mitigate against common silent forms of Cross-Origin Request Forgery. There is a “lax” mode that does the above, as well as a strict mode that, in addition to the lax behavior, will also not send cookies with an in-bound navigation. This helps prevent a malicious site deep-linking to a page where unintentional behavior could occur when cookies are included.

Read more on the Mozilla Security Blog.

Web Authentication API

It’s been known for a while now that in many contexts, a well-known username (like an email address) and a user-generated password are not sufficiently secure for authentication. This has led to the rise of Multi-Factor Authentication, usually 2-factor authentication, in which in addition to a password, users must also provide information from an additional source. Many sites will send an SMS message with a code to a mobile device, and some also accept tokens generated by a code-generator app or purpose-built hardware “key”. This whole exchange has required the user to copy numbers from a screen into a text field, or at minimum the hardware key has had to simulate key presses.

The Web Authentication API (WebAuthn for short) seeks to eliminate the clunkier aspects of this process by letting a multi-factor authentication device or app communicate directly with a requesting site. The particulars of making this work securely are a bit too complex to cover in this post, but you can learn more about WebAuthn on MDN or here on the Hacks Blog.

A Stroke of Style

The (as-of-yet non-standard) text-stroke property defines a solid fixed-width stroke centered along the path of the characters of text. It allows for effects that aren’t achievable with text-shadow alone. A wide stroke will occlude portions of the characters because by default, the stroke is drawn over top of the font glyph. This can be a bit ugly. To fix this, browsers are borrowing paint-order property from the SVG standard. When properly set, browsers will draw the stroke underneath the text glyphs. For example:

It’s super nifty- but don’t forget that it’s not yet a standard, and you should always check that text is legible without stroke effects applied! You can read more on MDN and check out the compatibility matrix there.

ESR / Group Policy

Firefox 60 is the next version of Firefox to be designated an “Extended Support Release”, or ESR. ESR releases are intended for system administrators who deploy and maintain desktop environments in large organizations. They receive security and stability updates in sync with the latest Release versions of Firefox, and each ESR release’s support overlaps with the next one. This overlap period allows a large organization to certify and deploy new ESR versions before leaving the support window for the prior release.

Firefox 60 ships along with the first incarnation of a new Policy Engine that allows organizational adminstrators to configure Firefox for all their users en masse. On Windows, this is accomplished using Windows Group Policy, and via a configuration file on other platforms. It’s not a feature that most Firefox users will ever need, but if your job is managing thousands of installations of Firefox, we hope you’ll find this a welcome addition.

Would You Like to Know More?

As always, the full list of developer-facing changes is on MDN, and you can find the release notes here.

Keep on rocking the free web!