Mesop Google auth example causes CSP error

[patrick-austermann]

Describe the bug
Running the standard auth example from https://google.github.io/mesop/guides/auth/ mesop 0.12.7 will cause CSP errors, both run on localhost and gcloud

As a result of the exception, the logged in state is not retained when navigating to another page from the login page/

To Reproduce
Steps to reproduce the behavior:

(this is from running locally on Win 11 / Python 3.12.4/ mesop 0.12.7)

1. Take the example https://google.github.io/mesop/guides/auth/
2. mesop example.py
3. Go to http://localhost:32123/web_component/firebase_auth/firebase_auth_app, log into your google account as requested
4. See error in console
   Exception: ('Unexpected CSP violation:', 'script-src-attr', {'csp-report': {'blocked-uri': 'inline', 'column-number': 332, 'disposition': 'enforce', 'document-uri': 'http://localhost:32123/web_component/firebase_auth/firebase_auth_app', 'effective-directive': 'script-src-attr', 'line-number': 169, 'original-policy': "default-src 'self'; font-src http://fonts.gstatic.com data:; frame-src ; img-src 'self' data: https: http:; media-src 'self' data: https:; style-src 'self' 'unsafe-inline' http://fonts.googleapis.com https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css; script-src 'self' 'nonce-1hcoFsA3fUyjkEUTm0Y5eg' http://localhost:32123/ http://.google.com https://www.gstatic.com https://cdn.jsdelivr.net; report-uri http://localhost:32123/__csp__; connect-src 'self' http://*.googleapis.com; frame-ancestors *", 'referrer': 'http://localhost:32123/login', 'source-file': 'https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.js', 'status-code': 200, 'violated-directive': 'script-src-attr'}})

Same behavior if I "gcloud run deploy" it.

Expected behavior
No CSP error.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop System Info

• Mesop 0.12.7
• Python 3.12.4
• OS: Win 11
• Firefox 131.0.3, Chrome 130.0.6723.70

Additional context

• none -

[richard-to]

Hmm, I was testing out the Firebase Auth a couple weeks ago and I was not seeing any CSP errors.

Instead of using the guide, maybe try running the code example (not sure if you've seen it yet or not). It is here: https://github.com/google/mesop/tree/main/mesop/examples/web_component/firebase_auth

I think the key thing to compare is your security policy on your page config:

Here's a snippet:

@me.page(
  path="/web_component/firebase_auth/firebase_auth_app",
  stylesheets=[
    "https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css"
  ],
  # Loosen the security policy so the firebase JS libraries work.
  security_policy=me.SecurityPolicy(
    dangerously_disable_trusted_types=True,
    allowed_connect_srcs=["*.googleapis.com"],
    allowed_script_srcs=[
      "*.google.com",
      "https://www.gstatic.com",
      "https://cdn.jsdelivr.net",
    ],
  ),
)

[patrick-austermann]

Appreciate the quick reply - it looks like that example code is identical as far as I can tell. The only change I am making is to use a "local" (in my app directory) copy of firebase_auth_component.py and firebase_auth_component.js

So that I do this
from firebase_auth_component import firebase_auth_component

instead of
from mesop.examples.web_component.firebase_auth.firebase_auth_component import firebase_auth_component

That way I can more easily change the firebase auth parameters to my own settings.

After a bit of cleanup of cookies etc, (no code changes) it works on Chrome, but Firefox still throws CSP errors, even after cookie cleanup. Even a never-used edge worked fine. So this an ish-me, not an issue, I think. I will report back if I find out anything else ab out this vexing situation.

[richard-to]

Thanks for the additional notes, especially about Firefox. We typically test in Chrome, so don't test in other browsers such as Firefox. So it's good to know if Firefox is throwing CSP errors. That's definitely something we can investigate further.

Thanks. We definitely appreciate your notes on this issue.