Any chance to use SplitText w/o harming csp´s styleSrc self policy on div children insert?

[Juno911]

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.

[GreenSock]

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? 

[Juno911]

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.