Use font files and not extern url

Gemfile

@@ -34,6 +34,7 @@ group :development, :test do
   gem 'launchy'
   gem 'mocha'
   gem 'pry-byebug'
+  gem 'rack-cors'
   gem 'rails-controller-testing'
   gem 'rails-erd'
   gem 'rspec-rails'

Gemfile.lock

@@ -214,6 +214,8 @@ GEM
       activesupport (>= 3.0.0)
     racc (1.6.2)
     rack (2.2.7)
+    rack-cors (2.0.1)
+      rack (>= 2.0.0)
     rack-oauth2 (1.21.3)
       activesupport
       attr_required
@@ -393,6 +395,7 @@ DEPENDENCIES
   pry-stack_explorer
   puma
   pundit
+  rack-cors
   rails (~> 7.0)
   rails-controller-testing
   rails-erd

config/application.rb

@@ -67,6 +67,15 @@ class Application < Rails::Application
     # Configure the default encoding used in templates for Ruby 1.9.
     config.encoding = "utf-8"
 
+    config.middleware.insert_before 0, Rack::Cors do
+      allow do
+        origins 'http://localhost:4200'
+        resource '/text-security-disc.woff2', headers: :any, methods: [:get, :post]
+        resource '/text-security-disc-compat.eot', headers: :any, methods: [:get, :post]
+        resource '/text-security-disc-compat.ttf', headers: :any, methods: [:get, :post]
+      end
+    end
+
     # https://stackoverflow.com/questions/72970170/upgrading-to-rails-6-1-6-1-causes-psychdisallowedclass-tried-to-load-unspecif
     # https://discuss.rubyonrails.org/t/cve-2022-32224-possible-rce-escalation-bug-with-serialized-columns-in-active-record/81017
     config.after_initialize do

config/initializers/content_security_policy.rb

@@ -20,8 +20,7 @@
   policy.connect_src :self, 'https://sentry.puzzle.ch'
 
   policy.font_src :self
-  policy.font_src :self, 'https://raw.githubusercontent.com' if Rails.env.development?
-
+  policy.font_src :self, :https, 'http://localhost:4200', :data if Rails.env.development?
 
   policy.script_src  :self
   policy.script_src  :self, :unsafe_eval, "http://localhost:4200" if Rails.env.development?

config/initializers/mime_types.rb

@@ -2,3 +2,7 @@
 
 # Add new mime types for use in respond_to blocks:
 # Mime::Type.register "text/richtext", :rtf
+
+Mime::Type.register "font/woff2", :woff2
+Mime::Type.register "application/vnd.ms-fontobject", :eot
+Mime::Type.register "application/x-font-ttf", :ttf

frontend/app/styles/secret-input.scss

@@ -1,13 +1,15 @@
 //  font from: https://github.com/noppa/text-security
 
 @font-face {
-  font-family: text-security-disc;
-  src: url("https://raw.githubusercontent.com/noppa/text-security/master/dist/text-security-disc.woff");
+  font-family: "text-security-disc";
+  src: url("/text-security-disc-compat.eot");
+  src: url("/text-security-disc-compat.eot?#iefix") format("embedded-opentype"),
+    url("/text-security-disc.woff2") format("woff2"),
+    url("/text-security-disc-compat.ttf") format("truetype");
 }
 
 input.secret {
   font-family: text-security-disc;
-  -webkit-text-security: disc;
 }
 
 .secret input {

frontend/config/environment.js

@@ -4,6 +4,9 @@ module.exports = function (environment) {
   let ENV = {
     modulePrefix: "frontend",
     environment,
+    contentSecurityPolicy: {
+      'font-src': "'self' http://localhost:4200"
+    },
     rootURL: "/",
     locationType: "auto",
     sentryDsn: "",