0

I keep getting CSP violation warnings like the one below when trying different libraries to add sortable items/ drag & drop functionalities to the Chrome Extension I am building:

Refused to load the script 'https://raw.githack.com/SortableJS/Sortable/master/Sortable.js' 
because it violates the following Content Security Policy directive:
"script-src 'self' 'wasm-unsafe-eval'". 
Note that 'script-src-elem' was not explicitly set, 
so 'script-src' is used as a fallback.

The extension is using V3 of the manifest. I've got this in the configuration:

"content_security_policy": {
        "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self' 'wasm-unsafe-eval'; script-src-elem 'self' 'wasm-unsafe-eval';"
      },

Does anyone know a way to add this functionality to a Chrome Extension? I'd rather use pure JS but after having tried some of these options I continue to get unsafe-eval related errors in Chrome.

Like the one below for example which is very simple but seems to be using some sort of eval variation and Chrome won't let me use this for my extension:
(I'll use JSFiddle links so as not to burden you visually with too much code)

https://jsfiddle.net/jqzzy/028mw6v3/50/

Works ok but not when I add this to my Extension.

Also tried this one with "SortableJS" library and I get the same unsafe-eval problem:

https://jsfiddle.net/jqzzy/981Lygfx/11/

Does this mean that sortable/drag & drop functions have to absolutely use eval or its variations?

Verminous
  • 490
  • 3
  • 14
  • 1
    All code must be included within the extension in ManifestV3, not loaded from a server. – wOxxOm Nov 11 '22 at 15:11
  • In that case shouldn't this https://jsfiddle.net/jqzzy/028mw6v3/49/ work with the extension since it is not loading any code from a server from what I see. Also I tried downloading all the SortableJS code and loading from local to run on the extension and still I get CSP issues. There must be something ```eval``` related being used with this libraries no? – Verminous Nov 11 '22 at 15:55
  • 1
    Inline scripts can't be used either. Use a separate js file: [onclick or inline script isn't working in extension](https://stackoverflow.com/q/13591983) – wOxxOm Nov 11 '22 at 16:09
  • Ok @wOxxOm so that worked with the first option. So now I am trying again with "SortableJS" library to get the code locally and via file with no inline code. I am getting this: ```Uncaught ReferenceError: Sortable is not defined``` but actually ```Sortable``` is defined in the ```SortableJS.js``` file. I don't understand. Chrome won't recognize this function even if I open the file HTML directly via Browser and not via extension. – Verminous Nov 11 '22 at 16:50
  • Solved it I guess. Added ```window.addEventListener("load", function () { ``` and I also added the ``` – Verminous Nov 11 '22 at 16:55

0 Answers0