Jump to content
GreenSock

rigged

SplitText inline style content security policy violation

Recommended Posts

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.

image.thumb.png.0720e4099c550a3aa26e8da0f2df32ae.png

 

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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(?)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 🤷‍♂️

Link to comment
Share on other sites

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 rulesimage.png.04ee0b4879a76bc4bb42f701d4b83d01.png

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

Link to comment
Share on other sites

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. 👍

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×