How to enable CSP(Content Security Policy) in Jquery 3.4.1 & Jquery-ui 1.12.1?

Question

I'm currently using jQuery 3.4.1 and jQuery-UI 1.12.1 (for autocomplete) on my website. I'm also using unsafe-inline and unsafe-eval which I don't want to use.

My tag:

Expanded, that content is:

script-src
    'self'
    'unsafe-eval' 
    https: 
    cdnjs.cloudflare.com 
    code.highcharts.com 
    stackpath.bootstrapcdn.com 
    cdn.jsdelivr.net 
    code.jquery.com
    'unsafe-inline'; 

connect-src
    'self'
    news.google.com;

worker-src
    'self';

manifest-src
    'self';

Whenever the AJAX call happens in jQuery-UI autocomplete, it throws an error saying it violates CSP policy.

What do I need to do to properly enable CSP on my website with jQuery? I don't want to use unsafe-eval and unsafe-inline on my website.

Console Error:

user_12865944 · Answer

Whenever the AJAX call happens in jQuery-UI autocomplete, it throws an error saying it violates CSP policy.

Show me the text of this CSP error and I'll say you what to do (Chrome console is prefer).
As can be seen from CSS for jQuery-UI 1.12.1 you need to have img-src data: in your policy.
As can be seen from the script 1.12.1/jquery-ui.js - it does not use unsafe eval calls. Maybe you use those in your scripts. Remove 'unsafe-eval' from the script-src and check errors raised in the console. If there is not messages like Refused to evaluate a string as JavaScript because unsafe-eval is not an allowed or the page's settings blocked the loading of a resource at eval - you do not need to have 'unsafe-eval' in the script-src.

.

The best practice is to forget about insecure HTTP: and use HTTPS:. There were cases when Internet providers (in the RU-segment of the Internet) interfered with the client's traffic and injects ads into jquery lib. So:

and all call the scripts should be done with HTTPS:

How to enable CSP(Content Security Policy) in Jquery 3.4.1 & Jquery-ui 1.12.1?

1 Answers