CSP inline style error when using ui-select

[corbinolds]

We are seeing two inline styles being applied when using the ui select directive, specifically with the ui-select-match directive. We are using the ng-csp directive at the top level and that is stopping inline styles. This error is happening on line 2888 of angular.js in version 1.5.8 (See tmp.innerHTML = wrap[1] + html.replace(XHTML_TAG_REGEXP, "<$1></$2>") + wrap[2];) We are using version 0.19.5 of ui select.

function jqLiteBuildFragment(html, context) {
  var tmp, tag, wrap,
      fragment = context.createDocumentFragment(),
      nodes = [], i;

  if (jqLiteIsTextNode(html)) {
    // Convert non-html into a text node
    nodes.push(context.createTextNode(html));
  } else {
    // Convert html into DOM nodes
    tmp = fragment.appendChild(context.createElement("div"));
    tag = (TAG_NAME_REGEXP.exec(html) || ["", ""])[1].toLowerCase();
    wrap = wrapMap[tag] || wrapMap._default;
    tmp.innerHTML = wrap[1] + html.replace(XHTML_TAG_REGEXP, "<$1></$2>") + wrap[2];

    // Descend through wrappers to the right content
    i = wrap[0];
    while (i--) {
      tmp = tmp.lastChild;
    }

    nodes = concat(nodes, tmp.childNodes);

    tmp = fragment.firstChild;
    tmp.textContent = "";
  }

Here is a console stack trace:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-4IfJmohiqxpxzt6KnJiLmxBD72c3jkRoQ+8K5HT5K8o='), or a nonce ('nonce-...') is required to enable inline execution.

jqLiteBuildFragment @ lib.built.js:2889
jqLiteParseHTML @ lib.built.js:2921
JQLite @ lib.built.js:2966
JQLite @ lib.built.js:2962
removeComments @ lib.built.js:10195
(anonymous) @ lib.built.js:9609
processQueue @ lib.built.js:16384
(anonymous) @ lib.built.js:16400
$eval @ lib.built.js:17683
$digest @ lib.built.js:17496
$apply @ lib.built.js:17791
done @ lib.built.js:11832
completeRequest @ lib.built.js:12034
requestLoaded @ lib.built.js:11967

After some digging, it looks like there are two inline styles being applied in the match.tpl.html file and one inline style being applied in the select-multiple.tpl.html file.

For the match.tpl.html file:

• Line 7 has an inline style of "outline: 0"
• Line 11 has an inline style of "margin-right: 10px"

For the select-multiple.tpl.html file:

• Line 24 has an inline style of "width: 34px"

[jcmorenoruiz]

Hi, did you solve this issue? I have the same problem but i don´t know how to solve it.

[corbinolds]

Hi @jcmorenoruiz - I think you can simply just remove the inline style attributes that I specified above from the ui-select file you are using if you don't want them (the styles there already aren't being applied due to the ng-csp directive). If you actually want to keep these styles, you can move them into a style sheet and apply them using class.

[evilaliv3]

@corbinolds @jcmorenoruiz: in the above commit you find the proper patch.