CODEWITHSUNDEEP
content-security-policystrapi
JP Damstra
JP Damstra

Reputation: 613

Resolve Strapi.io Content Security Policy Error

The situation so far:
I've got a Strapi instance running on default port 1337. DNS is correctly set up to navigate traffic from cms.mysite.com to the public IP address of the server and an IIS website is configured with a reverse proxy to direct traffic from cms.mysite.com to port 1337. Strapi itself is instructed to fire up on server "power on" via a scheduled task and cmd command. I've also set up an SSL certificate such that secure communication with https://cms.mysite.com is possible.

The problem:
When I navigate to https://cms.mysite.com from a browser outside of the server, I correctly get the "home" page for the headless CMS.

enter image description here

But if I click "Open the administration", I'm hit with a CSP error

enter image description here

enter image description here

I'm sure I'm missing a step. I have not configured anything specifically after following the official Hands-on tutorial. I feel like it's something to do with the security middleware, specifically security header with relation to Content Security Policy, but it's difficult to know exactly what to do with the config/middleware.js file.

A little help is mighty appreciated.

Edit: I feel like this is actually a reverse proxy issue since if I replace localhost in the error https://localhost:1337/admin/project-type with https://cms.mysite.com/admin/project-type I get a valid response:
enter image description here

Upvotes: 3

Views: 5467

Answers (3)

Jonathan Nolasco Barrientos
Jonathan Nolasco Barrientos

Reputation: 2327

The solution for was downgrade the strapi version, I change "@strapi/strapi": "4.12.4", to "@strapi/strapi": "4.12.1",. You can check this theard: Can't load admin panel in 4.12.4 on the public internet · Issue #17634 · strapi/strapi · GitHub

Upvotes: 0

Viktor T.
Viktor T.

Reputation: 91

Ran into the same issue.

First, changed the default security middleware in /config/middlewares.js

// ...
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'http:', 'https:'],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
// ...

After that I found out that admin assets where still loading from localhost:1337.
So, after looking at this issue on GH, I set the url param in config/server.js. Seems to have helped.

Hope this helps!

P.S. And don't forget to re-build everything after making changes to the configs.

Upvotes: 9

dungreact
dungreact

Reputation: 544

If you need to config CORS, here is an example:

//middlewares.js
module.exports = [
  'strapi::errors',
  'strapi::security',
  'strapi::poweredBy',
  {
    name: 'strapi::cors',
    config: {
      enabled: true,
      headers: '*',
      origin: ['http://localhost:1337', 'http://example2']
    }
  },
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
];

Upvotes: 0

Related Questions