javascript - 加载字体时内容安全策略错误

Question

我有一个名为“fonts”的本地文件夹，其中包含 otf 字体。我使用@font-face 规则定义字体系列。

问题是，我没有加载字体，因为这个错误显示在 Chrome 控制台中:

拒绝加载字体'data:font/opentype;base64,T1RUTwAMAIAAAwBAQ0ZGINEulzEAAA94AACBwUdQT1MGggFzAACRPAAAKuxHU1VCV7A5EAAAvCgAAApeT1MvMlhzMAgAAAEwAAAAYGNtYXB8/3N7AAAJFAAABkJoZWFkAfQ0 RwAAAMwAAAA2aGhlYQeiBSYAAAEEAAAAJGhtdHhDg3HpAADGiAAACHhrZXJug42ekAAAzwAAAG6IbWF4cAIeUAAAAAEoAAAABm5hbWUW0pxRAAABkAAAB4Jwb3N0/7gAMgAAD1gAAAAgAAEAAAABAIMQhDPpXw889Q ADA+gAAAAAz37b1wAAAADPfxQX/5T+zgRLBCgAAAADAAIAAAAAAAAAAQAAA8D/EAAABGr/lP+NBEsAAQAAAAAAAAAAAAAAAAAAh4AAFAAAh4AAAAADAnwBdwAFAAQCigJYAAAASwKKAlgAAAFeADIBRAAAAAAAAAAAAAAKAAAv9AAABbAAAAAAAAAA AABIJ...cAIv/qATcAI//kATcAKQAHATcALv/kATcAMP/qATcAMv/tATcANf/qATcANv/qATcAOP/xATcAOv/1ATcAPv/1ATcAQP/1ATcAQv/1ATcASP/1ATcATP/1ATcAUv/pATcAU//kATcAW//kATcAYf/kATcAY//kATcAZ//kATcAm//pATcAnP/kATcAn//pATcAoP/kATcA的/pATcAov/kATcAo//pATcAP/kATcAqf/pATcAqv/kATcArf/pATcArv/kATcAt//1ATcAuP/tATcA6f/xATcA7f/xATcA+v/pATcA+//kATcBB//VAUIAAf+jAUIACv+/AUIAHP/uAUIAOv+jAUIAPv+jAUIAQP+jAUIAQv+jAUIASP+jAU IATP+jAUIA9v+lAUgBAv/zAUgBB//bAUgBCv/zAUgBDf/3AUoBAv/zAUoBB//bAUoBCv/pAUoBDP/3AUoBDf/3AUwBAwASAUwBB//JAUwBCv/pAVcBB//JAVgBB//J' 因为它违反了以下内容安全策略指令:“font-src-https//fonts .gstatic.com https//fonts.googleapis.com”。

Firefox/Safari 也会发生这种情况。

我将其添加到我的 index.html 中，就在“title”标签下，但也不起作用:

谁能给我一个提示，好吗？

Answer 1

更新meta标签如下解决:

<meta http-equiv="Content-Security-Policy" content="font-src data: https://fonts.gstatic.com https://fonts.googleapis.com">

这将允许通过数据方案加载字体资源。

有关内容安全策略的更多信息，请参阅:https://content-security-policy.com/