Firefox 74,为安全赋予更多价值

Firefox 74已于今日发布。新版本最重要的新增功能体现在安全性方面的增强:特征策略(feature policy)、Cross-Origin-Resource-Policy标头及取消了对TLS 1.0 / 1.1的支持。我们还提供了一些新的CSS文本属性功能、可选JS链接运算符和其他2D画布文本测量功能,以及海量DevTools增强功能和错误修复功能。请照例阅读重点内容或从以下文章中找到所有新增内容的完整列表:

安全性增强

让我们了解一下74版本在安全性上的增强。

特征策略(Feature Policy)

最终版中Feature Policy(功能策略)默认开启。您现在可以使用<iframe> allow属性和Feature-PolicyHTTP标头为顶级文档和iframe设置功能权限。语法示例如下:

<iframe src="https://example.com" allow="fullscreen"></iframe>
Feature-Policy: microphone 'none'; geolocation 'none'

CORP

我们还提供对Cross-Origin-Resource-Policy(CORP)标头的支持,允许站点和应用程序选择拒绝某些跨域请求(例如来自<script><img>元素的请求)。这有助于减少潜在的旁路攻击(例如Spectre和Meltdown)以及跨站点脚本包含攻击。

选项包括same-originsame-sitesame-origin仅允许同一方案、主机和端口的请求读取相关资源。除网络默认的同源策略外,它还提供了更多级别的保护。same-site仅允许来自同一站点的请求。

若要使用CORP,则必须将标头设置为下列值之一,例如:

Cross-Origin-Resource-Policy: same-site

移除TLS 1.0 / 1.1

最后还有一点(但并非不重要),Firefox 74取消了对TLS 1.0 / 1.1的支持,以帮助提高Web平台的总体安全级别。这对于推动TLS生态系统向前发展以及消除由TLS 1.0 / 1.1造成的许多漏洞至关重要,TLS 1.0 / 1.1并没有我们想像的那样健壮,急需隐退。

Mozilla、Google、Microsoft和Apple于2018年10月首次共同倡议对其进行修改。如今到了2020年3月,我们都兑现了诺言(Apple除外,Apple将稍晚些时候做出更改)。

其结果是要确保您的Web服务器支持TLS 1.2或1.3以上。请阅读有关移除TLS 1.0和1.1的更新说明,以了解如何测试和更新TLS/SSL配置。从现在开始,连接到使用旧版本TLS的服务器时,Firefox将返回安全连接失败(Secure Connection Failed)错误。如果尚未升级,请立即升级

因所连接服务器使用TLS 1.0或1.1而出现安全连接失败错误

注意:在未来几个发布周期(对于Firefox的延长支持版本来说,发布周期会更长),安全连接失败(Secure Connection Failed)错误页面将包含一个覆盖按钮,允许您在未升级服务器的情况下启用TLS 1.0和1.1支持,但千万不要长期依赖于这个功能。

要了解更多有关移除TLS 1.0/1.1及背景信息,请阅读TLS 1.0和TLS 1.1的剔除

其他Web平台附加功能

74版本还为您提供了许多其他web平台附加功能。

新增CSS文本功能

首先,text-underline-position属性默认情况下处于开启状态。这对于在某些场合设置文本下划线位置,以实现特定的印刷效果非常有用。

例如,如果您的文本处于水平书写模式(writing-mode),则可以用text-underline-position: under;将下划线放置在所有字母的下伸部分之下,这对于经常用到下标的化学公式和数学公式来说,确保与之混排文字的可读性非常有用。

.horizontal {
  text-underline-position: under;
}

对于垂直writing-mode书写模式的文本,可以根据需要使用left值或right值,使下划线显示在文本的左侧或右侧。

.vertical {
  writing-mode: vertical-rl;
  text-underline-position: left;
}

此外,text-underline-offsettext-decoration-thickness属性现在可以指定百分比值,例如:

text-decoration-thickness:10%;

对于这些属性,是指当前字体大小1em的百分比。

JavaScript可选链

如今,我们有JavaScript可选链操作符 (?.)。在尝试访问链中的深层对象时,操作符允许对链中较高层级的对象是否存在进行隐式测试,从而避免出现错误,而且不必显式编写测试代码。

let nestedProp = obj.first?.second;

新增2D画布文本测量功能

TextMetrics该接口(使用CanvasRenderingContext2D.measureText()方法获得)经过扩展新增四个测量实际边界框的属性 —actualBoundingBoxLeftactualBoundingBoxRightactualBoundingBoxAscent,及actualBoundingBoxDescent

例如:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const text = ctx.measureText('Hello world');

text.width;                    // 56.08333206176758
text.actualBoundingBoxAscent;  // 8
text.actualBoundingBoxDescent; // 0
text.actualBoundingBoxLeft;    // 0
text.actualBoundingBoxRight;   // 55.733333333333334

DevTools插件

接下来展示DevTools插件。

类似设备渲染的响应设计模式(Responsive Design Mode)

重新推出附带GeckoViewFirefox for Android运行速度更快,而且更加注重隐私,与此同时,DevTools也要保持领先。在启用响应设计模式(Responsive Design Mode)的台式机和启动远程调试(Remote Debugging)的设备上使用时,都应尽可能使移动设备上的测试平顺进行。

对于响应设计模式来说正确性很重要,因此开发人员即使手边没有设备也可以充分信任输出结果。在以往的发行版中,我们推出的重大改进可以确保正确地将元数据视口应用于触屏模拟(Touch Simulation)。这与改进的设备预设一致,即为移动设备自动启用触屏模拟(Touch Simulation)。

gif动画显示了响应设计模式现在如何更好地展示视图图元设置

有趣的事实:该团队成功实现了精确模拟,精度非常之高,以至在这一过程中还帮助找到并修复了Android设备上的Firefox渲染错误。

DevTools提示:不使用DevTools,而通过工具菜单或Windows上的Ctrl + Shift + M / macOS上的Ctrl + Shift + M打开响应设计模式。

在RDM中试运行网站,或在您的Android手机上使用Firefox Nightly for Developers,我们很想听听您的切身体验。

适用于您的CSS工具

Page Inspector(页面检查器)针对无效CSS规则提供全新的上下文告警,这种做法得到了很多积极的反馈。此功能在教会您CSS规则复杂的相互依存关系的同时,还可以帮助您解决难缠的CSS问题。

自发布以来,我们不断根据用户的反馈进行调整并添加规则。74版本的一大亮点是其新的检测设置,当属性取决于元素定位时会发出警告,即z-indextopleftbottomright

Firefox Page Inspector现在可以提示定位相关的属性无效,例如z-index和top

您的反馈将有助于进一步完善和充实规则。在Mozilla Matrix实例上的DevTools chat聊天工具中向团队打一声招呼,或通过@FirefoxDevTools关注我们的工作。

Nested Workers的调试

在以往的几个版本中,Firefox的JavaScript调试器团队一直致力于优化Web Workers,使之更易于检查和调试。利用工作进程将待处理工作移出主线程,采用这样做法的开发人员和框架越多,浏览器就越容易确定因用户输入操作而触发的运行代码的优先级。

嵌套的Web工作进程允许工作进程产生并控制其工作进程实例,现可以显示在调试器中:

Firefox JavaScript调试器现可显示嵌套工作进程

完善React DevTools集成工作

React Developer Tools插件是为数众多与Firefox DevTools紧密集成的开发人员插件之一。借助WebExtensions API ,开发人员可以为所有源自相同代码库的浏览器创建和发布插件。

在与React插件维护程序的协作过程中,我们成功地重新启用并改进了插件的上下文菜单,包括Go to definition。该操作使开发人员可以直接从React组件跳转到调试器中的源文件。跳转到Inspector中其他元素的功能也已经启用。我们希望进一步扩展此框架,使框架工作流程能与其它工具无缝集成。

Developer Edition(开发人员版)中DevTools功能抢先体验

Developer Edition是Firefox的预发布渠道,可以抢先体验各种工具和平台功能。该版本的默认设置中还为开发人员开启了更多的功能。我们喜欢将新功能快速引入到Developer Edition,以便收集反馈信息,重点包括以下内容。

控制台表达式即时评估

利用即时评估探索JavaScript对象、函数和DOM,如同变魔术一样。只要Web控制台中键入的表达式没有不当之处,就会一边键入,一边预览到结果,使您可以比以前更快地识别和修复错误。

调试器及控制台异步堆栈跟踪

现代JavaScript代码在很大程度上取决于在其他异步操作(如事件承诺,以及 超时)之上堆叠async/await。由于与JavaScript引擎集成得好,现已可以捕捉到异步执行过程,以提供更完整的画面。

调试器中的异步调用堆栈使您可以单步调试事件、超时以及依照时间执行的基于承诺的函数调用。控制台的异步堆栈使查找错误的根本原因变得更为容易。

Firefox JavaScript调试器显示出异步调用堆栈

先睹为快服务工作进程调试

该功能已在Nightly版中存在了一段时间,不久您也会拥有这一功能,为此我们将非常高兴。期望在Firefox 76版中领略到它的风采,即4周以后发布的Developer Edition(开发人员版)

This post is also available in: 繁體中文 (繁体中文) English (英语) Español (西班牙语)

About Chris Mills

Chris Mills is a senior tech writer at Mozilla, where he writes docs and demos about open web apps, HTML/CSS/JavaScript, A11y, WebAssembly, and more. He loves tinkering around with web technologies, and gives occasional tech talks at conferences and universities. He used to work for Opera and W3C, and enjoys playing heavy metal drums and drinking good beer. He lives near Manchester, UK, with his good lady and three beautiful children.

More articles by Chris Mills…