v1.7.15 injects inline styles, violating strict CSP

[unindented]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.15

What browser are you using?

Chrome, Firefox, Safari

Reproduction URL

https://codesandbox.io/p/sandbox/upbeat-wave-gx26wy

Describe your issue

Starting with v1.7.15, @headlessui/react injects this inline style when using Popover:

<div style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></div>

This causes sites with strict CSP policies (not allowing 'unsafe-inline', e.g. style-src: 'self') to throw errors in the console.

[RobinMalfait]

Hey, thank you for this bug report! 🙏

Is there a way you can change the CSP policies to allow this?

We require some hidden buttons to improve the functionality of the components, we use a common approach using a VisuallyHidden component. Headless UI itself doesn't ship with any CSS, therefore we use inline styles in some places.

Another place where we use hidden elements like this is the moment you make form-like components form aware (like a Listbox or a Combobox) by setting a name prop. A Dialog also sets some inline styles when it opens (those features existed for quite some time already).

I would recommend to allow 'unsafe-inline' in style-src, because I don't think there is a lot you can do wrong with inline styles like this. See https://scotthelme.co.uk/can-you-get-pwned-with-css/.

I'm going to close this for now because I don't think we will change this anytime soon.

However, I'm open to suggestions on how we can solve this without introducing an external CSS file. Do you have any recommendations?

[unindented]

Umm, I can't think of any ways around it. Thanks for explaining though!

[jtermine]

@RobinMalfait I think you need to introduce an external CSS file. The hard fact is that CSP policies aren't going to endorse inline-anything. Also the "unsafe-inline" is ignored in the CSP policy if the rest of site uses nonces. So, it makes HeadlessUI useless in scenarios where the operating environment has strict CSP requirements -- i.e. banks, government websites, and others. Yes, this is illogical, but there is "security culture" that often goes nuts about mundane things.

[queenvictoria]

Hey @jtermine @RobinMalfait . Could an approach be to replace inline styles with Tailwind classes? Does headlessui ever get used without tailwind?

I've got this in a fork. Sadly I can't figure out how to get it into production in a monorepo/fork/branch...
main...Laudanum:headlessui:feature/csp

[Michael-Grupp]

@RobinMalfait Will @queenvictoria's suggestion be implemented in the near future or are there other plans to address the problem?

[WoetDev]

Will this issue be addressed?

I'd think security topics should be getting a higher priority since this could block the use of headless ui in any serious web apps?

[Benjamin-K]

One way to solve this would be to allow giving a nonce to headlessui, so that we do not have to allow 'unsafe-inline', which will result in worse Pentest results.