Equirectangular:- Site throws error if it has content security policy because of Blob

[vineetkumar1511]

I am trying to load this component in different sites but due to blob used for equirectangular, i get below error:-

Content Security Policy directive: "script-src https: blob: 'unsafe-inline' 'unsafe-eval'". This is due to some site has content security policy and they don't allow below type of url :-

"blob:https://some-url-path"

Can't we implement equirectangular with blob ? Is there any road map to remove blob ?

[mpetroff]

Do you have an example that displays this behavior?

[vineetkumar1511]

I do not have test link but below are the steps using which you can reproduce this issue.

1) Open https://www.news.com.au/ 2) Open developer console and execute below snippets :-

var jsElm = document.createElement("script"); jsElm.type = "application/javascript"; jsElm.src = "https://cdnjs.cloudflare.com/ajax/libs/pannellum/2.4.1/pannellum.js"; document.body.appendChild(jsElm);

var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.id = "sdfsdf232rw"; link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'https://cdnjs.cloudflare.com/ajax/libs/pannellum/2.4.1/pannellum.css'; link.media = 'all'; head.appendChild(link);

var div=document.createElement("div") div.setAttribute("id","testDiv") div.style.width = "1000px"; div.style.height = "500px"; document.body.appendChild(div);

setTimeout(function() { pannellum.viewer(document.querySelector("#ad-out-of-page"), { type: "equirectangular", panorama: "https://massets.bonzai.ad/c2/prod/360Image/360Image_compass_dial.png", autoLoad: true, compass: true, showControls: false, hfov: 70 }) }, 2000);

You can see error after 2 seconds as I am using 2 seconds timeout. Givend url is dummy url, if you want equirectangular image then you can use this "https://d2c9r8zeb1cgbx.cloudfront.net/3a791d11-cb3a-4045-9c76-e0d176799853_v1_5.jpg?buster=0.608178875859049". But it does matter because as soon as browser find out blob:https it blocks the call.

[rosemarystanley]

I'm also getting this error. I tried loading the image with an absolute URL and a relative one. I also tried setting the crossOrigin option to use-credentials and still no change.

Refused to load the image 'blob:http://my.localhost/3d8dfcae-46ae-4b48-bc84-3e2224053234' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' 'unsafe-eval' data: *". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

[mpetroff]

After mulling over this for a while, I don't think this is a bug in Pannellum; it's a site / server configuration issue, due to a strict content security policy (CSP).

While the "fix" in #632 may prevent the error message, it introduces other issues. In order to read the XMP data, the image must be loaded via XHR, but an XHR response can't be directly used as an image. This leaves two options, creating a blob URI for the image, as is currently done, or setting the image URL to the original URL. The problem with the latter option is that it reloads the image; in practice, this will probably happen from the cache, but it's still not a good design. I'd be open to including a check for the CSP restriction that falls back to the latter option if the CSP blocks blob URIs for images, but I don't know of any easy ways to check for this from JavaScript (the only way I can think of would be to check the Content-Security-Policy header and properly parse it). Thus, I'm closing this issue.