HTTP 源的 HTTPS 页面上的 HLS答案

【问题标题】：HLS on an HTTPS page for HTTP sourcesHTTP 源的 HTTPS 页面上的 HLS
【发布时间】：2018-06-20 05:43:07
【问题描述】：

是否可以在通过 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';">

【问题讨论】：

标签： video.js http-live-streaming content-security-policy mixed-content

【解决方案1】：

由于ts 文件是通过XMLHttpRequest 获取的，因此它们被视为active mixed content，现代浏览器将默认阻止访问。

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

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

【讨论】：

看起来 Chrome 至少使用了持久的 HTTPS 会话，因此不会为每个 .ts 段重新协商 SSL 握手。