如何在 Jquery 3.4.1 & 中启用 CSP(内容安全策略)jquery-ui 1.12.1? [英] How to enable CSP(Content Security Policy) in Jquery 3.4.1 & Jquery-ui 1.12.1?

问题描述

我目前在我的网站上使用 jQuery 3.4.1 和 jQuery-UI 1.12.1(用于自动完成).我也在使用 unsafe-inline 和 unsafe-eval 我不想使用.

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.

我的标签:

<meta
    http-equiv="Content-Security-Policy"
    content="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';"
>

展开，那个content是:

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';

每当在 jQuery-UI 自动完成中发生 AJAX 调用时，它都会抛出一个错误，指出它违反了 CSP 政策.

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

我需要做什么才能使用 jQuery 在我的网站上正确启用 CSP?我不想在我的网站上使用 unsafe-eval 和 unsafe-inline.

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.

控制台错误:

推荐答案

每当 jQuery-UI 自动完成中的 AJAX 调用发生时，它都会抛出一个错误说它违反了 CSP 政策.

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

1. 向我展示此 CSP 错误的文本，我会告诉您该怎么做(首选 Chrome 控制台).

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

从 jQuery-UI 1.12.1 的 CSS 中可以看出，您的策略中需要有 img-src data:.

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

从脚本 1.12.1/jquery-ui.js 可以看出 - 它不使用不安全的 eval 调用.也许您在脚本中使用了它们.从 script-src 中删除 'unsafe-eval' 并检查控制台中引发的错误.如果没有诸如 Refused to evaluate a string as JavaScript because unsafe-eval is not an allowed 或 页面的设置阻止加载资源在 eval 之类的消息 - 你这样做不需要在 script-src 中包含unsafe-eval".

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.

.

最佳做法是忘记不安全的 HTTP: 并使用 HTTPS:.在某些情况下，Internet 提供商(在 Internet 的 RU 段中)会干扰客户端的流量并将广告注入 jquery 库.所以:

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:

• 规则 connect-src 'self' news.google.com; 应该是 connect-src 'self' https://news.google.com;代码> 因为 news.google.com 总是重定向到 HTTPS:.所有对 news.google.com 的 $ajax 请求也应该使用 https://方案.

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

与 cdn.jsdelivr.net 相同，它总是重定向到 HTTPS:因此安全规则应该是:

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

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

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

并且所有调用脚本都应该使用 HTTPS:<script src='https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js'...

and all call the scripts should be done with HTTPS: <script src='https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js'...

当您在 script-src 中仅指定方案源 https: 时 - 它会导致零保护，因为任何来源都将通过 https: 被允许.

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.

这篇关于如何在 Jquery 3.4.1 & 中启用 CSP(内容安全策略)jquery-ui 1.12.1?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！