I built a browser extension named MetNews1, which uses the open source Microsoft fluentui React library2. The extension shows a callout box when user clicks its icon on any webpage, and the fluentui library will always download its registered web fonts(mainly Segoe UI) from third party site. It works all fine on most web pages, but not on Twitter timeline page. Since Twitter has the font-src Content Security Policy(CSP) set, web font downloading from third party sites always fails. The problem is that on Twitter timeline page, the downloading of web fonts and violation of CSP are endless, and Twitter would also reports the CSP violation to its server, then the whole process causes Twitter uses 100% CPU and the page won't loads or are very slow.
I encounter the issue on MacOS 13.0 (22A380) with Safari 16.1 (18614.2.9.1.12). Chrome and Firefox on the same OS don't have this issue.
Safari only issue. 比如 twitter.com。
初步调查可能是 Safari 或者 Twitter 的 bug ，因为插件使用了微软的 fluentui React library, 会下载自己的 web fonts ，而 Twitter 设置了 font-src CSP 禁止了从第三方加载字体。问题是字体的下载和因违反 CSP 导致的后续 CSP reports 请求在 Twitter timeline 页面上看起来是无穷无尽的，因此会导致 CPU 占用 100%，页面加载不出来或者很慢。经测试，Firefox 和 Chrome 不存在这个问题。另经测试，在同样设置了 font-src CSP 的 GitHub.com 上，Safari 不存在此问题。
--- 报告给 Twitter 的问题描述 ---
Reference:
--- 解决办法 ---
Safari 可以对扩展设定允许运行的网站，也就是黑白名单。可以设置不允许 MetWord 在 Twitter 上运行（设定时需要打开 Twitter 网站）。