Juno911 Posted January 22, 2021 Share Posted January 22, 2021 The issue: Browser CSP styleSrc is self. Using SplitText triggers the policy on applying style attributes to the div childrens SplitText creates itself. The questions: Is it possible to have the divs, pre-created by SplitText with position: relative; display: inline-block;, styled by classes instead of attributes? Or is it possible to pr-create the children self and pass them to SplitText for usage? Any other ideas to come around that? Its just about the process of creation (inserting to DOM). Changes to the existing tagObj can be done in attributes. But the creation needs to work different. I would appreciate any idea to work with SplitText and CSP styleSrc policy to just self. Thanks so much. Link to comment Share on other sites More sharing options...
GreenSock Posted January 22, 2021 Share Posted January 22, 2021 I can't really think of a clean way to accommodate your request, no. Sorry. Do you have a minimal demo? Can you adjust your CSP definition? Maybe put your JS in an external file? 1 Link to comment Share on other sites More sharing options...
Solution Juno911 Posted January 23, 2021 Author Solution Share Posted January 23, 2021 I found out providing a public demo with a CSP ready webserver isnt that easy to show you. My script is loaded from external as this is CSP demanded as well. Script and Style is treated pretty much the same in CSP. I applied some further tests and inspected SplitText.js version 3.2.6 provided as UMD. I really didnt dig too deep into it but I recommend to get rid of : _divStart = " style='position:relative;display:inline-block;'",in line 71. Inline styles harm CSP https://developers.google.com/web/fundamentals/security/csp. In all other places you use CSSOM, which is just great and respect CSP. Just inline styles or something like document.getElementById(id).setAttribute('style', 'left: 343px') is really bad. But to use document.getElementById(id).style or document.getElementById(id).style.cssText is just fine. $().css() does this CSP ready as well for the community. But this does not help here. The solution which works for me: SplitText.js:_cssClassFunc:71: // _divStart = " style='position:relative;display:inline-block;'", // took this line out SplitText.js:_cssClassFunc:85: // return "<" + tag + _divStart + (cssClass ? " class='" + cssClass + (iterate ? num++ : "") + "'>" : ">"); // took this line out SplitText.js:_cssClassFunc:86: return "<" + tag + (cssClass ? " class='" + cssClass + (iterate ? num++ : "") + "'>" : ">"); // inserted new script line [removed var:_divStart] SplitText.js:_setPositionsAfterSplit:191: j[i].style.display = "inline-block"; // inserted new script line SplitText.js:_setPositionsAfterSplit:192: j[i].style.position = "relative"; // inserted new script line As there is action before _setPositionsAfterSplit e.g. in split() or even _toArray(), changes probably could also be applied already there. Tested with chars and words in a small environment in ChromeDev and IOS native. I can test further and report if it helps. Not sure if my change is production safe. I would not recommend to copy that over. It would be nice if you could provide a patch instead. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now