Leaflet example not inheriting service symbology

105
2
Jump to solution
08-23-2020 05:43 PM
Highlighted
New Contributor II

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,

Tags (1)
Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
Esri Contributor

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

Reply
0 Kudos
2 Replies
Highlighted
Esri Contributor

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

Reply
0 Kudos
Highlighted
New Contributor II

Thank you James!