Skip to content

Commit 4cdbf11

Browse files
mournermourner
authored
Introduce static worker version of the bundle for strict CSP environments (mapbox#8044)
* introduce static worker version of the bundle * update gitignore, remove leftover import * use hyphen in csp/worker build names for consistency * add docs for the static bundle * rename mapbox-gl-worker to mapbox-gl-csp-worker * nicer CSP build config
1 parent ba42cae commit 4cdbf11

File tree

8 files changed

+86
-15
lines changed

8 files changed

+86
-15
lines changed

‎.gitignore

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
/rollup/build/
22
/docs/components/api.json
33
/dist/
4-
/docs/pages/dist/mapbox-gl-dev.js
5-
/docs/pages/dist/mapbox-gl.js
6-
/docs/pages/dist/mapbox-gl-unminified.js
4+
/docs/pages/dist/
75
*.js.map
86
node_modules
97
package-lock.json

‎build/banner.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import fs from 'fs';
2+
3+
const version = JSON.parse(fs.readFileSync('package.json')).version;
4+
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 */`;

‎build/rollup_plugins.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,10 @@ import { terser } from 'rollup-plugin-terser';
99
import minifyStyleSpec from './rollup_plugin_minify_style_spec';
1010
import { createFilter } from 'rollup-pluginutils';
1111

12-
const {BUILD, MINIFY} = process.env;
13-
const minified = MINIFY === 'true';
14-
const production = BUILD === 'production';
15-
1612
// Common set of plugins/transformations shared across different rollup
1713
// builds (main mapboxgl bundle, style-spec package, benchmarks bundle)
1814

19-
export const plugins = () => [
15+
export const plugins = (minified, production) => [
2016
flow(),
2117
minifyStyleSpec(),
2218
json(),

‎debug/csp-static.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Mapbox GL JS debug page</title>
5+
<meta charset='utf-8'>
6+
7+
<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">
8+
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
10+
<link rel='stylesheet' href='/dist/mapbox-gl.css' />
11+
<style nonce="app-css">
12+
body { margin: 0; padding: 0; }
13+
html, body, #map { height: 100%; }
14+
</style>
15+
</head>
16+
17+
<body>
18+
<div id='map'></div>
19+
20+
<script src='/dist/mapbox-gl-csp.js'></script>
21+
<script src='/debug/access_token_generated.js'></script>
22+
<script nonce="app-js">
23+
24+
mapboxgl.workerUrl = '/dist/mapbox-gl-csp-worker.js';
25+
26+
var map = window.map = new mapboxgl.Map({
27+
container: 'map',
28+
zoom: 12.5,
29+
center: [-77.01866, 38.888],
30+
style: 'mapbox://styles/mapbox/streets-v10',
31+
hash: true
32+
});
33+
34+
</script>
35+
</body>
36+
</html>

‎docs/components/quickstart.js

+14
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,20 @@ export default class extends React.Component {
142142
<p>Requesting styles from Mapbox or other services will require additional
143143
directives. For Mapbox, you can use this <code>connect-src</code> directive:</p>
144144
<pre><code>{`connect-src https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com`}</code></pre>
145+
146+
<p>For strict CSP environments without <code>worker-src blob: ; child-src blob:</code> enabled, there's a separate
147+
Mapbox GL JS bundle (<code>mapbox-gl-csp.js</code> and <code>mapbox-gl-csp-worker.js</code>) which requires setting the path
148+
to the worker manually:</p>
149+
150+
<Copyable>
151+
{highlightMarkup(`
152+
<script src='${urls.js().replace('.js', '-csp.js')}'></script>
153+
<script>
154+
mapboxgl.workerUrl = '${urls.js().replace('.js', '-csp-worker.js')}';
155+
...
156+
</script>
157+
`)}
158+
</Copyable>
145159
</div>
146160
<div>
147161
<h2 className='strong' id='mapbox-css'>Mapbox CSS</h2>

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@
111111
"watch-dev": "rollup -c --environment BUILD:dev --watch",
112112
"build-prod": "rollup -c --environment BUILD:production",
113113
"build-prod-min": "rollup -c --environment BUILD:production,MINIFY:true",
114+
"build-csp": "rollup -c rollup.config.csp.js",
114115
"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",
115116
"build-css": "postcss -o dist/mapbox-gl.css src/css/mapbox-gl.css",
116117
"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 @@
140141
"test-expressions": "build/run-node test/expression.test.js",
141142
"test-flow": "build/run-node build/generate-flow-typed-style-spec && flow .",
142143
"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",
143-
"prepublishOnly": "run-s build-flow-types build-dev build-prod-min build-prod build-css build-style-spec test-build",
144+
"prepublishOnly": "run-s build-flow-types build-dev build-prod-min build-prod build-csp build-css build-style-spec test-build",
144145
"codegen": "build/run-node build/generate-style-code.js && build/run-node build/generate-struct-arrays.js"
145146
},
146147
"files": [

‎rollup.config.csp.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import {plugins} from './build/rollup_plugins';
2+
import banner from './build/banner';
3+
4+
// a config for generating a special GL JS bundle with static web worker code (in a separate file)
5+
// https://github.com/mapbox/mapbox-gl-js/issues/6058
6+
7+
const config = (input, file, format) => ({
8+
input,
9+
output: {
10+
name: 'mapboxgl',
11+
file,
12+
format,
13+
sourcemap: true,
14+
indent: false,
15+
banner
16+
},
17+
treeshake: true,
18+
plugins: plugins(true, true)
19+
});
20+
21+
export default [
22+
config('src/index.js', 'dist/mapbox-gl-csp.js', 'umd'),
23+
config('src/source/worker.js', 'dist/mapbox-gl-csp-worker.js', 'iife')
24+
];

‎rollup.config.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import fs from 'fs';
22
import sourcemaps from 'rollup-plugin-sourcemaps';
33
import {plugins} from './build/rollup_plugins';
4+
import banner from './build/banner';
45

5-
const version = JSON.parse(fs.readFileSync('package.json')).version;
66
const {BUILD, MINIFY} = process.env;
77
const minified = MINIFY === 'true';
88
const production = BUILD === 'production';
99
const outputFile =
1010
!production ? 'dist/mapbox-gl-dev.js' :
1111
minified ? 'dist/mapbox-gl.js' : 'dist/mapbox-gl-unminified.js';
1212

13-
const config = [{
13+
export default [{
1414
// First, use code splitting to bundle GL JS into three "chunks":
1515
// - rollup/build/index.js: the main module, plus all its dependencies not shared by the worker module
1616
// - rollup/build/worker.js: the worker module, plus all dependencies not shared by the main module
@@ -28,7 +28,7 @@ const config = [{
2828
chunkFileNames: 'shared.js'
2929
},
3030
treeshake: production,
31-
plugins: plugins()
31+
plugins: plugins(minified, production)
3232
}, {
3333
// Next, bundle together the three "chunks" produced in the previous pass
3434
// into a single, final bundle. See rollup/bundle_prelude.js and
@@ -41,7 +41,7 @@ const config = [{
4141
sourcemap: production ? true : 'inline',
4242
indent: false,
4343
intro: fs.readFileSync(require.resolve('./rollup/bundle_prelude.js'), 'utf8'),
44-
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 */`
44+
banner
4545
},
4646
treeshake: false,
4747
plugins: [
@@ -50,5 +50,3 @@ const config = [{
5050
sourcemaps()
5151
],
5252
}];
53-
54-
export default config

0 commit comments

Comments
 (0)