Firefox 74,為安全賦予更多價值

目前Firefox 74已經發布了。這次我們提供最重要的新功能是安全性的提升:特徵策略(Feature Policy),Cross-Origin-Resource-Policy標頭和移除TLS 1.0 / 1.1支援。我們還新增一些新的CSS文本屬性功能,JS鏈接運算符還有其他2D canvas文本度量標準功能,以及大量DevTools增強功能和錯誤修復功能。

本文同樣包含一些重點,你也可以在以下文章中閱讀新增功能的完整列表:

提升安全性

讓我們看看74版本中安全性的改良。

特徵策略(Feature Policy)

我們終於在默認模式中啟用Feature Policy。你現在可以使用<iframe> allow屬性還有Feature-Policy HTTP標頭設定頂級文檔和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僅允許擁有相同scheme,host和port的請求讀取相關資源。這和網絡的默認同源協定相比,提供更高級的保護。same-site僅允許共享同一網站的請求。

可以將標頭依照以下範例運用CORP,例如:

Cross-Origin-Resource-Policy: same-site

移除TLS 1.0 / 1.1

最後,Firefox 74為了提升整體Web平台的安全性,取消支援TLS 1.0 / 1.1。這對於推動TLS生態系統的發展很重要,同時也可以消除TLS 1.0 / 1.1導致的許多漏洞。這項功能沒有像我們希望的那麼有效,它們需要退場了。

2018年10月在Mozilla,Google,Microsoft和Apple的共同倡議下,首次宣布這項變更。2020年3月,我們現在都兌現了我們的諾言(蘋果公司除外,蘋果公司稍後將進行變更)。

結論是你要確保你的Web服務器支持TLS 1.2或1.3。請閱讀移除TLS 1.0 and 1.1更新了解如何測試和更新TLS / SSL配置。現在開始,Firefox將回傳安全連線失敗(Secure Connection Failed)錯誤訊息,你的服務器為較舊的TLS版本。如果你還沒升級的話,請點選立即升級

安全連線失敗錯誤訊息,您使用的服務器為TLS 1.0或1.1版本。(secure connection failed error message, due to connected server using TLS 1.0 or 1.1)

注意:在未來幾個更新週期中(Firefox ESR跟新週期較長), 安全連線失敗(Secure Connection Failed)錯誤頁面將具有一個覆蓋按鈕,允許你在尚未升級服務器時,啟用TLS 1.0和1.1。但是你沒辦法一直用這個方法。

欲了解移除TLS 1.0 / 1.1與其背景的更多訊息,請閱讀
以上是TLS 1.0和TLS 1.1的啟動程序。

其他網路平台功能

在74版本中,我們提供了更多其他功能。

CSS文字新功能

首先,默認模式中會啟用text-underline-position屬性。這項功能在一些情況下很方便,可以在文本中設定底線以達到特定的印刷效果。

舉例來說,如果你的文字模式(writing-mode)是水平的,你可以利用text-underline-position: under;在下標劃底線,這項功能經常運用於科學和數學公式的下標。

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

如果writing-mode是垂直的,則可以利用leftright根據需求讓底線出現在文字的右方或左方。

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

此外,text-underline-offset還有text-decoration-thickness的屬性現在也可以應用於百分比,例如:

text-decoration-thickness: 10%;

以這些屬性來說,這是目前字體大小1em的百分比。

JavaScript中的可選鍵

現在JavaScript中有可選鍵操作符(?.)。當你試著取得鍵中下層的一個物件時,這項特性可以對鏈中較上層的物件的進行測試,除了可以避開錯誤,也不需要編寫測試代碼。

let nestedProp = obj.first?.second;

新的2D Text Metrics

TextMetrics介面(使用CanvasRenderingContext2D.measureText()方法)已擴展為包含四個測量實際邊界框的更多屬性——actualBoundingBoxLeft, actualBoundingBoxRight, actualBoundingBoxAscent, and 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)中類似設備的渲染

Android版Firefox搭載GeckoView變得更快,隱私方面也有所提升,而DevTools也需要與時俱進。在移動裝置上測試應該要盡可能提供順暢的體驗,在桌上型電腦使用 響應式設計模式(Responsive Design Mode),或在個人裝置上使用 遠端偵錯(Remote Debugging)亦同。

正確性對於響應式設計模式很重要,即使開發人員手邊沒有設備對於輸出也可以很有信心。在先前發行的版本中,我們推出了重大改進,並確保正確地將meta viewport應用於觸碰模擬(Touch Simulation)。這關係改良後移動裝置的預設模式,移動裝置會自動啟用觸碰模擬(Touch Simulation)。

GIF動畫顯示響應式設計模式如何更優秀地顯示view meta設置。

有趣的事實:我們的團隊模擬因為太過精確,現在已經幫助偵測並修復Android版Firefox的渲染錯誤。
DevTools建議:若不使用DevTools開啟響應式設計模式,可利用Windows的工具選單或Ctrl + Shift + M或macOS上的Ctrl + Opt + M。

我們期待聽到你們在網頁中使用RDM或是在Android手機使用Firefox Nightly for Developers的反饋。

你也可以上手的CSS工具

Page Inspector針對無效CSS規則新的上下文警告已經得到很多正面的反饋。除了幫助你解決粗糙的CSS問題之外,也同時教你CSS規則的複雜相互依存關係。

自發布以來,我們經常根據用戶反饋持續調整並增加規則。 74的亮點之一就是新的檢測設定。當屬性取決於定位的元素時,該警告設定會提醒您,例如:z-index, top, left, bottom, and right.

 
Firefox Page Inspector現在顯示無效的位置屬性,例如:z-index, top

你的反饋將幫助我們完善規則和進行擴展。你可以在DevTools chat on 或是 Mozilla’s Matrix instance 和我們的團隊打聲招呼。你也可以在@FirefoxDevTools了解我們的近況。

Nested Workers偵錯工具

Firefox的JavaScript Debugger 除錯團隊在過去的幾個版本中一直致力於改善Web Workers,降低偵測與排除錯誤的難易度。使用workers完成主要執行緒的開發人員和框架越多,瀏覽器就越有可能根據用戶的操作優先執行特定運行代碼。

Nested web workers允許工作程序產生並控制自己的工作程序。除錯工具中顯示如下:

Firefox JavaScript除錯工具與nested workers範例

提升React DevTools的整合

React Developer Tool附加工具是其中一個和Firefox DevTools合作密切的開發人員附加工具 that integrate tightly with Firefox DevTools. 利用瀏覽器擴充功能,開發人員可以為同一個代碼庫的瀏覽器自行創造並發行附加工具。

透過和React附加工具維護人員的合作, 我們協力重新啟用並優化附加工具的選單,例如:Go to definition。這個動作可以讓開發人員從React Components直接跳轉到除錯工具的原始檔案。Inspector中也有同樣的功能,可以直接跳轉到指定元素。我們希望藉由這個功能,讓框架和其他工具的運作更為流暢。

搶先體驗開發者版本DevTools功能

Firefox透過開發者版本開放搶先體驗平台的一些特色。默認設定中也提供開發人員使用更多功能。我們希望盡快在開發者版本中加入新功能,並匯集您的反饋。以下為幾項重點:

即時測試Console表達式

利用即時測試的功能,探索JavaScript的事件、函式和DOM感覺猶如魔法般神奇。在Web Console輸入表達式不會產生副作用,你可以在輸入的同時預覽結果,讓你可以比先前更快地發現並修正錯誤。

應用非同步堆疊追蹤於除錯工具和Console

現在的JavaScript大量依賴async/await其他的非同步作業 ,例如 event, promise, 還有 timeout. 因為JavaScript引擎有效的整合,非同步執行現在也提供了更全面的功能。

除錯工具的非同步呼叫堆疊可以讓你了解event、timeout還有promise等呼叫功能執行的狀況在Console中,非同步堆疊也可以讓你更容易找到錯誤的根本原因。

一窺Service Worker除錯功能

這個功能已經出現在Nightly版本有一段時間了,我們很興奮你們也將能夠受惠。請期待四周後即將發行的Firefox 76的開發者版本

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…

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(开发人员版)

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…