video.js - HTTP 源的 HTTPS 页面上的 HLS

Question

是否可以在通过 SSL HTTPS 提供的页面和播放列表上使用带 HLS 的非 SSL 源？

我有一个通过 HTTPS 提供的页面。它使用 Video.js 播放 .m3u8 播放列表。播放列表通过 HTTPS 从同一服务器获取并动态生成。播放列表中的各个 .ts 片段存储在 CDN 上。

我发现每个 .ts GET 请求的 SSL 握手次数很高。希望让 .ts GET 使用非 SSL HTTP——视频内容不敏感(如果是的话，HLS 支持对称 AES 加密，这比非对称 SSL 握手快得多)。

但是，Chrome 拒绝从非 SSL HTTP 源加载 .ts 段:

video.js:26948 Mixed Content: The page at 'https://localhost' was 
loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 
'http://foo.com/20180110144476.ts'. This request has been blocked; 
the content must be served over HTTPS.

添加内容安全策略无济于事:

<meta http-equiv="Content-Security-Policy" content="connect-src http://foo.com 'self';">

Answer 1

因为 ts 文件是通过 XMLHttpRequest 获取的，所以它们被认为是 active mixed content现代浏览器默认会阻止访问。

CSP 的connect-src 选项进一步限制 origins you can connect to并且它不允许您绕过混合内容检查。

恐怕唯一的方法是通过 HTTPS 或 HTTP 提供所有服务。