Leaflet example not inheriting service symbology

Henry7512Custer · ‎08-23-2020

Hello,

I saved this example Inherit service symbology | Esri Leaflet as an html file. I get the following console error and the symbology is not displayed as it should.

"SEC7136: [Integrity] The origin 'file://' failed an integrity check for a script resource at 'https://unpkg.com/esri-leaflet-renderers@2.1.2/dist/esri-leaflet-renderers-debug.js' "

Thank you,

Anonymous User · ‎08-23-2020

Hi Henry7512 Custer‌,

It looks like there's a problem with the integrity hash on the https://unpkg.com/esri-leaflet-renderers@2.1.2 resource. If you view the source of the example that you're viewing on that page, you'll see that the HTML that's being used to display that map has dropped the integrity property off the esri-leaflet-renderers@2.1.2 resource to get around the problem. That's going to be the easiest solution, and would be fine for the purposes of your own testing and development

So for that particular resource your html would now be -

  <!-- Load Esri Leaflet Renderers plugin to use feature service symbology -->
  <script src="https://unpkg.com/esri-leaflet-renderers@2.1.2"></script>
‍‍‍‍‍‍‍‍‍‍

Ideally though, having properly working integrity hashes on external scripts is a very good thing in terms of web application security. To learn more about what they do, why they're a good thing and how to generate your own - the MDN provides a good resource: Subresource Integrity - Web security | MDN

Edit:

To save you a bit of leg-work, I've gone and generated a working hash that you can use for the esri-leaflet-renderers script instead. Strictly speaking, having a properly working hash is the better way of doing things, even if it's not overly critical when we're just getting our heads around some example code.

  <!-- Load Esri Leaflet Renderers plugin to use feature service symbology -->
<script src="https://unpkg.com/esri-leaflet-renderers@2.1.2" 
   integrity="sha384-rfnFNL31tMWuuMEgI9YbrQApx2f8V1U+dOWIokWqjanYqREgH06lyxWdzxN9Xb97" 
   crossorigin=""></script>‍‍‍‍

Hope that helps.

Regards,

James

View solution in original post

Anonymous User · ‎08-23-2020