javascript - 如何在 Jquery 3.4.1 和 Jquery-ui 1.12.1 中启用 CSP(内容安全策略)？

Question

我目前正在使用 jQuery 3.4.1 和 jQuery-UI 1.12.1 (用于自动完成)在我的网站上。我也在使用 unsafe-inline和 unsafe-eval我不想使用。
我的 <meta/>标签:

<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 策略。
我需要做什么才能使用 jQuery 在我的网站上正确启用 CSP？我不想使用 unsafe-eval和 unsafe-inline在我的网站上。
控制台错误:

Answer 1

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

告诉我这个 CSP 错误的文本，我会告诉你该怎么做(Chrome 控制台是首选)。

从 jQuery-UI 1.12.1 的 CSS 可以看出，您需要拥有 img-src data:在您的保单中。

从脚本 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 这样的消息或 the page's settings blocked the loading of a resource at eval - 您不需要在 script-src 中有“unsafe-eval”。
.

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

规则 connect-src 'self' news.google.com;应该是 connect-src 'self' https://news.google.com;因为 news.google.com 总是退回到 HTTPS:。所有对 news.google.com 的 $ajax-request 也应该使用 https://方案。

cdn.jsdelivr.net 也是如此，它总是重定向到 HTTPS:
因此，安全规则应该是:
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'...当您仅指定方案源 https:在 script-src - 它导致零保护，因为任何来源都将通过 https: 被允许。
这还有助于避免混合内容阻塞的问题。