SplitText inline style content security policy violation

[rigged]

Hello everyone,

I'm currently implementing CSP in our Rails application, we're using SplitText VERSION: 0.6.1 and I'm having some issues with it since it applies some inline styles.

 

Is there a way of modifying this code to not use inline styles or a version of SplitText that doesn't have this issue?

 

Stackoverflow question

https://stackoverflow.com/questions/73891388/javascript-inline-style-csp-violation

[GreenSock]

Wow, that's a REALLY old version of SplitText

 

Sorry, but reworking that piece would be a lot of effort and probably degrade performance. We build up a whole string like that so the browser can do the DOM creation in one fell swoop rather than creating individual nodes every time through the loop. So is it possible to re-engineer? Probably. That isn't something we're planning to do, though. If you'd like to get in contact with us to explore options for a paid consulting project to deliver what you're asking for, you are welcome to do so. 

 

Or maybe you can build your app in a way that only runs that code at runtime to avoid that problem? I'm not a Rails guy, so I have no idea what's possible there. 

 

Good luck with your project.

[rigged]

Do you know if this is still an issue with recent versions of SplitText? 

If upgrading fixes the problem we might consider it as an option.

Thanks

[GreenSock]

It is indeed identical in the current version of SplitText. Again, that was intentional as a performance optimization (build a string, then shove it into outerHTML to have the browser create the nodes in one fell swoop). I wish I had better news for you. Honestly, TONS of people use SplitText (and have for years) and I think this is the first I'm hearing of an issue like this. Perhaps my memory is failing me, but this is definitely very uncommon. I assume it has to do with your build environment or tooling(?)

[rigged]

I would really like to know how people are doing this because I don't see how this is compatible with a strict CSP implementation

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src

Quote

Note: Disallowing inline styles and inline scripts is one of the biggest security wins CSP provides. However, if you absolutely have to use it, there are a few mechanisms that will allow them.

 

If the output of element.outerHTML = splitText + (wordIsOpen ? wordEnd : ""); created style tags we could pass a nonce key to conform with the CSP rules but with this implementation I don't see how it's possible

[GreenSock]

Isn't that server-side stuff related to headers? SplitText does the splitting at runtime, client-side (well, unless you're doing something unconventional) so I can't imagine why this would be a problem. 

 

Sorry, but I'm unfamiliar with CSP, Rails, etc.

 

I've been doing this since 2008 and GSAP is used on over 11 million sites and I don't recall anyone citing a problem like this. JavaScript animation can really only work by applying inline styles anyway at runtime. 

 

Are you trying to leverage SplitText to split things server-side and then send the results to the client? Perhaps you could shift that to being client-side? If so, maybe you could inject whatever nonce stuff is necessary for your use case. I'm just throwing out ideas. ?‍♂️

[rigged]

This is not an issue specific to Rails.

The way the CSP implementation works is that the server sends a response header with the CSP rules

For example, these are greensock's CSP rules

Then the browser enforces these rules for example if you try to load an external resource that is not on the policy or run some inline javascript or styles the browser will prevent it.

Sometimes people choose to relax the CSP rules by using unsafe-inline which is not recommended since it defeats the purpose of having a CSP.

Or alternatively, we can set unsafe-hashes rule and pass the computed sha256 value of the code we want to run, this should be avoided when possible since an attacker can still take advantage of this if they're able to create a method with the same signature.

In this case, we can add to our rules style-src 'sha256-KNzsEJVbLeUYL5BJED4PPrsiMvQsDZ6wNHiw+M2zQ+M=' as a temporary solution but in future, we might consider using an alternative library since we want to keep our CSP as strict as possible.

This stack overflow answer explains why the code mentioned above breaks the inline-style rule https://stackoverflow.com/a/42402277/5781329

 

Thank for your help

[GreenSock]

Thanks for the explanation. We'll consider this if/when we rewrite SplitText someday. It's unfortunate that it'd require a performance tradeoff (creating a new node each time through the loop rather than building a string and letting the browser do the parsing at one time). If this is critical enough for your use case and you'd like to contact us about paid consulting to explore what's feasible, feel free to shoot me a PM. 

 

Good luck with your project. ?