The following creates one file index.html and one folder index_files. Loaded locally, index.html looks and behaves as expected (zooms, pans etc...).
library(OpenStreetMap)
library(htmlwidgets)
m <- leaflet()
m <- addTiles(m) %>% addProviderTiles(provider=providers$OpenStreetMap)
saveWidget(m, file="index.html",selfcontained = FALSE)
Once I upload to the server, the only way I've been able to view/interact with the map was by installing a Chrome extension that disables CSP.
My question is what should the CSP string look like in this case? I've iterated quite a bit on this, what the current setting I'm using is:
img-src 'self'
openlayers.org
tile.openstreetmap.org
a.tile.openstreetmap.org
b.tile.openstreetmap.org
c.tile.openstreetmap.org
unpkg.com;
script-src 'self' 'unsafe-eval' openlayers.org;
style-src 'self' 'unsafe-inline' 'unsafe-eval' openlayers.org;
I started out being served a blank page, and now I do see the outline of the individual tiles, and how they change when I zoom in & out.
The errors I get are by inspecting the page content. The network tab indicates that all elements but the images are loaded / not blocked. The pngs are blocked with the following error:
Refused to load the image 'https://a.tile.openstreetmap.org/0/0/0.png' because it violates the following Content Security Policy directive: "img-src 'self'".
Seems I'm close the the mark - what is missing?
The most likely explanation is that there is an existing CSP that sets "img-src 'self'". Adding another CSP can only make it stricter. As it doesn't seem like you set "img-src 'self'", you can likely find this in the response headers of the document (the one with content-type text/html). You will need to figure out how it is set and modify/remove it. It can be set in code, in a framework, in a webserver or a proxy.