Map tiles do not load due to Content Security Policy

kaechele commented 1 year ago

Bug report

Describe the bug

When trying to view the map the OpenStreetMap tiles do not load due to being blocked by strapi's default Content Security Policy.

Steps to reproduce the behavior

Click on "Map" button below coordinates
The map shows only a grey background, no tiles

Expected behavior

Tiles are shown

Screenshots

N/A

Code snippets

The config/middlewares.ts needs to be adjusted to allow the browser to load the tiles from an external source. This configuration works for me:

export default [
  "strapi::errors",
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": [
            "'self'",
            "data:",
            "blob:",
            "https://market-assets.strapi.io",
            "https://tile.openstreetmap.org",
            "https://a.tile.openstreetmap.org",
            "https://b.tile.openstreetmap.org",
            "https://c.tile.openstreetmap.org",
          ],
          "media-src": ["'self'", "data:", "blob:"],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  "strapi::cors",
  "strapi::poweredBy",
  "strapi::logger",
  "strapi::query",
  "strapi::body",
  "strapi::session",
  "strapi::favicon",
  "strapi::public",
];

System

Node.js version: 18.17.1
NPM version: 9.6.7
Strapi version: 4.13.7
Database: PostgreSQL 16 - PostGIS 3.4
Operating system: Fedora 38

Additional context

N/A

omikulcik commented 12 months ago

Hello @kaechele, yes you are right. I will put this into readme. Thank you!