yopass-server CSP for font-src needs to have data:

[piraces]

I have been trying to spin up my own instance of yopass with the Docker image in DockerHub.

When I access the instance the CSP emitted by the server is the following:

Content-Security-Policy: default-src 'self'; font-src 'self'; form-action 'self'; frame-ancestors 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'

The problem resides within font-src... Taking a look into the devtools console it looks like the following:

Taking a look at the CSS file that loads fonts it looks like the following:

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-display: swap;
    font-weight: 300;
    src: url(./roboto-cyrillic-ext-300-normal-435e4b7f.woff2) format("woff2"), url(./roboto-cyrillic-ext-300-normal-5e06c977.woff) format("woff");
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-display: swap;
    font-weight: 300;
    src: url(./roboto-cyrillic-300-normal-47aa3bfa.woff2) format("woff2"), url(./roboto-cyrillic-300-normal-c07952fe.woff) format("woff");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-display: swap;
    font-weight: 300;
    src: url(data:font/woff2;base64,d09GMgABAAAAAAXIABIAAAAACfAAAAVrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGiYbIBw2BmAANAhYCYM8EQwKg3yDWwsQABIUATYCJAMcBCAFgnwHIAyCOhuKCFFUkNIAfhzkZNGn0qdP43KKULZY+sdzG0Q8m/mz8ICIX02oaFIVOdFc1ZzS76IBcWPjIIKlGKNV/3O6DmGQY/0cOocGnZS5fphLIQxybKVfXZEOY7haU7u7F7IfFUso/CdW3X0AsQAwPhW2Tv1UAStAFdXxNaLOVQhbV3MjxjWbYEg6T29vAH0LBI0IAFAOwUQQBA0IASEEECBAgjJIz94DRxICQAF43hlrbeqi1KrNWDS7iJq5s7MLu6lo2twSDwB8MeX1ukpLCgOMw0YLkOr9kP4yOQFmBnaVs6/PDelD1x3k7zLJIKcPa9jICQDV3nCwsdHToL5UBh0xSWGjAuGt7HnRX/rR3QgADckz3lSjnWSwElt5isGm6u0xoExmKmW0I8S8LOHMARJ6DYKqPWXUNmKGQxmzAmXNh4hpE0hYCsN8GxMgAKTK8A9lX+RjAvHOUAnfr08nEpIi0nsFmSqhpSANhYSeIg96Ha/FaUMP+9Fv9bA92s1XUHVeYvNR68e4DIERvCcwkgW6mthy89qYnIRKxVT+MQ4VOiRhB1Fc/hJGqqyu121wk7FSxdBV2XohSOOhBgkPxcWXl5x5TxG3T/vwjcHKmw1L2pcl3vZ41zJm3GMz008LrPS52KOW6UEeOjUQ3gFd+9Dr6Fpa2diNrwySMeOd17yJTSpKwp8qt1krwiDMfCCFhtogiMn7hVJ+PftGjxH87Wopy8DHbWSbp6H7O2bIo9beHti3u0IWr/zSfjiFrp/9ZA3YT1oqtgvJuPKpWAVBw4fmeUQBsACIAH6gEzCTw5D5cwxogqYrKHf4V8Qipj8eWRJduCSvwFc4MVoghZElK9/6KLD5C11Wvfvpto/fHjVyzTuBzW9prH47uOVdfcmEIGNnfJDXRw194w2p/xiG85iePRHDiq/uNf/H4IJPT+kyaaNM0tODH9n09OYmcuaS166o9f4ntzaXs0M5taWe9sjiqPV9gxef/alh6KD+Y+MXXv66YbBv2dd2r+u0suwDLfv832/WNFkyoY/0rzV8zdDG1EX1BgsjUxs0ILPG+85obrzkhmLxeKKdE4o5vBQxk/mvDL+EQ693tCaVb2rVOo8jEAORgas01GXXCDUW8y07gffcEKkJn6XFnMh7TZu5qlp1B5XJegAGdUFUqM5xgrGbWeIEkmNrvFX5N4CSVWo0bYZ03rFecqwIBIRr8o4yUJuNlyo6RpMKNRFYQkAofjkgQMhvKtBM3QQQQKuVWDf4wowp0Y6/+yr6AHjsp3hjgNdl+Kf/2P+/7q/kmwP40QAQsIoyIfC3+cfO9PJXQhj8LH0rM10pv8AoYFnuYEo5mTWYrsUOyjGOgQAQAQ1tNiYC+MihI8oPTMbaLlRgsl0jwvxJfW9SwW5Ql7UJE9rLz40w0iP0kFZqkdny5cozl01zmtJsNNv0keaQimS791NihsaJbiwW5YYrU3OYz2abI9ts82WbqTHDpU2XNleazUCFcnpjrnmKTAOONs82R36q5A7YeK0Fbehwo5Nt8skbKfPGuUq1p4mzBV/XmGlKTTNDnmyNSZstVxOK5JshW4k5ss3RhIH66aGXwUbopdHzf6gpOgB4BWZqFzqhpEMSV0JaUtywRA+4M9y+aYNqCXxJ7pTicb2aV11uuVNbnju0bbHq86cOaG1Va2YObt80+rSXCXiYuxZMbF8rZ+k9fMO6t6xT3sPfrkntSrFc4GwumNMtdGptbv/UMdxIxEo6/IGvd52EzHGHBsa57kooHcxzu1Tik1NAK6CJca47hNK0g26QB9VDKpqH8wQK0WrSeBqCUlbJHwHVm3PdKUY76EXyEl3OSm4TO5EGt2Z9mQMAAA==) format("woff2"), url(data:font/woff;base64,d09GRgABAAAAAATkAA4AAAAABWQAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABRAAAAB8AAAAmAEYABkdQT1MAAAFkAAAAIAAAACBEcExrR1NVQgAAAYQAAAA2AAAANpMNggRPUy8yAAABvAAAAE0AAABgku/g4WNtYXAAAAIMAAAAKQAAADQAER+gZ2FzcAAAAjgAAAAMAAAADAAIABNnbHlmAAACRAAAAREAAAEUGjc/4GhlYWQAAANYAAAANgAAADb8WdJpaGhlYQAAA5AAAAAfAAAAJAqpBZBobXR4AAADsAAAABwAAAAcE07/w2xvY2EAAAPMAAAAEAAAABAA0AE8bWF4cAAAA9wAAAAgAAAAIAI3A1xuYW1lAAAD/AAAANEAAAF8Gwg553Bvc3QAAATQAAAAEwAAACD/bQBkeNpjYGRgYuBjgAAxII8NiEGQCcjnAWEgmwEABhIATQAAAQAAAAoAEgAUAAFERkxUAAwAAAAAAAQAAAAA//8AAAABAAAACgAkACYABERGTFQAHmN5cmwAImdyZWsAImxhdG4AIgAAAAAACAAAAAAAAAAA//8AAAAAeNpjYGbJZ9RhYGVgYJ3FaszAwCgPoZkvMqQxMTAwADEUODCgAnd/f3cGB3lfeV82hn8MDGnss5gYFBgY54PkWKxYNzAoACEzAMRwCjwAAAB42mNgYGACYmYgFgGSjGCahUEBSLMAIZAv7/v/P4R8sBMszwAAVmAGzQAAAAABAAIACAAC//8AD3jaDcwBRANRGAfw//e99zppau/qGohum5kC7dpAAlQKRgC1pABCoFIjSkoFIQHIQsAABKEpGbUhAkAgZ4pAue8aAH4/GKwDKm/qUOhBLxIYAHzf+soSWVI+FclX+WiKGyXpyB0lPliJEEeRqf/WjBNVeevP8nZU4coxVwBGNQ51aBrdaQSgIdaZNGxx0s2OajflJDmTZusl3aDgWh2eitzG8nhOTGWiM7XbeW1+f720P/nkWVo12qDS5RMFN9fy/pAkh8bkTX6uJJI2jVMfGCt6h9dMCwb9AA0GnsqowBtOOblckZaP9u9nZZOXJhYW9QVNe9Kk+dW9uUL2sBzHchCHptC1OegZwIGRLPAPx7pVLQAAAAABAAAAAiMS7qbXil8PPPUAGQgAAAAAAMTwES4AAAAA1QFS4/og/dUJGghzAAAACQACAAAAAAAAeNpjYGRgYM/5x8PAwGn+S+GfK6cUUAQVsAMAbCsERwADjABkAAAAAAAAAAAB8gAABWoAfQK2AF8FsP6DAAAAKQApACkAKQBgAH4AigABAAAABwCPABYAWQAFAAEAAAAAAA4AAAIAAnIABgABeNpNjrkKwkAURY8r2lhbTmVn3ApBKxERQSxULAWXGIWQCYkL9n6Nn+GXeYshhMsdzrwdqHGhRKFcB/bguECTveMiDZ6OS7l4OccVWnwcVxX/Om6w5ccUS8ybhBsBV+4Y+nTpSYY5VgoI8TEsiDjhiSaEkmGddaXoh08qJzz1nvEUsRzlu2xYZtWqFD0IOZCwQz2kyloitB+PHgOGjHHXiPOz2rlZshQzoiO9kPA4EMsnZX39LAmBsiE3xXwidKfcYcmCKTNWbPS20W66fypGNRAAAAB42mNgZgCD/1kMKQxYAAAqHwHRAA==) format("woff");
    unicode-range: U+1F00-1FFF
}

Note that the third @font-face enters in conflict with the current CSP defined in:

https://github.com/jhaals/yopass/blob/2e4058d860fad7c7a014da57acd81c4bad3b5e00/pkg/server/server.go#L182C21-L182C21

Therefore, I think the correct CSP would be like the following (in pkg/server/server.go):

// SecurityHeadersHandler returns a middleware which sets common security
// HTTP headers on the response to mitigate common web vulnerabilities.
func SecurityHeadersHandler(next http.Handler) http.Handler {
	csp := []string{
		"default-src 'self'",
		"font-src 'self' data:",
		"form-action 'self'",
		"frame-ancestors 'none'",
		"script-src 'self'",
		"style-src 'self' 'unsafe-inline'",
	}

If you see this a right approach I can try to test it and open a PR.