Add subresource integrity information & scripts (#5468)

* Add subresource integrity information & scripts

* Include the integrity hashes in all tutorials also

* Change wording of one of the build scripts

build/integrity.js

@@ -0,0 +1,29 @@
+
+// This script calculates the integrity hashes of the files in dist/ , and
+// **overwrites** the values in the documentation.
+
+var ssri = require('ssri');
+var fs   = require('fs');
+var version = require('../package.json').version;
+
+const integritySrc = ssri.fromData(fs.readFileSync('dist/leaflet-src.js'));
+const integrityUglified = ssri.fromData(fs.readFileSync('dist/leaflet.js'));
+const integrityCss = ssri.fromData(fs.readFileSync('dist/leaflet.css'));
+
+
+console.log('Integrity hashes for ', version, ':');
+console.log('dist/leaflet-src.js: ', integritySrc.toString());
+console.log('dist/leaflet.js:     ', integrityUglified.toString());
+console.log('dist/leaflet.css:    ', integrityCss.toString());
+
+var docConfig = fs.readFileSync('docs/_config.yml').toString();
+
+docConfig = docConfig.
+	replace(/latest_leaflet_version:.*/,  'latest_leaflet_version: ' + version).
+	replace(/integrity_hash_source:.*/,   'integrity_hash_source: "' +   integritySrc.toString() + '"').
+	replace(/integrity_hash_uglified:.*/, 'integrity_hash_uglified: "' + integrityUglified.toString() + '"').
+	replace(/integrity_hash_css:.*/,      'integrity_hash_css: "' +      integrityCss.toString() + '"');
+
+// console.log('New jekyll docs config: \n', docConfig);
+
+fs.writeFileSync('docs/_config.yml', docConfig);

build/publish.sh

@@ -33,3 +33,4 @@ git checkout master
 git branch -D build
 
 echo "All done."
+echo "Remember to run 'npm run-script integrity' and then commit the changes to the master branch, in order to update the website."

docs/_config.yml

@@ -6,3 +6,11 @@ kramdown:
   entity_output: as_input
 
 latest_leaflet_version: 1.0.3
+
+# Integrity hashes for both leaflet.js and leaflet-src.js
+# These will be shown in the downloads page
+# See https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
+integrity_hash_css: "sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
+integrity_hash_source: "sha512-WXoSHqw/t26DszhdMhOXOkI7qCiv5QWXhH9R7CgvgZMHz1ImlkVQ3uNsiQKu5wwbbxtPzFXd1hK4tzno2VqhpA=="
+integrity_hash_uglified: "sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="
+

docs/_layouts/tutorial_frame.html

@@ -9,8 +9,8 @@
 	{% capture root %}{% if page.root %}{{ page.root }}{% else %}{{ layout.root }}{% endif %}{% endcapture %}
 	<link rel="shortcut icon" type="image/x-icon" href="{{ root }}docs/images/favicon.ico" />
 
-	<link rel="stylesheet" href="https://unpkg.com/leaflet@{{ site.latest_leaflet_version }}/dist/leaflet.css" />
-	<script src="https://unpkg.com/leaflet@{{ site.latest_leaflet_version }}/dist/leaflet.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@{{ site.latest_leaflet_version}}/dist/leaflet.css" integrity="{{site.integrity_hash_css}}" crossorigin=""/>
+    <script src="https://unpkg.com/leaflet@{{ site.latest_leaflet_version}}/dist/leaflet.js" integrity="{{site.integrity_hash_uglified}}" crossorigin=""></script>
 
 {% unless page.customMapContainer == "true" %}
 	<style>

docs/_layouts/v2.html

@@ -34,8 +34,8 @@
 	<link rel="stylesheet" href="{{ root }}docs/highlight/styles/github-gist.css" />
 
 	<!-- Leaflet -->
-	<link rel="stylesheet" href="https://unpkg.com/leaflet@{{ site.latest_leaflet_version }}/dist/leaflet.css" />
-	<script src="https://unpkg.com/leaflet@{{ site.latest_leaflet_version }}/dist/leaflet.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@{{ site.latest_leaflet_version}}/dist/leaflet.css" integrity="{{site.integrity_hash_css}}" crossorigin=""/>
+    <script src="https://unpkg.com/leaflet@{{ site.latest_leaflet_version}}/dist/leaflet.js" integrity="{{site.integrity_hash_uglified}}" crossorigin=""></script>
 
 	{% if page.css %}<style>{{ page.css }}</style>{% endif %}
 

docs/download.md

@@ -38,19 +38,30 @@ it straight away, place this in the `head` of your HTML code:
     <link rel="stylesheet" href="https://unpkg.com/leaflet@{{ site.latest_leaflet_version}}/dist/leaflet.css" />
     <script src="https://unpkg.com/leaflet@{{ site.latest_leaflet_version}}/dist/leaflet.js"></script>
 
+To avoid potential security problems, we recommend and encourage enabling
+[subresource integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)
+when using Leaflet from a CDN:
+
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@{{ site.latest_leaflet_version}}/dist/leaflet.css"
+      integrity="{{site.integrity_hash_css}}"
+      crossorigin=""/>
+    <script src="https://unpkg.com/leaflet@{{ site.latest_leaflet_version}}/dist/leaflet.js"
+      integrity="{{site.integrity_hash_uglified}}"
+      crossorigin=""></script>
+
 ### Using a Downloaded Version of Leaflet
 
 Inside the archives downloaded from the above links, you will see four things:
 
 - `leaflet.js` - This is the minified Leaflet JavaScript code.
-- `leaflet-src.js` - This is the readable, unminified Leaflet JavaScript, which is sometimes helpful for debugging.
+- `leaflet-src.js` - This is the readable, unminified Leaflet JavaScript, which is sometimes helpful for debugging. <small>(The integrity hash for this file is <nobr><tt>{{site.integrity_hash_source}}</tt></nobr>)</small>
 - `leaflet.css` - This is the stylesheet for Leaflet.
 - `images` - This is a folder that contains images referenced by `leaflet.css`. It must be in the same directory as `leaflet.css`.
 
 Unzip the downloaded archive to your website's directory and add this to the `head` of your HTML code:
 
     <link rel="stylesheet" href="/path/to/leaflet.css" />
-    <script src="/path/to/leaflet.js"></script> <!-- or use leaflet-src.js --!>
+    <script src="/path/to/leaflet.js"></script>
 
 ### Using a JavaScript package manager
 

docs/examples/geojson/geojson-example.html

@@ -6,13 +6,12 @@
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
-</head>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@{{ site.latest_leaflet_version}}/dist/leaflet.css" integrity="{{site.integrity_hash_css}}" crossorigin=""/>
+    <script src="https://unpkg.com/leaflet@{{ site.latest_leaflet_version}}/dist/leaflet.js" integrity="{{site.integrity_hash_uglified}}" crossorigin=""></script></head>
 <body>
 	<div id="map" style="width: 600px; height: 400px"></div>
 
 	<script src="sample-geojson.js"></script>
-	<script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
 
 	<script>
 		var map = L.map('map').setView([39.74739, -105], 13);

docs/examples/quick-start/index.md

@@ -15,11 +15,15 @@ Before writing any code for the map, you need to do the following preparation st
 
  * Include Leaflet CSS file in the head section of your document:
 
-		<link rel="stylesheet" href="https://unpkg.com/leaflet@{{ site.latest_leaflet_version }}/dist/leaflet.css" />
+		<link rel="stylesheet" href="https://unpkg.com/leaflet@{{ site.latest_leaflet_version}}/dist/leaflet.css"
+		  integrity="{{site.integrity_hash_css}}"
+		  crossorigin=""/>
 
  * Include Leaflet JavaScript file:
 
-		<script src="https://unpkg.com/leaflet@{{ site.latest_leaflet_version }}/dist/leaflet.js"></script>
+		<script src="https://unpkg.com/leaflet@{{ site.latest_leaflet_version}}/dist/leaflet.js"
+		  integrity="{{site.integrity_hash_uglified}}"
+		  crossorigin=""></script>
 
  * Put a `div` element with a certain `id` where you want your map to be:
 

package.json

@@ -25,6 +25,7 @@
     "rollup-plugin-json": "^2.1.0",
     "rollup-watch": "^2.5.0",
     "source-map": "^0.5.6",
+    "ssri": "^4.1.2",
     "uglify-js": "~2.7.3"
   },
   "main": "dist/leaflet-src.js",
@@ -39,7 +40,8 @@
     "lintfix": "eslint src --fix; eslint spec/suites --fix; ",
     "rollup": "rollup -c build/rollup-config.js",
     "watch": "rollup -w -c build/rollup-watch-config.js",
-    "uglify": "uglifyjs dist/leaflet-src.js -c -m -o dist/leaflet.js --source-map dist/leaflet.js.map --in-source-map dist/leaflet-src.js.map --source-map-url leaflet.js.map"
+    "uglify": "uglifyjs dist/leaflet-src.js -c -m -o dist/leaflet.js --source-map dist/leaflet.js.map --in-source-map dist/leaflet-src.js.map --source-map-url leaflet.js.map",
+    "integrity": "nodejs ./build/integrity.js"
   },
   "eslintConfig": {
     "root": true,