[Improvement] setTransformOrigin breaks CSP rule style-src: 'unsafe-inline'

[SirAuron]

While setting up a project with CSP rules, the console keeps telling me that the browser
"Refused to apply inline style because it violates the following Content Security Policy directive [...] 'unsafe-inline' ".

After a little bit of investigation, I found out that the function "setTransformOrigin" in the textfield component:

/**
 * Sets the transform origin given a user's click location.
 * @param {!Event} evt
 */

}, {
key: 'setTransformOrigin',
value: function setTransformOrigin(evt) {
  var targetClientRect = evt.target.getBoundingClientRect();
  var evtCoords = { x: evt.clientX, y: evt.clientY };
  var normalizedX = evtCoords.x - targetClientRect.left;
  var attributeString = 'transform-origin: ' + normalizedX + 'px center';

  this.adapter_.setAttr('style', attributeString);
}

applies the transform-origin property by directly setting style attribute, thus breaking the CSP rule mentioned above.

I was wondering if it is possible to change that function and make it CSP compliant.

[moog16]

@SirAuron thanks for bringing this to our attention. We'll need to do some more investigation, but at first glance at this link https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Sources we might be able to fix it by changing our setAttr('style', key) call --> .style[key].