fix: add missing link to Content Security Policy

[romanblanco]

Validation indicator has problems loading (see #174 (comment))

Problem

Link to validator.swagger.io is missing in Content Security Policy for UI middleware (merged in #263)

Solution

Add link into CSP.

This concerns this parts of the OpenAPI Specification:

--

The changes I made are compatible with:

• OAS2
• OAS3
• OAS3.1

Related Issues

• Content Security Policy for UI middleware #174
• Override Content Security Policy for Swagger UI Compat #263

Checklist

• Added tests
• Changelog updated
• Added documentation to README.md

Steps to Test or Reproduce

[romanblanco]

@keniiig21, can you help verify this fixes your issue?

[ndbroadbent]

Thanks @romanblanco, I was just about to add this and open a PR. I have an integration test that loads the swagger UI page and my tests were failing with a CSP error. This looks like it will fix the issue for me. Thanks!

[ndbroadbent]

This CSP is also causing me a lot of other problems, since the page won't be able to connect to my API endpoints. Could we add a way to configure it and add our own domains?

[richardonrails]

Same issue here... the "Try it out" functionality doesn't work at all for me due to CSP issues. It's supposed to just connect to my api. subdomain.

I get both of these issues:

Refused to load the image 'https://validator.swagger.io/validator?url=...' because it violates the following Content Security Policy directive: "img-src 'self' data:".

Refused to connect to 'https://api....' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

[richardonrails]

In case others are waiting on a full fix, here's how I got everything working for my Rails app, I added the following to workaround the issue:

# config/initializers/rswag_ui_csp_monkeypatch.rb
# Monkeypatch https://github.com/rswag/rswag/blob/master/rswag-ui/lib/rswag/ui/middleware.rb
# due to issues described in https://github.com/rswag/rswag/pull/619/files
module Rswag
  module Ui
    class Middleware
      # ORIGINAL:
      # def csp
      #   <<~POLICY.gsub "\n", ' '
      #     default-src 'self';
      #     img-src 'self' data:;
      #     font-src 'self' https://fonts.gstatic.com;
      #     style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
      #     script-src 'self' 'unsafe-inline';
      #   POLICY
      # end

      def csp
        <<~POLICY.gsub "\n", ' '
          default-src 'self';
          img-src 'self' data: https://validator.swagger.io;
          font-src 'self' https://fonts.gstatic.com;
          style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
          script-src 'self' 'unsafe-inline';
          connect-src 'self' https://api.MYSITE.com https://api.MYSITE.test;
        POLICY
      end
    end
  end
end

[gobijan]

Just wanted to create a similar PR.
Note that it's more performant to use tr instead of gsub:

# Monkey Patch CSP to allow Swagger UI to load external fonts and images
module Rswag
  module Ui
    class Middleware
      private
        def csp
          <<~POLICY.tr "\n", ' '
          default-src 'self';
          img-src 'self' data: https://validator.swagger.io;
          font-src 'self' https://fonts.gstatic.com;
          style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
          script-src 'self' 'unsafe-inline';
          connect-src 'self' https://api.MYSITE.com https://api.MYSITE.test;
          POLICY
        end
    end
  end
end

[romanblanco]

This CSP is also causing me a lot of other problems, since the page won't be able to connect to my API endpoints. Could we add a way to configure it and add our own domains?

@ndbroadbent, would you create a separate PR to address the configuration of connect-src, or create new issue to track this, please.