How can i use react-leaflet with https? - ssl

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.

Related

HLS on an HTTPS page for HTTP sources

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.

How to ensure my website loads all resources via https?

URL in question: https://newyorkliquorgiftshop.com/admin/
When you open the above page, you can see in the console that there are lots of error messages saying "...was loaded over HTTPS, but requested an insecure stylesheet.."
This website was working well until all of a sudden this problem shows up. I am not very familiar with https, but I have contacted with Godaddy and the SSL certificate is valid, and there is no obvious problem with "https://newyorkliquorgiftshop.com". And I am stuck here, I've some experiences with HTTPS website before, if the URL of website's homepage is "https", then every resources it loads is via "https" too. I don't know why my website behave differently and I don't know where to start to solve the problem? Any hint is appreciated especially articles about HTTPS that is related to my problem.(I have done a brief research regarding HTTPS but most of the articles I found are about the basic concepts.)
If you have access to the code (not sure what you built the website using), try using https instead of http for the URL's you use to load your style sheets and script files.
For example one of the errors is
Mixed Content: The page at 'https://newyorkliquorgiftshop.com/admin/' was loaded over HTTPS, but requested an insecure script 'http://www.newyorkliquorgiftshop.com/admin/view/javascript/common.js'. This request has been blocked; the content must be served over HTTPS.
You are requesting the .js file using HTTP, try using HTTPS like so:
https://www.newyorkliquorgiftshop.com/admin/view/javascript/common.js

peer.js is not working http but not on https?

when i used this http://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.14/peer.js
its was giving following error
was loaded over HTTPS, but requested an insecure script
'http://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.14/peer.js'. This
request has been blocked; the content must be served over HTTPS.
after adding
https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.14/peer.js
its started giving
was loaded over HTTPS, but requested an insecure XMLHttpRequest
endpoint '0.peerjs.com:9000/c03lztxhq78vkj4i/…;. This request has been
blocked; the content must be served over HTTPS.
This is due to mixed-content blocking - try loading the secure version e.g.
https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.14/peer.js
check its compatability support of peerjs http://peerjs.com/status/old
Might be late but anyways this might help some ...
In case of Peer Js :
If you’re planning to deploy to a remote server, it has to be via HTTPS. This is because browsers only allows to access device if connection is secure.
This article might help ( Read under the title: Deploying to remote server ).
If curious, also consider having a look at web fundamentals. ( Read under the title : An XMLHttpRequest example ).
Extra stuff : You can also read this documentation to prevent mixed content.

How could a https site enable external http link without warning from browser?

I have mixed content in my https website, but once I have http conent like external link to outside, the browser will warning "this is not a trusted site"
As the links of http cannot be removed, how can I walk around this issue?
Thanks for any suggestion.
You can have links to http content. The most common thing when this happens is that you have src attributes with http in them. If you're for instance getting jquery code from an API, try switching to https.

google translate not showing up when https is used in url

For some reason when you go to the url https://www.improvementskills.org/index.cfm google translate does not show up, but when you go to http://www.improvementskills.org/index.cfm it works fine. So I know the issue is with SSL and having https. Does anyone know what the problem is and how to fix it. Thanks!
You are loading Google's JavaScript with an http URL, even when your page is served with https. The browser rejects that, because it's insecure to include non-https content in an https page.
You need to do this:
<script type="text/javascript" src="//translate.google.com/...
rather than specifying the URL as http://translate.google.com/... By starting the URL at the double-slash, the browser will use whichever of http or https the page itself is using.