CSP blocking Lit for web component

[ghchinoy]

Describe the bug Lit (lit-core.min.js) being blocked by CSP with and without page(allowed_script_srcs=["https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js", "https://cdn.jsdelivr.net/] on page with local and hosted mesop

To Reproduce Steps to reproduce the behavior:

Create a minimal web component, whose JS's render method looks like so:

render() {
      return svg`
        <svg> .... </svg>
      `;
    }

with related component py:

import mesop.labs as mel

@mel.web_component(path="./synthid_component.js")
def synth_id_component(
  *,
  key: str | None = None,
):
  return mel.insert_web_component(
    name="synth-id",
    key=key,
    events={},
    properties={},
  )

and attempt to load it in the main.py and render.

Expected behavior

SVG (web component) renders without Lit being blocked :)

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

Desktop System Info

• OS: MacOS
• Browser Chrome
• Version 126

Additional context Add any other context about the problem here.

[richard-to]

I tried to repro this locally using the mesop from pip.

Well, technically I tried creating the counter app described here: https://google.github.io/mesop/web_components/quickstart/

That seemed to work for me. It loaded lit correctly. No CSP issue.

So it's curious why lit is being blocked for you locally.

[wwwillchen]

@ghchinoy can you include the Chrome DevTools console error messages that you're seeing? It will provide more details than the network tab (which I think you're screenshotting).

[ghchinoy]

Hmm, I also made a small svg component by itself and it works no blocked CSP, but my larger application still has an issue

https://github.com/ghchinoy/mesop-svg-icon

the console error, for posterity:

Refused to load the script 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

[wwwillchen]

Looks like there was a CSP mis-configuration with the larger app (addressed in internal chat). Filed #566 to improve the developer experience for fixing these kinds of errors - thanks.