3 ms·

I recently tried to use a popular UI combo (React + Material UI) and wanted to use static CSS. Just good ol' regular CSS files included in the HTML head. This s

by LeonM 8y ago

I recently tried to use a popular UI combo (React + Material UI) and wanted to use static CSS. Just good ol' regular CSS files included in the HTML head. This so I could host my frontend on a static webserver (AKA a CDN) and use Content-Security-Policy. I had to jump deep in a rabbit hole of build systems that no-one seems to understand and a dependency hell that I haven't experienced since my Python days. Any Github/Stackoverflow post I could find on the subject was already obsolete. The 'advise' most devs gave would boil down to disabling CSP by allowing unsafe-inline, or serving the index.html through a NodeJS server and injecting CSP nonces through a templating system. Both are not solutions, but workarounds to a problem that shouldn't exist. Once again, I had to conclude that the modern webdev frameworks are not mature enough to use for any serious work. I'll try again in 2020.

nicoburns 8y ago
I think your issue might be specifically with the material UI library which might not be designed to work with static CSS. Personallly I find these UI libraries are more trouble than they're worth. React itself is perfectly happy to work that way.
kowdermeister 8y ago
Try https://parceljs.org/ https://parceljs.org/ > modern webdev frameworks are not mature enough How much time have you invested? I know it can be very confusing given the variety of alternatives, but there are pretty sweet tools out there.
- LeonM 8y ago
  > How much time have you invested? I usually invest about a month full-time, get more and more frustrated and eventually hire someone else to do it for me. Just about every year I think that 'by now they should have worked out most problems', so I'll try again. Each year I have to completely re-learn everything because all last-year frameworks are either out of fashion, or have completely changed their API. Also the tools and language features change at a high pace. Don't get me wrong, I applaud the progress that is being made, and I'm really excited that we now have very powerful UI features to work with (single page JS applications in general). But the fast pace of development in this space means that we end up with broken toolchains and completely outdated codebases in a matter of months. Try working on a ~2 year old React codebase.
  - burgerboy 8y ago
    Sounds like user error, choose a mature framework that supports what you want, rather then expecting every tool to do what you want. Angular js.
Chyzwar 8y ago
You used a framework that specifically uses CSS in JS and tried to use it as a server-side rendered website. There is plenty of react frameworks that are geared toward traditional CSS: reactstrap, semantic-ui-react and ant design. Not to mentions that you could have used any css framework.
- LeonM 8y ago
  > You used a framework that specifically uses CSS in JS and tried to use it as a server-side rendered website. No, I DONT want server side rendering. That's the whole point. I want an application that renders client side, but without the dynamic CSS injection that breaks CSP. The only current solution that is being offered [1] would be using server-side rendering to inject CSP nonces into your client-side rendered app... it's madness. It should be possible to compile the CSS-in-JSS into a .css file and serve that css file statically. [1] https://github.com/cssinjs/jss/blob/master/docs/csp.md https://github.com/cssinjs/jss/blob/master/docs/csp.md
lol768 8y ago
>The 'advise' most devs gave would boil down to disabling CSP by allowing unsafe-inline, or serving the index.html through a NodeJS server and injecting CSP nonces through a templating system. Both are not solutions, but workarounds to a problem that shouldn't exist. I've observed that a lot of JavaScript framework devs don't really understand web security problems and the point of mitigations such as CSP, properly. These devs manually manipulate the style attribute by concatenating strings together instead of using the DOM element `.style.styleName` properties. They inject inline scripts. Hell, the React dev tools still rely on injecting a script into most pages which fails the minute you have a strict script-src. On so many occasions I've tried to use JS libraries and had to ditch them because they were poorly written like this. The bug tracker issues are closed or often just ignored with "solutions" like you mentioned that don't fix the underlying problem and leave your app less secure.

by LeonM 8y ago

nicoburns 8y ago

I think your issue might be specifically with the material UI library which might not be designed to work with static CSS. Personallly I find these UI libraries are more trouble than they're worth. React itself is perfectly happy to work that way.

kowdermeister 8y ago

Try https://parceljs.org/ https://parceljs.org/ > modern webdev frameworks are not mature enough How much time have you invested? I know it can be very confusing given the variety of alternatives, but there are pretty sweet tools out there.

LeonM 8y ago
> How much time have you invested? I usually invest about a month full-time, get more and more frustrated and eventually hire someone else to do it for me. Just about every year I think that 'by now they should have worked out most problems', so I'll try again. Each year I have to completely re-learn everything because all last-year frameworks are either out of fashion, or have completely changed their API. Also the tools and language features change at a high pace. Don't get me wrong, I applaud the progress that is being made, and I'm really excited that we now have very powerful UI features to work with (single page JS applications in general). But the fast pace of development in this space means that we end up with broken toolchains and completely outdated codebases in a matter of months. Try working on a ~2 year old React codebase.
- burgerboy 8y ago
  Sounds like user error, choose a mature framework that supports what you want, rather then expecting every tool to do what you want. Angular js.

Chyzwar 8y ago

You used a framework that specifically uses CSS in JS and tried to use it as a server-side rendered website. There is plenty of react frameworks that are geared toward traditional CSS: reactstrap, semantic-ui-react and ant design. Not to mentions that you could have used any css framework.

LeonM 8y ago
> You used a framework that specifically uses CSS in JS and tried to use it as a server-side rendered website. No, I DONT want server side rendering. That's the whole point. I want an application that renders client side, but without the dynamic CSS injection that breaks CSP. The only current solution that is being offered [1] would be using server-side rendering to inject CSP nonces into your client-side rendered app... it's madness. It should be possible to compile the CSS-in-JSS into a .css file and serve that css file statically. [1] https://github.com/cssinjs/jss/blob/master/docs/csp.md https://github.com/cssinjs/jss/blob/master/docs/csp.md

lol768 8y ago

>The 'advise' most devs gave would boil down to disabling CSP by allowing unsafe-inline, or serving the index.html through a NodeJS server and injecting CSP nonces through a templating system. Both are not solutions, but workarounds to a problem that shouldn't exist. I've observed that a lot of JavaScript framework devs don't really understand web security problems and the point of mitigations such as CSP, properly. These devs manually manipulate the style attribute by concatenating strings together instead of using the DOM element `.style.styleName` properties. They inject inline scripts. Hell, the React dev tools still rely on injecting a script into most pages which fails the minute you have a strict script-src. On so many occasions I've tried to use JS libraries and had to ditch them because they were poorly written like this. The bug tracker issues are closed or often just ignored with "solutions" like you mentioned that don't fix the underlying problem and leave your app less secure.