将 google 字体 (fonts.googleapis.com) 添加到 CSP 标头

2024-02-18

我在 gitHub 页面上托管一个个人项目,并使用 cloudflare 强制执行 https。现在我想实施 CSP 政策。

我尝试将元标记添加到页面的头部:

<meta HTTP-EQUIV='Content-Security-Policy' CONTENT="default-src 'self' *.fonts.googleapis.com/* *.cloudflare.com/* *.fonts.googleapis.com/*;">

但我收到以下错误:

拒绝加载样式表 'https://fonts.googleapis.com/icon?family=Material+Icons https://fonts.googleapis.com/icon?family=Material+Icons' 因为它 违反以下内容安全策略指令:“default-src '自己'.fonts.googleapis.com/ .cloudflare.com/ .fonts.googleapis.com/”。请注意,未显式设置“style-src”,因此使用“default-src”作为后备。

这是我包含的脚本:

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans|Roboto" rel="stylesheet">

不会设置*.fonts.googleapis.com/*允许页面中的所有内容?

由于这是我第一次设置 CSP,这是为 github 页面设置 CSP 的正确方法吗?我还没有找到任何关于此的读物。


设置 *.fonts.googleapis.com/* 是否不允许页面中的所有内容?

虽然这很直观,但答案是no.

看看还不错的HTML5rocks 内容安全策略简介 https://www.html5rocks.com/en/tutorials/security/content-security-policy/关于通配符的主题(部分实施细节 https://www.html5rocks.com/en/tutorials/security/content-security-policy/#implementation-details):

接受通配符,但仅作为方案、端口或主机名的最左边位置: *://*.example.com:* 将匹配 example.com 的所有子域(但不是 example.com 本身),在任何端口上使用任何方案。

因此,这两种字体的工作 CSP 可能如下所示:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.googleapis.com/ https://fonts.gstatic.com/ 'unsafe-inline';">

注1:最好使用相应的CSP 指令 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#Directives。在你的情况下,你应该使用font-src and style-src像这样:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' https://fonts.gstatic.com/; style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline';">

使用相应指令的优点是您的 CSP 现在变得非常严格。例如,你不允许'unsafe-inline'不再需要脚本源。这意味着现在禁止内联 JavaScript。也禁止从以下位置加载脚本https://fonts.gstatic.com/ https://fonts.gstatic.com/,这是之前允许的。等等...


注意2:你可以去掉'unsafe-inline'通过使用哈希或随机数来完全关键字。我无法在这个例子中完成这项工作,但如果您有兴趣,请看一下HTML5rocks 简介 https://www.html5rocks.com/en/tutorials/security/content-security-policy/#if-you-absolutely-must-use-it again.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 google 字体 (fonts.googleapis.com) 添加到 CSP 标头 的相关文章

随机推荐

  • JavaScript - 替换字符串中的方括号

    我有一个简单的字符串并尝试转换 样本 to sample 例如 var string Completely engineer client based strategic theme areas before cross media tec
  • 任何人都有一些用于 ASP.NET MVC 的下拉日期选择器

    有人知道我在哪里可以找到 html 帮助器或将生成由 3 个下拉列表组成的日期选择器的东西吗 这是我的小帮手 我相信 这本身就是解释性的 可以调整以安排下拉列表的顺序 月 日 年或日 月 年 如果您使用的是 NET 4 则可以为名称添加默认
  • 如何将 jQuery 元素选择应用于字符串变量

    我将一些 html 提取到字符串 var 然后想在该字符串上使用 jQuery 元素选择 这可能吗 例如 HTML div class message This is a message Click a class link href ex
  • 将行计数传递给 Oracle 中的列[重复]

    这个问题在这里已经有答案了 我有一张没有 ID 的桌子 所以我想添加一个新列 其总行数为 1 我在表中打开了一个新列 但我不知道如何用行数填充它 我在互联网上搜索 但找不到解决我的问题的解决方案 你能告诉我该怎么做吗 提前致谢 您可以执行此
  • 仅在行尾显示为菱形问号的字符(Python>文本)

    我正在开发一个 Python 文件 该文件输入一个包含日语字符 UTF 8 的文本文件 获取一些文本 并将其写入一个新的 UTF 8 文本文件 我遇到的问题是 由于某种原因 每当日语字符 出现在原始输入文件中的行尾时 它就会在输出文件中显示
  • jQuery UI 滑块与光滑轮播的干扰

    拖动手势干扰了 jQuery UI 中的滑块和光滑的轮播插件 http kenwheeler github io slick 也是 jQuery 看我的例子here http jsfiddle net 65wtmyrb 1 HTML div
  • 当页面滚动并有某个位置时执行某些操作

    我在页面滚动方面遇到了一些问题 当我向下滚动页面并且窗口距顶部位置 100px 时 我想更改一些 css 这是我的代码 非常感谢您的帮助 document ready function window scroll function if w
  • 使用 XAML 和 C# 为 Windows Phone 8 应用程序设置计时器

    我正在开发 Windows Phone 8 游戏应用程序 我需要将倒计时功能添加到我的应用程序中 就像应用程序启动时一样 定时器值显示 60 59 58 0 当 0 到达时显示消息 超时 我在谷歌搜索但我不知道 可能是我没有以正确的方式搜索
  • Kibana - 如何导出搜索结果

    我们最近将集中式日志记录从 Splunk 转移到 ELK 解决方案 并且我们需要导出搜索结果 有没有办法在 Kibana 4 1 中做到这一点 如果有的话 也不是很明显 Thanks 这是一个旧帖子 但我认为仍然有人仍在寻找一个好的答案 您
  • python2 与 python3 中的地图[重复]

    这个问题在这里已经有答案了 我是一个初学者 python 用户 我在 python2 7 和 python3 4 3 上运行了以下代码 import matplotlib pyplot as plt import numpy as np i
  • WPF 文本块,文本属性中的换行符

    有没有办法拥有 n在 a 中换行TextBlock
  • 如何创建文件并从 html 页面附加数据?

    我的桌面上有一个 html 文件 需要一些输入 我将如何将该输入写入计算机上的文件中 我是否必须使用另一种语言来执行此操作 即 python 或 javascript 以及我将如何执行此操作 相关说明 有什么方法可以让 javascript
  • wordpress is_home() || is_index() 可能吗?

    我在 header php 中有一个测试 看看我们是否在家显示英雄 div class inner clearfix div 但是当用户登陆index php时 英雄并没有被显示 显然没有 is index 条件 有谁知道我如何测试它的主页
  • 如何使用 Json.Net (newtonsoft) 连接两个 Json 对象[重复]

    这个问题在这里已经有答案了 我想将一些 JSON 对象连接成一个 JSON 对象 如何使用 NewtonSoft 的 JSON 包来做到这一点 Use JContainer Merge 将 JSON 对象组合在一起的逻辑相当简单 名称 值被
  • 在哪里可以找到 Perl 编程语言的形式语法?

    我知道 Perl 语法是不明确的 并且它的消歧是不平凡的 有时涉及在编译阶段执行代码 http www modernperlbooks com mt 2009 08 on parsing perl 5 html 无论如何 Perl 是否有正
  • Firestore 安全规则 - 查询集合时检查文档字段

    当查询文档集合并使用安全规则检查文档上的字段以允许读取时 我得到 Uncaught Error in onSnapshot Error Missing or insufficient permissions 我的查询 firebase fi
  • 使用反射获取 Kotlin 中带注释的函数列表

    我是 Kotlin 新手 我想做以下事情 用注释来注释一些函数 例如 可执行文件 运行时 获取带有该注解的所有函数 检查注释上的属性 如果它与条件匹配 则调用该函数 我有以下代码 annotation class Executable va
  • 使用模板时初始化数组

    假设我有课Foo 以下工作正常 class Foo public const int bar Foo bar new int 2 1 2 但是 我尝试稍微更改一下以使用模板 template
  • 在 Gulp 任务中获取相对源/目标

    假设我有一个文件 Users me app src scripts foo js 我设置了一个 gulp 任务 将该文件写入 Users me app dist scripts foo js gulp src src scripts foo
  • 将 google 字体 (fonts.googleapis.com) 添加到 CSP 标头

    我在 gitHub 页面上托管一个个人项目 并使用 cloudflare 强制执行 https 现在我想实施 CSP 政策 我尝试将元标记添加到页面的头部 但我收到以下错误 拒绝加载样式表 https fonts googleapis co