Is it possible to use non-SSL sources with HLS on a page and playlist served via SSL HTTPS?
I have a page served over HTTPS. It uses Video.js to play a .m3u8 playlist. The playlist is fetched from the same server over HTTPS and is dynamically generated. The individual .ts segments within the playlist are stored on a CDN.
I'm finding that the SSL handshakes for each .ts GET request are high. Would like to instead make the .ts GETs use non-SSL HTTP -- the video content is not sensitive (and if it were, HLS supports symmetric AES encryption which is significantly faster than the asymmetric SSL handshake).
However, Chrome is refusing to load the .ts segments from a non-SSL HTTP source:
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.
Add a content security policy does not help:
<meta http-equiv="Content-Security-Policy" content="connect-src http://foo.com 'self';">
Since the ts files are fetched via XMLHttpRequest they're considered active mixed content and modern browsers will block access by default.
The CSP's connect-src option further restricts the origins you can connect to and it won't allow you to bypass the mixed-content check.
I'm afraid the only way is to serve everything over either HTTPS or HTTP.