mapbox · mourner · Mar 21, 2019 · Mar 15, 2019 · Mar 15, 2019 · Mar 18, 2019
diff --git a/.gitignore b/.gitignore
@@ -1,9 +1,7 @@
 /rollup/build/
 /docs/components/api.json
 /dist/
-/docs/pages/dist/mapbox-gl-dev.js
-/docs/pages/dist/mapbox-gl.js
-/docs/pages/dist/mapbox-gl-unminified.js
+/docs/pages/dist/
 *.js.map
 node_modules
 package-lock.json

diff --git a/build/banner.js b/build/banner.js
@@ -0,0 +1,4 @@
+import fs from 'fs';
+
+const version = JSON.parse(fs.readFileSync('package.json')).version;
+export default `/* Mapbox GL JS is licensed under the 3-Clause BSD License. Full text of license: https://github.com/mapbox/mapbox-gl-js/blob/v${version}/LICENSE.txt */`;
diff --git a/build/rollup_plugins.js b/build/rollup_plugins.js
@@ -9,14 +9,10 @@ import { terser } from 'rollup-plugin-terser';
 import minifyStyleSpec from './rollup_plugin_minify_style_spec';
 import { createFilter } from 'rollup-pluginutils';
 
-const {BUILD, MINIFY} = process.env;
-const minified = MINIFY === 'true';
-const production = BUILD === 'production';
-
 // Common set of plugins/transformations shared across different rollup
 // builds (main mapboxgl bundle, style-spec package, benchmarks bundle)
 
-export const plugins = () => [
+export const plugins = (minified, production) => [
     flow(),
     minifyStyleSpec(),
     json(),

diff --git a/debug/csp-static.html b/debug/csp-static.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+
+    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' 'nonce-app-js'; style-src 'self' 'nonce-app-css'; img-src data: blob: ; connect-src https://*.mapbox.com">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel='stylesheet' href='/dist/mapbox-gl.css' />
+    <style nonce="app-css">
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+
+<script src='/dist/mapbox-gl-csp.js'></script>
+<script src='/debug/access_token_generated.js'></script>
+<script nonce="app-js">
+
+mapboxgl.workerUrl = '/dist/mapbox-gl-csp-worker.js';
+
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 12.5,
+    center: [-77.01866, 38.888],
+    style: 'mapbox://styles/mapbox/streets-v10',
+    hash: true
+});
+
+</script>
+</body>
+</html>
diff --git a/docs/components/quickstart.js b/docs/components/quickstart.js
@@ -142,6 +142,20 @@ export default class extends React.Component {
                         <p>Requesting styles from Mapbox or other services will require additional
                             directives. For Mapbox, you can use this <code>connect-src</code> directive:</p>
                         <pre><code>{`connect-src https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com`}</code></pre>
+
+                        <p>For strict CSP environments without <code>worker-src blob: ; child-src blob:</code> enabled, there's a separate
+                            Mapbox GL JS bundle (<code>mapbox-gl-csp.js</code> and <code>mapbox-gl-csp-worker.js</code>) which requires setting the path
+                            to the worker manually:</p>
+
+                        <Copyable>
+                            {highlightMarkup(`
+                                <script src='${urls.js().replace('.js', '-csp.js')}'></script>
+                                <script>
+                                mapboxgl.workerUrl = '${urls.js().replace('.js', '-csp-worker.js')}';
+                                ...
+                                </script>
+                            `)}
+                        </Copyable>
                     </div>
                     <div>
                         <h2 className='strong' id='mapbox-css'>Mapbox CSS</h2>

diff --git a/package.json b/package.json
@@ -111,6 +111,7 @@
     "watch-dev": "rollup -c --environment BUILD:dev --watch",
     "build-prod": "rollup -c --environment BUILD:production",
     "build-prod-min": "rollup -c --environment BUILD:production,MINIFY:true",
+    "build-csp": "rollup -c rollup.config.csp.js",
     "build-flow-types": "cp build/mapbox-gl.js.flow dist/mapbox-gl.js.flow && cp build/mapbox-gl.js.flow dist/mapbox-gl-dev.js.flow",
     "build-css": "postcss -o dist/mapbox-gl.css src/css/mapbox-gl.css",
     "build-style-spec": "cd src/style-spec && npm run build && cd ../.. && mkdir -p dist/style-spec && cp src/style-spec/dist/* dist/style-spec",
@@ -140,7 +141,7 @@
     "test-expressions": "build/run-node test/expression.test.js",
     "test-flow": "build/run-node build/generate-flow-typed-style-spec && flow .",
     "test-cov": "nyc --require=@mapbox/flow-remove-types/register --reporter=text-summary --reporter=lcov --cache run-s test-unit test-expressions test-query test-render",
-    "prepublishOnly": "run-s build-flow-types build-dev build-prod-min build-prod build-css build-style-spec test-build",
+    "prepublishOnly": "run-s build-flow-types build-dev build-prod-min build-prod build-csp build-css build-style-spec test-build",
     "codegen": "build/run-node build/generate-style-code.js && build/run-node build/generate-struct-arrays.js"
   },
   "files": [

diff --git a/rollup.config.csp.js b/rollup.config.csp.js
@@ -0,0 +1,24 @@
+import {plugins} from './build/rollup_plugins';
+import banner from './build/banner';
+
+// a config for generating a special GL JS bundle with static web worker code (in a separate file)
+// https://github.com/mapbox/mapbox-gl-js/issues/6058
+
+const config = (input, file, format) => ({
+    input,
+    output: {
+        name: 'mapboxgl',
+        file,
+        format,
+        sourcemap: true,
+        indent: false,
+        banner
+    },
+    treeshake: true,
+    plugins: plugins(true, true)
+});
+
+export default [
+    config('src/index.js', 'dist/mapbox-gl-csp.js', 'umd'),
+    config('src/source/worker.js', 'dist/mapbox-gl-csp-worker.js', 'iife')
+];
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,16 +1,16 @@
 import fs from 'fs';
 import sourcemaps from 'rollup-plugin-sourcemaps';
 import {plugins} from './build/rollup_plugins';
+import banner from './build/banner';
 
-const version = JSON.parse(fs.readFileSync('package.json')).version;
 const {BUILD, MINIFY} = process.env;
 const minified = MINIFY === 'true';
 const production = BUILD === 'production';
 const outputFile =
     !production ? 'dist/mapbox-gl-dev.js' :
     minified ? 'dist/mapbox-gl.js' : 'dist/mapbox-gl-unminified.js';
 
-const config = [{
+export default [{
     // First, use code splitting to bundle GL JS into three "chunks":
     // - rollup/build/index.js: the main module, plus all its dependencies not shared by the worker module
     // - rollup/build/worker.js: the worker module, plus all dependencies not shared by the main module
@@ -28,7 +28,7 @@ const config = [{
         chunkFileNames: 'shared.js'
     },
     treeshake: production,
-    plugins: plugins()
+    plugins: plugins(minified, production)
 }, {
     // Next, bundle together the three "chunks" produced in the previous pass
     // into a single, final bundle. See rollup/bundle_prelude.js and
@@ -41,7 +41,7 @@ const config = [{
         sourcemap: production ? true : 'inline',
         indent: false,
         intro: fs.readFileSync(require.resolve('./rollup/bundle_prelude.js'), 'utf8'),
-        banner: `/* Mapbox GL JS is licensed under the 3-Clause BSD License. Full text of license: https://github.com/mapbox/mapbox-gl-js/blob/v${version}/LICENSE.txt */`
+        banner
     },
     treeshake: false,
     plugins: [
@@ -50,5 +50,3 @@ const config = [{
         sourcemaps()
     ],
 }];
-
-export default config