Content Security Policy and the ArcGIS API for JavaScript

959
5
09-05-2019 01:41 PM
Regular Contributor
1 5 959

Does the ArcGIS API for JavaScript work with Content Security Policy?  The short answer is yes, but which version you're using (4.x vs. 3.x) determines the approach to take.  Dojo allows you to configure support CSP support:

// mapconfig.js
window.dojoConfig = {
async: true,
has: {"csp-restrictions": true}
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

So the following example works [note that blob support must be enabled]:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="content-security-policy"
content="script-src 'self' https://js.arcgis.com blob:; object-src 'self'" />

<title>Using ArcGIS API for JavaScript with CSP</title>
<script src="./mapconfig.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
width: 100%
}
</style>

</head>
<body>
<div id="map"></div>
<script src="./mapinit412.js"></script>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
//mapinit412.js
require([
"esri/Map",
"esri/views/MapView"
], function (Map, MapView) {

var map = new Map({
basemap: "topo-vector"
});

var view = new MapView({
container: "map",
map: map,
center: [-118.71511, 34.09042],
zoom: 11
});
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Note that CSP doesn't allow any inline JavaScript, so even the simplest blocks of code need to be in a separate file.

What about 3.x?  Aye, there's the rub.  Although Dojo supports CSP, the ArcGIS API 3.x does not: it contains code that CSP will reject.  Here's an example from VectorTileLayerImpl.js:

l = Function("return this")();‍‍‍‍‍

The only way to get 3.x to work with CSP is to include the dreaded 'unsafe-eval' in the policy string.  With that, the following example will work:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="content-security-policy"
content="script-src 'self' 'unsafe-eval' https://js.arcgis.com; object-src 'self'" />

<title>Using ArcGIS API for JavaScript with CSP</title>
<script src="./mapconfig.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<script src="https://js.arcgis.com/3.29/"></script>
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
width: 100%
}
</style>

</head>
<body>
<div id="map"></div>
<script src="./mapinit329.js"></script>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
// mapinit329.js
require(["esri/map"], function (Map) {
var map = new Map("map", {
center: [-118, 34.5],
zoom: 8,
basemap: "topo"
});
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
5 Comments
Regular Contributor

Although using CSP with 4.x doesn't create any CSP errors, it does create a handful of JavaScript warnings: Failed to create Worker. Fallback to execute module in main thread [dojo.js: 334, message="Uncaught null"].  While this doesn't seem to affect functionality (I tried it against the "Watch for changes" sample), it could possibly affect performance.

Regular Contributor

While the "Failed to create Worker" warnings occur at 4.12, they don't occur at 4.14, so whatever issue was causing them appears to have been fixed.

New Contributor

We are using:

  • ArcGIS JS API Version: 4.14
  • Esri-loader: 2.12.0

and after adding the above configuration we noticed that the graphics added on the map view (or graphics layers) are now not visible on the map while we can still see them in memory (console, debugger). 

Any suggestion or workaround for this? thank you Mark Cederholm

Regular Contributor

I've never used Esri-loader; I use require.js for loading modules outside of JSAPI.  Can you give me an example?

New Contributor

Could this issue impact a hosted story map? The Esri Vector basemaps have disappeared from all of my classic hosted story maps.

Here's a link to an example: TRIO’s Footprint in 2019-20

I switched to the dark grey basemap on the first tab because it's the only basemap that will display completely, but the other tabs are blank because they are reference the light grey basemap. The basemaps load as expected in AGOL.