Content Security Policy error on redoc

[unional]

When I run a page on php using redoc@2.0.0-rc.0, It errors with the following:

Something went wrong...
Failed to construct 'Worker': Access to the script at 'blob:http://<host>/53f69b15-64aa-4228-ab20-4271b18d44f8' is denied by the document's Content Security Policy.
Stack trace
Error: Failed to construct 'Worker': Access to the script at 'blob:http://<host>/53f69b15-64aa-4228-ab20-4271b18d44f8' is denied by the document's Content Security Policy.
    at new e.exports (http://<host>/doc/redoc.standalone.js:84:98978)
    at new e (http://<host>/doc/redoc.standalone.js:107:56868)
    at new e (http://<host>/doc/redoc.standalone.js:113:26422)
    at t.makeStore (http://<host>/doc/redoc.standalone.js:107:60569)
    at t.render (http://<host>/doc/redoc.standalone.js:107:61475)
    at ci (http://<host>/doc/redoc.standalone.js:68:59752)
    at li (http://<host>/doc/redoc.standalone.js:68:59547)
    at di (http://<host>/doc/redoc.standalone.js:68:63224)
    at Vi (http://<host>/doc/redoc.standalone.js:68:78336)
    at Qi (http://<host>/doc/redoc.standalone.js:68:78713)

ReDoc Version: 2.0.0-rc.0 
Commit: a47a4b8

The problem is caused by this:

var e=new Worker(URL.createObjectURL(new Blob(['/*!\n * ReDoc - OpenAPI/Swagger-generated API Reference...

Source:

This might be a security concern that should be addressed.

EDIT: source is incorrect. Looking up the right code.

[unional]

It seems to be introduced by using webpack.BannerPlugin() in the webpack.config.ts.

[unional]

There is another one, but it seems like just bundling lunr. scratching my head over this one.

e.exports=function(){var e=new Worker(URL.createObjectURL(new Blob(['!function(e){var t={};function r(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,r),i.l=!0,i.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)r.d(n,i,function(t){return e[t]}.bind(null,i));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=69)}([function(e,t,r){var n=r(24)("wks"),i=r(17),o=r(1).Symbol,s="function"==typeof o;(e.exports=function(e){return n[e]||(n[e]=s&&o[e]||(s?o:i)("Symbol."+e))}).store=n},function(e,t){var r=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=r)},function(e,t,r){var n,i;\n/**\n * lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 2.3.5\n * Copyright (C) 2018 Oliver Nightingale\n * @license MIT\n */!function(){var o,s,u,a,c,l,f,h,d,p,y,v,m,g,x,w,S,b,k,P,Q,E,L,_,T,O,j=function(e){var t=new j.Builder;return t.pipeline.add(j.trimmer,j.stopWordFilter,j.stemmer),t.searchPipeline.add(j.stemmer),e.call(t,t),t.build()};j.version="2.3.5"\n/*!\n * lunr.utils\n * Copyright (C) 2018 Oliver Nightingale\n */,j.utils={},j.utils.warn=(o=this,function(e){o.console&&console.warn&&console.warn(e)})

[blackat]

It happens to me as well when I published the webapp under https.

[RomanHotsiy]

This looks strange.
All works fine here even with https: https://rebilly.github.io/ReDoc/

Maybe some specific header is set which leads to this behavior?

Would be great, if you guys can investigate it. Thanks

[unional]

I think the problem might come from webpack, and to "fix" it, you can add the following to your header:

Content-Security-Policy: worker-src 'self' blob:

But I still believe this is a security concern, but I'll let other people chime in.

[MrFix93]

@unional Any update already? I run into the exact same issue.

[unional]

No update. I'm still adding that header to get around this problem.

[RomanHotsiy]

From MDN:

Workers are in general not governed by the content security policy of the document (or parent worker) that created them. To specify a content security policy for the worker, set a Content-Security-Policy response header for the request which requested the worker script itself.

The exception to this is if the worker script's origin is a globally unique identifier (for example, if its URL has a scheme of data or blob). In this case, the worker does inherit the content security policy of the document or worker that created it.

Looks like your web server sets some specific CSP headers to Redoc javascript file which are then inherited by WebWorker preventing it to work.
There is nothing I can do on my side to fix that.

The proper solution is either to remove CSP headers from Redoc js file or to add

Content-Security-Policy: worker-src 'self' blob:

as @unional already figured out.

[vantony-dev]

I have tried the above solution which is adding "Content-Security-Policy: worker-src 'self' blob:" and somehow the server has some CSP rules which is getting the precedence.

As per @RomanHotsiy comment i should the CSP header from ReDoc JS file. But where it is ? I can't see any predefined CSP rules inside the ReDoc JS files.
"The proper solution is either to remove CSP headers from Redoc js file or to add"