Fix CSP support

[crkent]

Code highlighting breaks for applications which set CSPs. This is due to the use of an inline style element to add (Makeup-generated) highlighting.

https://github.com/phenixdigital/phx_live_storybook/blob/a6a8c6beae69fa30f96083acd4cf33b1fc54edea/lib/phx_live_storybook/templates/layout/root.html.heex#L28-L30

To fix this, the simplest solution could be to add support for a nonce parameter from the conn. Happy to submit a pull request for this, if desired.

[cblavier]

Hey Carson, I wasn't really aware of CSP, thanks for raising this issue. Please open a PR

[cblavier]

👋 @crkent still wanna open a PR on this topic?

[gaiabeatrice]

Hi @cblavier, congrats on this super cool library, I absolutely love it!

I was wondering if there is a reason this got closed. I am still getting this.

How to replicate

Make sure the :browser pipeline in the router includes CSP headers

  pipeline :browser do
    # other plugs
    plug :put_secure_browser_headers, %{"content-security-policy" => "default-src 'self'"}
  end

The code snippets won't load the syntax highlighting:

[gaiabeatrice]

Just to add more context, this is an issue Phoenix Live Dashboard was having as well, and the following discussion is very interesting to read to find a similar solution. https://github.com/phoenixframework/phoenix_live_dashboard/issues/183

[cblavier]

Thanks for your feedback, Beatrice. I closed the issue because I had no news from @crkent

I will reopen it, and get it fixed!

[gaiabeatrice]

Beatrice is my last name, I go by Gaia 😁

Let me know if you need help, I can probably whip up a PR if needed.

[cblavier]

Sorry about that, Gaia :) I would gladly take a PR and review it, thanks for proposing.

[cblavier]

Hey Gaia, still want to open a PR? Need any help? Let me know!

[gaiabeatrice]

Hi, sorry, I'm having some really busy times this period, I was planning on work on this at the end of this week. If it's too late let me know

[cblavier]

No that's fine! I'm still aiming at a 0.5.0 release by the end of the month

[Papipo]

Why was this closed? I am having this issue in the latest version.

[cblavier]

This was closed by lack of external contribution 🤷‍♂️

I'd be more than happy to receive a PR on the topic, I don't know anything about CSP

[gaiabeatrice]

Hi sorry for the enormous and inexcusable delay.

I came back to work on this and I am having some issues with some inline styles. I can still open the PR, so someone more expert on the frontend can maybe help.

[cblavier]

Thanks a lot, @gaiabeatrice 🙏🙏🙏 It helped me a lot in understanding what CSP and nonces are.

I also had issues with favicons, but I fixed it by allowing self in the img-src directive in my policy as such:

img-src 'self' 'nonce-#{img_nonce}'

From my understanding, the nonce should have been enough, but anyway, that did the trick.