Deploying a backend on Render causes a 'Refused to load the font' error due to Content Security Policy, how do I fix this?

Question

I deployed a backend on Render successfully, but when I go to the link the API returns a 404 error:

Refused to load the font 'data:font/truetype;charset=utf-8;base64, d09GRgABAAAAALM7AA8AAAABq0AAAAAAAACyRAAAAPcAAAHiAAAAAAAAAABHUE9TAACIDAAAIgQAAH82Ol56cUdTVUIAAKoQAAAIMwAAFD6gNKPBT1MvMgAAAdAAAABVAAAAYGbqc4pjbWFwAAAGbAAAA3wAAAU4Vch3gWN2dCAAAAwYAAAAQAAAAEAQPwNiZnBnbQAACegAAAEDAAABcwZZnDdnbHlmAAAQvAAAbJ4AAOZUwSn/MmhlYWQAAAFYAAAANgAAADYGApswaGhlYQAAAZAAAAAgAAAAJAdbBRtobXR4AAACKAAABEIAAAjwrN1ggGxvY2EAAAxYAAAEYgAABHqHyk9obWF4cAAAAbAAAAAgAAAAIARWA2ZuYW1lAAB9XAAAAoEAAAZuOd88j3Bvc3QAAH/gAAAIKgAAEi5ynk2NcHJlcAAACuwAAAEqAAACpAoaNTMAAQAAAAEAAA...STdLpgIn7fZCqSu5rDezyzyKpZz7vqhExLsEP0L+KQltJygoVYTqVM+PxDJaFaVekJvaE39RY7sTO7sCu7sbtQL3VQf92n+/WAHtRDehiopT2d6UU/BrAAS7EsK7Em67IBO/KnjVXM1dKhE3yixfOtb3pmZY70/HBUmjxmflv/BTgtM3AAeAGFUUV3wzAM/it6vowXOA1cj5nxrueojZPWynPUDv58uWO4iT+Q7pBghoLQo1A79g2VrMbK6B75jAN47FBDPU56EMfDZhxDGsfrCrqh3VC5SLURRZY7HQrWYVteKlodpgoio9vOkq8JXPbzETifDPx3LGpP54wWehazx17QCjjf5O3v49DkAG/Yfph1UIbYOhpv69k5oy1XL8G1cpkent9bGPPae7sJ96Ojb5sfFwJm1MFQTnePAla5K8HVgPDWBG5+vRbd2fwJg7xahhNv34+/Lb05R9MPTH3KQBiu2ZYkY43dmoA9tEiqcfHN+Gj2VzMA6Y+oeQ==' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

This is my app res.set:

app.use((req, res, next) => {
  res.set("Access-Control-Allow-Origin", <URL>);
  res.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
  res.set("Access-Control-Allow-Credentials", "true");
  res.set("Access-Control-Allow-Headers", "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization");
  res.set("Content-Security-Policy", "font-src *;");
  next();
});

I tried to set data-src with 'self' data:, '*'... But still appears the error. Could you help me please?

Thanks a lot!

Similar: https://stackoverflow.com/questions/50560054/refused-to-load-the-font-url-because-it-violates-the-following-content-secur — Markus, May 28 '23 at 22:39
I tried this ways before but it didn't work anything. This is my app: app.use((req, res, next) => { res.set("Access-Control-Allow-Origin", ); res.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE"); res.set("Access-Control-Allow-Credentials", "true"); res.set("Access-Control-Allow-Headers", "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization"); res.set("Content-Security-Policy", "font-src *;"); next(); }); I tried to set data-src with 'self' data:, '*'... But still appears the error. Could you help me pls? — Lechuza7, May 30 '23 at 16:14
Sorry, but this is unreadable. Please remove the code from the comments and put it into the question. — Markus, May 30 '23 at 16:22
Done! Sorry, it's my first question here, thanks for your patience. — Lechuza7, May 30 '23 at 17:26
Can you please try to provide a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example)? — Markus, Jun 07 '23 at 20:59

score 0 · Answer 1 · answered May 31 '23 at 06:52

0

Please try:

res.set("Content-Security-Policy", "font-src 'self' data:;");

Don't forget to empty the browser cache before reload.

Ref: Content Security Policy "data" not working for base64 Images in Chrome 28

answered May 31 '23 at 06:52

Markus

5,976
5
6
21

Thanks, but it didn't works... in fact I've tried this before but without emptying the browser cache, but now I tried and still not working... – Lechuza7 Jun 07 '23 at 15:56

Deploying a backend on Render causes a 'Refused to load the font' error due to Content Security Policy, how do I fix this?

1 Answers1