时间戳

首页 > 解决方案 > 无法加载 jQuery，因为它违反了内容安全策略

javascript - 无法加载 jQuery，因为它违反了内容安全策略

问题描述

我在 node + express 上写了一个服务器。准备页面以进行渲染，使用 Jquery 在 JS 中编写脚本。但是 Jquery 由于某种原因无法加载页面。这是一个常见的情况，在我在 WebSockets 上编写 ToDo 应用程序之前，我遇到了同样的错误。问题是什么以及如何解决？请帮忙。错误：拒绝加载脚本'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'，因为它违反了以下内容安全策略指令：“script-src'self '”。请注意，'script-src-elem' 没有明确设置，因此 'script-src' 用作后备。

我尝试从其他来源添加不同的元标记，但没有帮助。

标签： javascriptnode.jsexpresscontent-security-policy

解决方案

内容安全策略是一个相当大的话题，它让我迷茫了一段时间。

我最终使用了helmet，其中包括定义内容安全策略设置的能力，如下所示：

app.use(
    helmet({
        contentSecurityPolicy: {
            directives: {
                defaultSrc: ["'self'"],
                scriptSrc: ["'self'", "https://maps.googleapis.com", "https://www.google.com", "https://www.gstatic.com"],
                connectSrc: ["'self'", "https://some-domain.com", "https://some.other.domain.com"],
                styleSrc: ["'self'", "fonts.googleapis.com", "'unsafe-inline'"],
                fontSrc: ["'self'", "fonts.gstatic.com"],
                imgSrc: ["'self'", "https://maps.gstatic.com", "https://maps.googleapis.com", "data:", "https://another-domain.com"],
                frameSrc: ["'self'", "https://www.google.com"]
            }
        },
    })
);

我发现使用这种语法定义规则的能力对我来说更容易，并帮助我更多地理解内容安全策略。

在express.js 安全文档和这个节点最佳实践博客中提到了头盔。

我在此处发布的答案中记录了针对我的特定情况的更多背景信息。

推荐阅读