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.
Related
I use videojs and hls to stream video. The .m3u8 loading is found but I have this error. Anyone know how to fix this?
Mixed Content: The page at 'https://domain/course/9/154' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://domain/public/storage/course_154_9/lesson_55/enc.key'. This request has been blocked; the content must be served over HTTPS.
Thank you very much
As the error states, the browser is blocking an http URL because the page is https. The http URL is http://domain/public/storage/course_154_9/lesson_55/enc.key which looks like an AES key which will be listed inside the m3u8 playlists of your HLS stream. You need to make sure your HLS contains only https URLs.
I have a website that embeds the Youku video player. This player is loading some insecure resources (over http instead of https). The player itself is loaded over https as outlined in this SO thread, but it loads some insecure resources. The insecure resource in question can be accessed via https: https://g2.ykimg.com/052100015C8F58A9AD97EB1AC20B9132
Is there a way to force all request being made from my Vue app to be loaded via https?
In the end the solution was to include a meta tag in the header.
'<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
I tried loading NopCommerce from HTTPS protocol, but Images and Scripts has absolute URL which contains http:// so browser blocks them and shows insecure site instead of green ssl lock.
How should I change absolute url of contents with relatives
Is it possible to use react-leaflet with https connection?
It seems I cannot switch between HTTP and HTTPS protocol, so i get a warning:
Mixed Content: The page at 'https://localhost/map' was loaded over
HTTPS, but requested an insecure image
'http://b.tile.osm.org/10/510/340.png'. This content should also be
served over HTTPS.
Maybe somebody knows a workaround.
I am trying to optimize my site for all HTTPS. I know that Twitter is all HTTPS and I noticed that they don't redirect HTTP to HTTPS, but instead just initiate an HTTPS connection.
Here is a screenshot of Google Chrome's Network Activity, notice there is no redirect (301/302), the HTTP request (first line) just hangs as pending and the second line is the HTTPS page. Note, I have cleared all my browser cache so HTTP Strict Transport Security (HSTS) shouldn't matter.
Here is another screenshot of the request/response for the HTTPS page. Notice, that it seems Twitter inserts some fields into the REQUEST, such as :scheme
How do they do this? I would assume its faster so that if a user types twitter.com into their browser, instead of a redirect (think extra network round trip), Twitter seems to seamlessly move to SSL (HTTPS).
A follow on question would be, does this work in all browsers?
They have been added to a list of preloaded HSTS sites in Chrome and Mozilla Firefox.