nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Default legend widget does not work over https in IE

BenSayers

When using the default ESRI widget the legend symbology do not show up when using Internet Explorer (IE). They show fine in Chrome, Safari and Firefox, but when using IE this all that is displayed is the browser standard red x's.

I have seen others having the same trouble in various different posts and some people have suggested various fixes for previous versions of the API, but none work for me. I am using AGS 10.04 and JS API v2.8.

Has anyone fixed this exact problem? Anyone at ESRI looked in to this?

Any help/suggestions will be greatly appreciated.

In anticipation, Ben.

タグ付きの投稿をもっと見る

Accepted answers

All comments

derekswingley1

Is your entire site running over https? Your html, css and js, as well as your ArcGIS Server services, need to be served using https.

Here's a simple page that uses the legend dijit, version 2.8 of the API and https: http://servicesbeta.esri.com/demos/https/legend-using-https-2.8.html It works without issue in IE.

BenSayers

Is your entire site running over https? Your html, css and js, as well as your ArcGIS Server services, need to be served using https.

Here's a simple page that uses the legend dijit, version 2.8 of the API and https: http://servicesbeta.esri.com/demos/https/legend-using-https-2.8.html It works without issue in IE.

Derek,
Thank you for looking in to this for me.
Firstly, yes all of my site is using https

I viewed the source of your page and looked at your code and this line I do not have and have never seen anywhere:

esri.dijit.Legend.prototype._legendUrl = 'https://www.arcgis.com/sharing/tools/legend'

I tried substituting your code for the code I was using and I swapped your url above to mine (https://www.efafrica.com/rest/services/EFAv3/EFA_Mainv3/MapServer/legend
) and it still doesn't work in IE. It works fine in Chrome though.

Have you attempted to reproduce the legend widget example not using arcgis.com but from a rest service running form ArcGIS Server?

derekswingley1

Sorry about that, the line tweaking the legend dijit's prototype shouldn't have been in there. The link I posted previously no longer uses arcgis.com for the legend. Can you confirm it works in IE?

Can you post a screen shot of what you're seeing in IE?

BenSayers

Sorry about that, the line tweaking the legend dijit's prototype shouldn't have been in there. The link I posted previously no longer uses arcgis.com for the legend. Can you confirm it works in IE?

Can you post a screen shot of what you're seeing in IE?

Derek,
Your example works in IE. I think it must be something to do with the Token Service I am using and the proxy page not passing the legend icons correctly.

Here is a screen shot of what I am getting in IE:
[ATTACH=CONFIG]14397[/ATTACH]
Though in Chrome I get:
[ATTACH=CONFIG]14398[/ATTACH]

Would you be able to produce a mash up of the two samples:
https://servicesbeta.esri.com/demos/widget/widget_identitymanager_client_side.html
http://help.arcgis.com/en/webapi/javascript/arcgis/demos/widget/widget_legendvisible.html

As this is the basis of my site.

Many thanks for your help.
Ben

legendChrome.PNG

legendIE.PNG

derekswingley1

How's this look: https://servicesbeta.esri.com/demos/https/legend_id_manager_https.html

BenSayers

How's this look: https://servicesbeta.esri.com/demos/https/legend_id_manager_https.html

That works perfectly. I've had a look at the code and it all seems to be straightforward, did you have to do anything special to the proxy page? Would I be able to take a look at the proxy page? I am using a .jsp proxy do you think that could be my problem?

Many thanks for you continued efforts,
Ben

derekswingley1

Nothing special in the code or the proxy page.

One thing to explore�?? where possible, we use base64 encoded strings for images to reduce the number of https requests. This doesn't work in IE. For IE, we need to use the actual image file. Can you confirm that these are accessible from your service? Here's an example from the point layer used in the example I posted previously: https://servicesbeta.esri.com/ArcGIS/rest/services/SanJuan/TrailConditions/FeatureServer/0/images/D906971A

You should be able to use fiddler to see the requests for the images that are needed for the legend.

BenSayers

It appears that I am using Base64, as the requests for my images in Internet Explorer look like: https://www.efafrica.com/rest/services/EFAv3/EFA_Mainv3/MapServer/1/images/3b55578f
How do I force the actual image request rather that the Base64?
Your service works fine in my Internet Explorer though?
Coincidentally, once I have right-clicked on the red x image and copied the image URL then logged in through the ArcGIS Server REST API Login screen that one image appears in the legend but none of the others, would you expect this to happen?
[ATTACH=CONFIG]14415[/ATTACH]
I feel we are getting a little closer to solving the problem,
Thank you Derek.

legendIE2.PNG

JeffPace1

Just to pile on, i can replicate this as well. On my secure service (entire app is secure, so layers are not), the legend shows red x's in IE only

The non base64 encoding is definitely the difference.

The source path to the image in the legend is not getting the token appended on it

If i sniff the token using fiddler, and then append the ?token=LqGIFsRUz8nkeM3XKjYT4W1U0xfLvBT7cEkYZcT3jZU. to the end of the image request in IE for the legend the legend item appears.

derekswingley1

It appears that I am using Base64, as the requests for my images in Internet Explorer look like: https://www.efafrica.com/rest/services/EFAv3/EFA_Mainv3/MapServer/1/images/3b55578f
How do I force the actual image request rather that the Base64?

The API handles this for you by doing what the browser supports. In IE, that means using the image file instead of base64 encoded data. You should not have to do anything.

Coincidentally, once I have right-clicked on the red x image and copied the image URL then logged in through the ArcGIS Server REST API Login screen that one image appears in the legend but none of the others, would you expect this to happen?
I feel we are getting a little closer to solving the problem<snip>

I think so too, but I'm out of ideas. Can you open a ticket with support so they can take a look at how your service is configured? If I think of anything else or have additional suggestions I'll post here.

derekswingley1

Just to pile on, i can replicate this as well. On my secure service (entire app is secure, so layers are not), the legend shows red x's in IE only

The non base64 encoding is definitely the difference.

The source path to the image in the legend is not getting the token appended on it

If i sniff the token using fiddler, and then append the ?token=LqGIFsRUz8nkeM3XKjYT4W1U0xfLvBT7cEkYZcT3jZU. to the end of the image request in IE for the legend the legend item appears.

Jeff�?? are you on 2.8 as well?

JeffPace1

Jeff�?? are you on 2.8 as well?

yes i am, but i just test 2.5 2.6 2.7 and they all exhibit the same behavior in IE only.

I also am using a .jsp proxy and have ArcGIS Server for JAVA 10ps4

derekswingley1

I also am using a .jsp proxy and have ArcGIS Server for JAVA 10ps4

Maybe this is an issue with the .jsp proxy as that's what both you and Ben are using. My testing has been with the .net proxy. Can you open a ticket with support as well?

BenSayers

@Derek: Can you test with a .jsp proxy your end? Would be good to eliminate this.

I'll have to open a ticket with ESRI(UK) who no doubt will pass it straight to the US.

JeffPace1

I can next week in the middle of Cityworks at the moment.

Would be beneficial if esri could test against proxy.jsp and a JAVA base install.

derekswingley1

Would be beneficial if esri could test against proxy.jsp and a JAVA base install.

Let me see what I can do...might take a bit of searching to find a Java instance configured with SSL and appropriate services.

JeffPace1

Let me see what I can do...might take a bit of searching to find a Java instance configured with SSL and appropriate services.

https://www.mymanatee.org/arcgis/rest/services/utilities-infrastructure/irrigation/MapServer/

u: esri
p: esri

Secure service with https required. Running on Arcgis Server 10ps4 for JAVA on windows.

hope that helps.

derekswingley1

Thanks Jeff.

That URL redirects to what looks like a resource on your local network and 404's for me. Here's the redirect URL I'm seeing: https://mcg-ap-arcsvr02.mcgad.local:8343/arcgis/rest/login?redirect=https%3A%2F%2Fwww.mymanatee.org%2Farcgis%2Frest%2Fservices%2Futilities-infrastructure%2Firrigation%2FMapServer%2F

JeffPace1

Thanks Jeff.

That URL redirects to what looks like a resource on your local network and 404's for me. Here's the redirect URL I'm seeing: https://mcg-ap-arcsvr02.mcgad.local:8343/arcgis/rest/login?redirect=https%3A%2F%2Fwww.mymanatee.org%2Farcgis%2Frest%2Fservices%2Futilities-infrastructure%2Firrigation%2FMapServer%2F

That is an annoying side effect of our WebAppFirewall. You should be able to consume the resource in a web app.

https://www.mymanatee.org/arcgis/rest/services/utilities-infrastructure/irrigation/MapServer/?token=UbUqrFQqf4LxwkwbMzefuTVv47Hfu_3vVxXBP5iykzI.

not sure how long that token is good for.

derekswingley1

https://www.mymanatee.org/arcgis/rest/services/utilities-infrastructure/irrigation/MapServer/?token=UbUqrFQqf4LxwkwbMzefuTVv47Hfu_3vVxXBP5iykzI.

not sure how long that token is good for.

That circumvents the purpose of using the Identity Manager. Is that what you're doing in your app?

JeffPace1

That circumvents the purpose of using the Identity Manager. Is that what you're doing in your app?

Yes and no. WE use the identity manager, but there are two cases where we cannot. First is a custom TOC that i make direct calls to the legend thumbnail for each layer. Second is for a custom print servlet that i have to pass each individual tile/dynamic image path to.

For each of these I extract the token and append it so i can make an independent in a different session.

However this is not related to the error. I extracted that URL from firebug just to give you a path to work with. The error we are seeing is in the default legend widget using the identity manager.

derekswingley1

The error we are seeing is in the default legend widget using the identity manager.

Thanks for clarifying. I'm still waiting to hear back about testing this with a JSP proxy on a AGS Java instance + SSL.

JeffPace1

Thanks for clarifying. I'm still waiting to hear back about testing this with a JSP proxy on a AGS Java instance + SSL.

Ok here goes an example

https://www.mymanatee.org/gisapps/mapviewer-test/index.jsp?type=utilitiesinfrastructure&extent=-9200946.57406522:3186486.189628383:-9198653.463216856:3187241.005282636&widgetOn=Legend

In firefox:
1. Log in u: esri p: esri
2. After logging in, refresh the layer visibility in the Live Map widget (working on automating that) using the green refresh arrows
3. Turn on the Irrigation layer (this is the secure layer)
4. Open the Legend from the widget menu. Notice the icons for the non-label layers

In IE:
1. Click ok on warning about insecure content
2. Log in u: esri p: esri
3. If the Live Map widget does not open, open it by using the Folder Icon or from the Map Menu (IE doesnt like automation)
4. Refresh the layer visibility in the Live Map widget (working on automating that) using the green refresh arrows
5. Turn on the Irrigation layer (this is the secure layer)
6. Open the Legend from the widget menu. Notice the red "Xs" instead of icons for all layers

hope this helps.

derekswingley1

I'm looking at your repro case, and you're loading a few non-SSL resources (all the Google CDN hosted stuff). I don't think this affects why the images aren't displaying, but it's one thing that contributes to IE showing a security warning.

Anyway, I've confirmed that the requests for the images for your legend don't have a token appended to them. There is a token appended in the example I posted. Can you open a ticket with support and have them look into this further?

GIS_Weasel

Sorry to resurrect the thread, but I've encountered this also.

Did you find a resolution to this? I'll probably put a support call in too, but it'd be handy to have the solution in the public domain once it's found - there are quite a few threads on the subject.

The observed behaviour differs according to whether you're using the ArcGISDynamicMapServiceLayer or the FeatureLayer class. Basically, the former fails with the above described error, and the latter works, as in the above example. Both are fine in Firefox, just not IE.

The code below illustrates this, pop it into the above example supplied by Derek:

dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.AccordionContainer");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Legend");
      dojo.require("esri.arcgis.utils");
      dojo.require("dijit.form.CheckBox");
      dojo.require("esri.IdentityManager");

      var map;
      var legendLayers = [];

      function init() {
        esri.config.defaults.io.proxyUrl = "proxy/proxy.ashx";

        map = new esri.Map("map", {
          extent: new esri.geometry.Extent({"xmin":-12034010,"ymin":4487877,"xmax":-11965751,"ymax":4525561,"spatialReference":{"wkid":3857}})
        });

        //Add the terrain service to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        var trailsService = new esri.layers.ArcGISDynamicMapServiceLayer("https://servicesbeta.esri.com/ArcGIS/rest/services/SanJuan/Trails/MapServer", {
          id: "Trails"
        });
        
  /**
  // This will work.
  var conditions = new esri.layers.FeatureLayer("https://servicesbeta.esri.com/ArcGIS/rest/services/SanJuan/TrailConditions/FeatureServer/0",{
          id: "Conditions",
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });
  **/
  
  // This will fail.
  var layerURL = "https://servicesbeta.esri.com/ArcGIS/rest/services/SanJuan/TrailConditions/MapServer";
  var conditions = new esri.layers.ArcGISDynamicMapServiceLayer(layerURL);
  
        legendLayers.push({ layer: trailsService, title: 'Trails' });
        legendLayers.push({ layer: conditions, title: 'Conditions' });

        dojo.connect(map,'onLayersAddResult',function(results){
          console.log("layers add result: ", results, legendLayers);
          var legend = new esri.dijit.Legend({
            map: map,
            layerInfos: legendLayers
          },"legendDiv");
          legend.startup();
        });
        map.addLayers([trailsService, conditions]);

        dojo.connect(map, 'onLayersAddResult', function(results) {
          //add check boxes
          dojo.forEach(legendLayers, function(layer){
          var layerName = layer.title;
          var checkBox = new dijit.form.CheckBox({
            name: "checkBox" + layer.layer.id,
            value: layer.layer.id,
            checked: layer.layer.visible,
            onChange: function(evt) {
              var clayer = map.getLayer(this.value);
              clayer.setVisibility(!clayer.visible);
              this.checked = clayer.visible;
            }
          });

          //add the check box and label to the toc
          dojo.place(checkBox.domNode,dojo.byId("toggle"),"after");
          var checkLabel = dojo.create('label',{'for':checkBox.name, innerHTML:layerName},checkBox.domNode,"after");
          dojo.place("<br />",checkLabel,"after");
        });
      });

      dojo.connect(map, 'onLoad', function(theMap) {
        //resize the map when the browser resizes
        dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
      });
    }

    dojo.addOnLoad(init);

Just for the record, it displays the same symptoms using api 2.6 and non-https services.

Cheers, Ben.

BenSayers

Hi Ben,
I've never heard back from ESRI UK about the problem, so I am back to using a static legend. If you ever get the answer please post.
Many thanks,
Ben

JohnGravois

I was able to confirm Ben's findings that the error seems to be isolated to DynamicMapService layer swatches.

The following defect has been logged for the request. [#NIM081725 Legend swatches for secure Dynamic Map Service layers are not returned in Internet Explorer only when application uses Identity Manager and is hosted on HTTPS. ]

Please don't hesitate to contact Esri technical support to add your name to the list of customers requesting that the issue be resolved.

suhanatssuhanats

I was able to confirm Ben's findings that the error seems to be isolated to DynamicMapService layer swatches.

The following defect has been logged for the request. [#NIM081725 Legend swatches for secure Dynamic Map Service layers are not returned in Internet Explorer only when application uses Identity Manager and is hosted on HTTPS. ]

Please don't hesitate to contact Esri technical support to add your name to the list of customers requesting that the issue be resolved.

Hi,
has there been any progress on this issue.
I am having similar problem where legend symbols show as red cross in internet explorer 8. it shows find in chrome.
I am using javascript api 2.8 and arcgisserver sp4. I am not using IdentifyManager. Yes I am using arcgisserver token security where I use proxy.ashx and proxy.config file as recommended by esri as I need to provide a standard username and password and not have the users type in their credentials again and again.
Thanks!

DavideLimosani

hi all,

I have found this workaround in the meantime, I hope it works for you too.

add it to the event onZoomEnd of your map.

function onZoomEnd()
{
    if (navigator.appName == 'Microsoft Internet Explorer')
    {
        timer = setTimeout(function () {
        var imgs = dojo.query('.esriLegendLayer > tbody > tr > td > img');
        for(var i=0; i<imgs.length; i++){
            imgs.src = "yourproxy" + imgs.src;
        }
        }, 100);
    }
}

suhanatssuhanats

hi all,

I have found this workaround in the meantime, I hope it works for you too.

add it to the event onZoomEnd of your map.

function onZoomEnd()
{
    if (navigator.appName == 'Microsoft Internet Explorer')
    {
        timer = setTimeout(function () {
        var imgs = dojo.query('.esriLegendLayer > tbody > tr > td > img');
        for(var i=0; i<imgs.length; i++){
            imgs.src = "yourproxy" + imgs.src;
        }
        }, 100);
    }
}

Hi, can you please explain more? the dojo.query part and then setting the image source path again. Is it because the image path might be losing that token information and need to be reappended?

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

サインイン
登録する

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.