Leaflet and Plotly widgets generate error

anestuk · November 11, 2021, 11:38am

Hello everyone. I am an R user migrating from Hugo-Learn to Hugo-doks theme. I am attempting to use Leaflet and Plotly widgets deployed on Netlify.

I have existing deployments on netlify using Leaflet and Plotly e.g. https://www.anest.uk/8whitepaper/pricycles/

However Hugo-doks uses npm and - the way I am using it - it is less tightly coupled with Rstudio, so instead of Rmarkdown I write markdown and even a little html as below.

On localhost both leaflet and plotly render using an iframe referencing a leaf bundle with html: files ~5MB. So the following renders fine locally (Windows):

<iframe seamless src="leafmap/index.html" width="100%" height="500"></iframe>`
<iframe seamless src="plotly/index.html" width="100%" height="500"></iframe>`

However deployed to netlify there are errors: “anestuk-doksf.netlify.app refused to connect” for both leaflet and plotly.

In a support thread on doks forum https://github.com/h-enk/doks/discussions/461 the author gave some hints/alternatives,

./layouts/index.headers: script-src ‘self’ https://cdn.plot.ly/plotly-latest.min.js;
Laboratory is an experimental Firefox extension: could help you with remaining CSP issues
You could also install the Plotly npm package (recommended method)

I have attempted 1) but the error remains, 2) gives a very minimal ‘generated CSP policy’ of default-src ‘none’ but I don’t really know how to use it and 3) is probably even further beyond my grasp. In fact all of this is well beyond my grasp, frankly!

There are similar queries before in this community such as
https://answers.netlify.com/t/runtime-error-after-pushing-hugo-site/18734
https://answers.netlify.com/t/plotly-charts-and-some-leaflet-maps-missing-from-website/30828/4
However although ‘solved’ I’m not clear how to apply the information they contain.

I am unclear whether to give up on these two widgets and just use static images, or whether the solution is within reach using a ‘cookbook’ set of steps.

Any help would be most gratefully received!

Minimal mods to doks starter template, (a) add widgets (b) apply patch (1) above to ./layouts/index.headers https://github.com/amberalpha/doksf

On netlify autodeployed from github, showing error: https://anestuk-doksf.netlify.app/blog/widgets/

hrishikesh · November 11, 2021, 12:13pm

Do you really need the CSP rule?

github.com

amberalpha/doksf/blob/master/node_modules/@hyas/doks/layouts/index.headers#L5


      
          /*
            Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
            X-Content-Type-Options: nosniff
            X-XSS-Protection: 1; mode=block
          Content-Security-Policy:   default-src 'none'; connect-src https://www.google-analytics.com/j/collect; font-src 'self' https://cdnjs.cloudflare.com; img-src 'self' data: https://cartodb-basemaps-a.global.ssl.fastly.net https://cartodb-basemaps-b.global.ssl.fastly.net https://cartodb-basemaps-c.global.ssl.fastly.net https://cartodb-basemaps-d.global.ssl.fastly.net; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-MML-AM_CHTML.js https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/jax/element/mml/optable/Latin1Supplement.js https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/jax/output/CommonHTML/fonts/TeX/AMS-Regular.js https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/jax/output/CommonHTML/fonts/TeX/fontdata.js https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/jax/output/CommonHTML/jax.js https://www.google-analytics.com/analytics.js https://yihui.name/js/math-code.js; style-src 'self' 'unsafe-inline' 
            X-Frame-Options: SAMEORIGIN
            Referrer-Policy: strict-origin 
            Feature-Policy: geolocation 'self'
            Cache-Control: public, max-age=31536000
            Access-Control-Allow-Origin: *

If you remove that, does it work fine?

anestuk · November 11, 2021, 12:29pm

Many thanks for your response!

I have removed the Content-Security-Policy line, commit, deploy - but the ‘refused to connect’ errors remain. I have checked that the edits have committed/deployed correctly…

hrishikesh · November 11, 2021, 12:32pm

I don’t think the changes are live, I’m still seeing this:

anestuk · November 11, 2021, 12:53pm

I’ve checked the commit ‘no csp’ on github, also that an added text string ‘no csp’ has gone live i.e. shows up online in the blog entry just above ‘leaflet’. If the added content is live, I assume the index.headers has gone live in continuous deployment?

hrishikesh · November 11, 2021, 1:30pm

I checked your repo and looks like I found the problem. The file that you’ve stored in the repo gets overwritten in Node Module installation stage.

This is what gets installed:

I’m not sure what can be done in this case. My advise would be to remove the index.headers file outside of Node Modules folder so that it can be overwritten in a different way.