应用内容安全策略时,Safari的默认媒体控件将被阻止

我最近遇到了一个意想不到的障碍,试图在一个依赖于为HTML提供的本地媒体控件的网站上部署内容安全策略。 游猎中的元素。默认浏览器提供的多媒体控件对于我来说已经足够好了,它们为所有用户提供了平台本机用户体验。令我吃惊的是,我注意到在具有严格内容安全策略的页面上,Safari中没有可用的播放控制按钮。

内容安全策略是一个HTTP响应头,服务器可以发送该头来指示其源站的安全策略比默认安全策略更严格。要只允许一个页面显示来自其自身来源的图像和播放媒体,您需要发送这样的标题(为了可读性而断开多行):

内容安全策略:默认src'none';媒体源“self”;“自我”

上述示例阻止来自其他来源/域的媒体和图像,甚至完全阻止样式表和脚本运行。

Safari 11(用于MacOS和iOS 11)和Safari 12(用于MacOS和iOS 12)提供默认媒体控制按钮的图标,作为加载在数据URI blob上的SVG文件。在处理内容安全策略时,Safari没有对这些来自浏览器本身的图形做出任何例外。

结果是,Safari会阻塞自己的默认媒体控件,最终没有任何可见的图标。Safari还发送内容安全策略违反报告,如果将内容安全策略配置为这样。应保留图标的默认半透明深色工具栏可见,当图标无法加载时,媒体控件的单击区域会变得非常小。

这显然是野生动物的一个缺陷。浏览器自己的图形总是值得信赖的尤其是在这种情况下。默认的媒体控件是受信任的,不会被其他Web浏览器(包括Firefox)中的相同内容安全策略阻止。谷歌浏览器以及10岁以上的Safari。你可以跟随WebKit错误191782如果您对这个特定问题的更新感兴趣。

你不能使用临时源哈希源专门允许Safari需要的资产。唯一可以让您继续使用音频和视频默认控件的解决方案是通过更改策略降低页面的安全级别:

内容安全策略:默认src'none';媒体源“self”;“自我”数据:

这允许从以某种方式进入页面的任何数据URI中加载任何图像资源。这可能是一个安全风险,因为数据URI被认为等同于不安全内联来源。这远非完美,但比起完全没有内容安全策略,它仍然是一个更好的地方。

另一个解决方案是咬紧牙关,设计并提供自己的媒体控件,而不是依赖Safari的默认媒体控件和图形。yabo88软件下载当默认的媒体控件正常工作时,这可能是许多不需要的额外工作。

此问题提醒您,内容安全策略需要持续监控,因为新问题和浏览器错误可能会破坏网站的核心功能。