CSP inline style conflict

[IlCallo]

When using a meaningful CSP (one which do not allow unsafe-inline), there are conflicts with this package. This is done by the fact that some properties are setted and removed via element.setAttribute('style', 'property: value') instead of traversing them via DOM with element.style.property = 'value'.

There are 9 occurrencies of this behaviour, in 3 kinds. elem here is a placeholder for subtitle, dotSpan and span which are the 3 elements on which the commands are used.

---

elem.setAttribute('style', 'display: none')

which can become

elem.style.display = 'none'

---

fakeNeedle.setAttribute('style', `left:${cOffset.left - hOffset.left}px;top:${cOffset.top - hOffset.top}px`)

which can become

fakeNeedle.style.left = `left:${cOffset.left - hOffset.left}px`
fakeNeedle.style.top = `top:${cOffset.top - hOffset.top}px`

---

elem.removeAttribute('style')

which can become

elem.style.display = 'initial'

---

Is it possible to update like this to comply with CSP reccomandations? I know that strict-dynamic option is incoming, but not all browsers understans CSP3. I can do the PR myself if needed, but it's so trivial that I'll spend more time downloading the library and compiling than actually making the fix.

It's worth noting that the second case cannot be solved using a script hash, given that the value is dinamically generated. Even so, on Chrome failing that line of code doesn't seems to have any effect

[puranjayjain]

I myself have little to no knowledge of csp (at the moment) you might have to look around how other libraries handle it. You could also raise a PR here if you find a possible solution. 👍

[IlCallo]

Well, the possible solution is the one I written up there 🤔 The basic rule of CSP is "avoid eval and inline scripts and styles whenever is possible". This package use no eval() nor inline scripts, the only problem is the inline style written with setAttribute('style','things').

I'll apply the fixes and send a PR.

[puranjayjain]

That'll be great 😄