Inline JavaScript in event handlers necessitates "unsafe-inline" in Content Security Policy

[SaulMoonves]

I am trying to create a comprehensive content security policy header for Iris. I am having two issues with inline JavaScript. One of them I have been able to handle without trouble (adding 'sha256-wadnAEJY5g/LHroyDFRjkGd3ZF0aQ7n5lbGfpOMb+KQ=' to the CSP script-src), but the second is more troublesome.

Currently I have:

default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src * data:; media-src * data:; connect-src wss: https:; frame-src 'none'; frame-ancestors 'none'; block-all-mixed-content

This seems to work for everything except https://iris.to username signup. The issue is I am trying to remove 'unsafe-inline' from script-src as this would greatly reduce attack surface. I can't do it because at least some of the event handlers generated have inline JavaScript.

I tried inducing the build to not generate it by passing the environment variable INLINE_RUNTIME_CHUNK=false but this seems to be a reactjs thing not preact and did not work. I'm not a react guy so I don't actually know why though.

I was not able to find a way to add a postbuild step to either replace the JS or output hashes I could add to my CSP, talk online indicates this may be possible but again I was unsuccessful at finding out how.

Help or guidance here would be greatly appreciated.