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

admin管理员组

文章数量:1429432

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

My <meta/> tag:

<meta
    http-equiv="Content-Security-Policy"
    content="script-src 'self' 'unsafe-eval' https: cdnjs.cloudflare code.highcharts stackpath.bootstrapcdn cdn.jsdelivr code.jquery 'unsafe-inline'; connect-src 'self' news.google; worker-src 'self'; manifest-src 'self';"
>

Expanded, that content is:

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

connect-src
    'self'
    news.google;

worker-src
    'self';

manifest-src
    'self';

Whenever the AJAX call happens in jQuery-UI autoplete, 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:

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

My <meta/> tag:

<meta
    http-equiv="Content-Security-Policy"
    content="script-src 'self' 'unsafe-eval' https: cdnjs.cloudflare. code.highcharts. stackpath.bootstrapcdn. cdn.jsdelivr code.jquery. 'unsafe-inline'; connect-src 'self' news.google.; worker-src 'self'; manifest-src 'self';"
>

Expanded, that content is:

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

connect-src
    'self'
    news.google.;

worker-src
    'self';

manifest-src
    'self';

Whenever the AJAX call happens in jQuery-UI autoplete, 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:

• javascript
• jquery
• jquery-ui-autoplete
• content-security-policy

Share Improve this question Follow edited Sep 28, 2020 at 12:14 Aghilan B asked Sep 26, 2020 at 18:11 Aghilan BAghilan B 55311 gold badge88 silver badges1919 bronze badges 5

• 1 Pretty sure this would e down to server configuration, which you have not told us about. What is serving your content? – zero298 Commented Sep 26, 2020 at 18:26
• Actually, I'm not configured CSP in my webserver. I'm using meta tag for CSP in my HTML file. As you asked apache is serving my contents. – Aghilan B Commented Sep 26, 2020 at 18:51
• Then add the meta tag here as an edit. – zero298 Commented Sep 26, 2020 at 18:56
• I have added. please check it. – Aghilan B Commented Sep 26, 2020 at 18:58
• question is correct but no one provided the useful answer yet. Can anyone please tell how to use "nonce" attribute with example to make jquery.js work? – Abhishek Singh Commented Jul 13, 2021 at 7:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

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

1. Show me the text of this CSP error and I'll say you what to do (Chrome console is prefer).

2. As can be seen from CSS for jQuery-UI 1.12.1 you need to have img-src data: in your policy.

3. 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:

• The rule connect-src 'self' news.google.; should be connect-src 'self' https://news.google.; since news.google. always retirects to HTTPS:. All $ajax-request to news.google. should use the https:// scheme too.

• the same is with cdn.jsdelivr, it always redirects to HTTPS: Therefore safe rules should be:

  script-src 'self' 'unsafe-eval' https://cdnjs.cloudflare. https://code.highcharts. https://stackpath.bootstrapcdn. https://cdn.jsdelivr https://code.jquery.

and all call the scripts should be done with HTTPS: <script src='https://cdn.jsdelivr/npm/[email protected]/dist/jquery.min.js'...

When you specify just scheme-source https: in the script-src - it leads to zero-protection since any sources will be allowed via https:.

This additionally helps to avoid problems of mixed content blocking.

本文标签： javascriptHow to enable CSP(Content Security Policy) in Jquery 341 amp Jqueryui 1121Stack Overflow