SecurityError: The operation is insecure. Content Security Policy directive: "default-src 'self'"

FYI

https://github.com/phoenixframework/phoenix/blob/v1.6.10/lib/phoenix/controller.ex#L1105

ws:// needs to be allowed via CSP (Content Security Policy)

Check plug :put_secure_browser_headers present in relevant pipelines in Phoenix Router, check either default or suitable custom values are used.

Consider Content Security Policy configuration (in Phoenix) | The log of Paul Wilson

I updated the dependencies outdated.
Now I have the Phoenix 1.6.10.
And it wasn’t able to fix the CSP configuration.
I read the tutorial of the Paul Wilson and put this on the router.

@host :food_order
        |> Application.fetch_env!(FoodOrderWeb.Endpoint)
        |> Keyword.fetch!(:url)
        |> Keyword.fetch!(:host)

  @content_security_policy (case Mix.env() do
                              :prod ->
                                "default-src 'self';connect-src wss://#{@host};img-src 'self' blob:;"

                              _ ->
                                "default-src 'self' 'unsafe-eval' 'unsafe-inline';" <>
                                  "connect-src ws://#{@host}:*;" <>
                                  "img-src 'self' blob: data:;"

                                "font-src data:;"
                            end)

pipeline :browser do
...
  plug :put_secure_browser_headers, %{"content-security-policy" => @content_security_policy}
end

And now fixed the problems about the:

 Content Security Policy directive "default-src 'self'"

The Safari browser now is loading ok.
But continues complaining the loading of the google fonts in all browsers.

Brave Browser

Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "font-src data:".
Refused to load the font 'https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2' because it violates the following Content Security Policy directive: "font-src data:".
.
.
.

Safari

[Error] Refused to load https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2 because it does not appear in the font-src directive of the Content Security Policy.

Safari is the only show the error message and after the error message shows the successfully preconnected to google fonts:

Successfully preconnected to https://fonts.googleapis.com/

How can I solve this?

I am thinking to download and install the fonts on the assets folder and use the @font-face {} on the app.css.

Hi, I think the error message is pretty self-explanatory: “Refused to load (url) because it does not appear in the font-src directive of the Content Security Policy.”

FWIW I prefer to host fonts locally…

I changed now the @CSP for add the string font-src data:

@content_security_policy (case Mix.env() do
                              :prod ->
                                "default-src 'self';connect-src wss://#{@host};img-src 'self' blob:;"

                              _ ->
                                "default-src 'self' 'unsafe-eval' 'unsafe-inline';" <>
                                "connect-src ws://#{@host}:*;" <>
                                "img-src 'self' blob: data:;" <>
                                "font-src data:;"
                            end)

And on the safari browser is like it fixed.
But the Brave, Chrome complains to this:

Refused to load the stylesheet 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-eval' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

Firefox:

Content Security Policy: As configurações da página bloquearam o carregamento de um recurso em https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap (“default-src”).

Sorry, I never experienced this problem of the CSP.
And I was just following the tutorial to fix.
And I have no idea to fix this.
thank you for reply @evadne

I will try, thanks @kokolegorille!

I saw the link but is for webpack. I am using ESBuild with the Phoenix 1.6.10.
I am trying all the day and nothing I also tried some tutorials like this:

and I have no success !

I was able to fix installing the fonts locally.
So, I copy and paste the fonts locally on the priv/static/fonts folder:

priv/static/fonts
├── aclonica-v18-latin-regular.woff2
└── lobster-v28-latin-regular.woff2

I put it there because the documentation of the phoenix recommends there like the images as well.

On the app.css I put:

@font-face {
  font-family: 'Aclonica';
  src: url("/fonts/aclonica-v18-latin-regular.woff2");
}

@font-face {
  font-family: "Lobster";
  src: url("/fonts/lobster-v28-latin-regular.woff2");
}

So, it is possible to use on the CSS like:

body {
  font-family: 'Lobster', 'Aclonica', sans-serif, cursive;
}

To use them with the Tailwind CSS config I put this on the tailwind.config.js:

// See the Tailwind configuration guide for advanced usage
// https://tailwindcss.com/docs/configuration
module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex'
  ],
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Helvetica', 'sans-serif'],
        'aclonica': ['Aclonica'],
        'lobster': ['Lobster']
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms')
  ]
}

So now it is possible to use the fonts in the classes using like this:

• using the Font Aclonica

class="font-aclonica"

or

• using the Font Lobster

class="font-lobster"

And the secret for don’t have any error complaints on the console was the change of the font-src:
I changed to use this "font-src 'self' data:;" on the router.ex file.
So the final code of the router.ex file:

@host :food_order
        |> Application.fetch_env!(FoodOrderWeb.Endpoint)
        |> Keyword.fetch!(:url)
        |> Keyword.fetch!(:host)

  @content_security_policy (case Mix.env() do
                              :prod ->
                                "default-src 'self';connect-src wss://#{@host};img-src 'self' blob:;"

                              _ ->
                                "default-src 'self' 'unsafe-eval' 'unsafe-inline';" <>
                                "connect-src ws://#{@host}:*;" <>
                                "img-src 'self' blob: data:;" <>
                                "font-src 'self' data:;"
                            end)

  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_live_flash
    plug :put_root_layout, {FoodOrderWeb.LayoutView, :root}
    plug :protect_from_forgery
    plug :put_secure_browser_headers, %{"content-security-policy" => @content_security_policy}
  end

I was trying to use the import with the google fonts but I was having the errors complaining the font-src duplicate, etc… I don’t know how to fix the usage of the google fonts by URL import.
Is something about the CSP.

The print using the fonts:

Captura de Tela 2022-06-15 às 17.06.272784×1774 166 KB

This might help you generate a good CSP policy:CSP Generator

There is also an example for Google Fonts.

External Fonts
Using the external (Google) fonts has the benefit the font is probably already cached by a visit to another website using them too. Drawback: The hoster and it’s tracking and also more permissive CSP.

Self hosting
Depending on the use case, you might create a subset of the font and serve that to users to keep the data over the wire to a minimum. No tracking, restrictive CSP, but still a fast initial render with the correct font!

And when you want to go ever further, there is this (upcoming) standard: A New Way To Reduce Font Loading Impact: CSS Font Descriptors — Smashing Magazine