Properly consuming the API over SSL

LangdonOliver · ‎11-16-2012

All the samples are using standard HTTP, but I figured using SSL would be as simple as adding an "s" to:

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6"></script>

And while it more or less was, I did have to apply the hack below:

  esri.setRequestPreCallback(function (ioArgs) {
   alert(ioArgs.url);
   ioArgs.url = ioArgs.url.replace('http:', 'https:');
   return ioArgs;
  });

Unfortunately even with that, all of the map images are being loaded over non-SSL. Is there a proper way to using ArcGIS over SSL? Some property I need to set somewhere?

TIA!

derekswingley1 · ‎11-16-2012

All the samples are using standard HTTP, but I figured using SSL would be as simple as adding an "s"

It is, here's an example: https://servicesbeta.esri.com/demos/jsapi_over_ssl.html

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6"></script>
And while it more or less was, I did have to apply the hack below:
  esri.setRequestPreCallback(function (ioArgs) {
   alert(ioArgs.url);
   ioArgs.url = ioArgs.url.replace('http:', 'https:');
   return ioArgs;
  });
Unfortunately even with that, all of the map images are being loaded over non-SSL. Is there a proper way to using ArcGIS over SSL? Some property I need to set somewhere?

TIA!

There's no need to do that. Make sure your script tag including the API uses https, all the services you're using use https URLs and that your app is accessed over https as well.

LangdonOliver · ‎11-16-2012

OK, I see. For baseMaps, I was doing:

basemapGallery = new esri.dijit.BasemapGallery({
    showArcGISBasemaps: true,
    map: _map
   });

Which I grabbed some an example somewhere. This `new baseMapGallery()` gives me http instead of https everywhere.

Thanks for the reply!

derekswingley1 · ‎11-16-2012

Glad to help.

If you're app is running over https, the basemap gallery will also use https. Otherwise, it uses http as the protocol.

LangdonOliver · ‎11-16-2012

Do you happen to have an example of that? This configuration isn't working for me:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
</head>
<body class="claro">
 <div id="mapContainer" data-iconSet="Modern">
  <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="height: 950px;">
   <div id="mapSelector">
    <button id="dropdownButton" label="Basemaps"  dojoType="dijit.form.DropDownButton">
     <div dojoType="dijit.Menu" id="basemapMenu">
      <!-- the menu items are dynamically created from basemaps -->
     </div>
    </button>
   </div>
  </div>
 </div>
</body>
  <script type="text/javascript">var djConfig = { 'parseOnLoad': true };</script>
  <script type="text/javascript" src="https://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6"></script>
  <script type="text/javascript">
   // setup arcgis
   dojo.require('esri.map');
   dojo.require('dijit.form.Button');
   dojo.require('dijit.layout.BorderContainer');
   dojo.require('dijit.layout.ContentPane');
   dojo.require('esri.dijit.BasemapGallery');
   dojo.require('dijit.form.Button');
   dojo.require('dijit.Menu');

   var basemapGallery,
    _map;

   dojo.addOnLoad(function () {
    var initExtent = new esri.geometry.Extent({"xmin":-122.46,"ymin":37.73,"xmax":-122.36,"ymax":37.77,"spatialReference":{"wkid":4326}});
    _map = new esri.Map("map",{
             extent:esri.geometry.geographicToWebMercator(initExtent)
         });

   basemapGallery = new esri.dijit.BasemapGallery({
    showArcGISBasemaps: true,
    map: _map
   });

   dojo.connect(basemapGallery, 'onLoad', function () {
    dojo.forEach(basemapGallery.basemaps, function (basemap) {
     // add a menu item for each basemap, when the menu items are selected
     dijit.byId('basemapMenu').addChild(new dijit.MenuItem({
      label: basemap.title,
      onClick: dojo.hitch(this, function () {
       basemapGallery.select(basemap.id);
      })
     }));
    });
   });

   dojo.connect(_map, 'onLoad', function () {
    //resize the map when the browser resizes
    dojo.connect(dijit.byId('map'), 'resize', _map, _map.resize);
   });
  });
  </script>
</html>

In Chrome I get: [blocked] The page at https://xxx/test2.html ran insecure content from http://www.arcgis.com/sharing/community/groups?q=title%3A%22ArcGIS%20Online%20Basemaps%22%20AND%20ow....

derekswingley1 · ‎11-16-2012

Do you happen to have an example of that? This configuration isn't working for me:

<snip>

In Chrome I get: [blocked] The page at https://xxx/test2.html ran insecure content from http://www.arcgis.com/sharing/community/groups?q=title%3A%22ArcGIS%20Online%20Basemaps%22%20AND%20ow....

Can you use version 3.2 of the API and see the same error?

LangdonOliver · ‎11-16-2012

Ahh, dang, I guess that's it.

https://www.dpchallenge.com/testmaps.html
https://www.dpchallenge.com/testmaps32.html

Any known work arounds for 2.6? I'm stuck using it as this will be deployed to an network environment where only 2.6 exists.

derekswingley1 · ‎11-16-2012

We had a bug or two in the past where we had hard coded http URLs for certain resources. There isn't an easy one line workaround.

If you really can't upgrade to 3.2, you can build Basemaps manually using the services hosted on arcgis.com with https URLs and use those in the basemap gallery.

LangdonOliver · ‎11-16-2012

Ahh OK. I might try that or strip out the base map switching feature and use it as a carrot to maybe get a new version pushed through. I'm sure I'll run up against other nice features and bug fixes that 3.2 offers over 2.6.

Thanks for your assistance!