Applying https to Carto map but requesting insecure data?

Question

I am building a site using data from CartoDB that locates someone on a map, and Chrome requires that be over https. I added an SSL, but it was not working, the page showed up black. I found out that it was calling things that were not over https, and fixed a couple of them by adding them to my site, but I still get the error below. Now it locates someone, but does not show the map data.

The data should show up like the line here (permission denied on location, because not https): http://bakkenpipelinemap.com/

But https shows the location, but not the data: https://bakkenpipelinemap.com/

The error below from the Console says it's requesting something, looks like it's the map data, which is over http not https. Any ideas?

Mixed Content: The page at 'https://bakkenpipelinemap.com/' was loaded over HTTPS, but requested an insecure script 'http://nittyjee.carto.com/api/v1/map?stat_tag=6c459170-8476-11e6-af6f-0e05a…tivity%22%3A%5B%22cartodb_id%22%5D%7D%7D%5D%7D&callback=_cdbc_2698715151_1'. This request has been blocked; the content must be served over HTTPS.

Answer 1

A friend pointed out the answer, all I needed to add was this to the code: Add { https: true } as explained here: https://carto.com/docs/carto-engine/carto-js/getting-started/#https-support

The example code they give:

<div id="map"></div>

<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>

<script>
  var map = new L.Map('map', {
    center: [0,0],
    zoom: 2
  })
  cartodb.createLayer(map, 'https://examples.carto.com/api/v1/viz/15589/viz.json', { https: true })
    .addTo(map)
    .on('error', function(err) {
      alert("some error occurred: " + err);
    });
</script>

Answer 2

As explained here, you can use all the functionality of CARTO.js with HTTPs support. Be sure to use https when importing both the JS library and the CSS file:

<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js">

You will also need to use HTTPs in the viz.json URL if you are using the createVis method.