Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Angular-ui is throwing csp error on uib-popover #5470

Closed
apryce opened this issue Feb 12, 2016 · 15 comments
Closed

Angular-ui is throwing csp error on uib-popover #5470

apryce opened this issue Feb 12, 2016 · 15 comments
Labels
component: tooltip type: enhancement
Milestone
1.2.0

Comments

@apryce
Copy link

apryce commented Feb 12, 2016

We are seeing an inline style being applied when using uib-popover. We are using the ng-csp directive at the top level and that is stopping other inline styles. The error is happening in line 2760 of angular.js in version 1.4.9 (see tmp.innerHTML = wrap[1] + html.replace(XHTML_TAG_REGEXP, "<$1></$2>") + wrap[2];)

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 = 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;
    }

The console stack trace is:

nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
jqLiteBuildFragment @ angular.js:2760jqLiteParseHTML @ angular.js:2792JQLite @ angular.js:2827JQLite @ angular.js:2823compile @ angular.js:7741compile @ ui-bootstrap-tpls.js:4477applyDirectivesToNode @ angular.js:8319compileNodes @ angular.js:7852compileNodes @ angular.js:7864compileNodes @ angular.js:7864compileNodes @ angular.js:7864compileNodes @ angular.js:7864compileNodes @ angular.js:7864compile @ angular.js:7751(anonymous function) @ angular-ui-router.js:4076invokeLinkFn @ angular.js:9039nodeLinkFn @ angular.js:8533compositeLinkFn @ angular.js:7929publicLinkFn @ angular.js:7809updateView @ angular-ui-router.js:4021(anonymous function) @ angular-ui-router.js:3962invokeLinkFn @ angular.js:9039nodeLinkFn @ angular.js:8533compositeLinkFn @ angular.js:7929compositeLinkFn @ angular.js:7932publicLinkFn @ angular.js:7809(anonymous function) @ angular-ui-router.js:4089invokeLinkFn @ angular.js:9039nodeLinkFn @ angular.js:8533compositeLinkFn @ angular.js:7929publicLinkFn @ angular.js:7809updateView @ angular-ui-router.js:4021(anonymous function) @ angular-ui-router.js:3959Scope.$broadcast @ angular.js:16573$state.transition.resolved.then.$state.transition @ angular-ui-router.js:3352processQueue @ angular.js:14991(anonymous function) @ angular.js:15007Scope.$eval @ angular.js:16251Scope.$digest @ angular.js:16069Scope.$apply @ angular.js:16359done @ angular.js:10791completeRequest @ angular.js:10989requestLoaded @ angular.js:10930
angular.js:3198 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-1nVQdHiAzq+yQt4PZ8OE7a29XlxBFIzESqqj+rz4Jdc='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
forEach.attr @ angular.js:3198JQLite.(anonymous function) @ angular.js:3297Attributes.$set @ angular.js:7632(anonymous function) @ angular.js:8655forEach @ angular.js:355mergeTemplateAttributes @ angular.js:8650(anonymous function) @ angular.js:8725processQueue @ angular.js:14991(anonymous function) @ angular.js:15007Scope.$eval @ angular.js:16251Scope.$digest @ angular.js:16069Scope.$apply @ angular.js:16359done @ angular.js:10791completeRequest @ angular.js:10989requestLoaded @ angular.js:10930
@icfantv
Copy link
Contributor

icfantv commented Feb 12, 2016

@apryce, quick question, are you including the UIBS CSP CSS file in your <head>?

@wesleycho
Copy link
Contributor

This is caused by the inline style present in

bootstrap/src/tooltip/tooltip.js

Line 134 in 48c9cd8

'style="visibility: hidden; display: block; top: -9999px; left: -9999px;"' +
- we may be able to abstract this into a class and use CSS

@apryce
Copy link
Author

apryce commented Feb 12, 2016

@icfantv, we are using ui-bootstrap-csp.css and angular-csp.css.
@wesleycho, yeah that would probably make the most sense. I'm not too familiar with this code base, but that seems inline with the current strategy.

@apryce
Copy link
Author

apryce commented Feb 12, 2016

Actually that looks like the similar to ng-hide class. Maybe rather than using inline style we can use that class?

@wesleycho
Copy link
Contributor

I think it is sufficient to just turn that CSS into a class - the service is also doing some style modifications with positional calculations and such, it may disrupt the calculations to switch to ng-hide/ng-show, and also would require a $digest to run. The positional changes are done outside the $digest cycle.

@icfantv
Copy link
Contributor

icfantv commented Feb 12, 2016

@apryce, i can't speak to your last question, but if you look at the carousel component, for example, you will see it has a separate CSS file. I think the grunt task will just magically suck it in and do what it needs to do - i.e., putting it in the distribution file. If you look at the bottom of the uncompressed TPLS version of our file, you will see how it gets injected/loaded.

@apryce
Copy link
Author

apryce commented Feb 23, 2016

I'm looking at getting a PR put together and approved. My estimate is that it will be at least a few weeks to cut the red tape. If anyone is going to jump in sooner, be sure to comment here. Thanks.

@wesleycho
Copy link
Contributor

We're probably going to look at this being done within the next few days so it can get in 1.2.

@wesleycho wesleycho added this to the 1.2.0 milestone Feb 23, 2016
@wesleycho wesleycho mentioned this issue Feb 23, 2016
Closed
9 tasks
@apryce
Copy link
Author

apryce commented Feb 24, 2016

Oh, sweet! Thanks!

@apryce
Copy link
Author

apryce commented Feb 24, 2016

We were getting two inline errors. If the person fixing wouldn't mind doing a search inline that would be great.

@wesleycho
Copy link
Contributor

Is it two errors from purely the tooltip? I'm not finding any other inline styles.

@wesleycho wesleycho mentioned this issue Feb 24, 2016
Closed
@apryce
Copy link
Author

apryce commented Feb 24, 2016

I think it was, but I didn't have a chance to dive into it. If you've done a search for inline then that's all I intended.

@wesleycho
Copy link
Contributor

Yup, I only found one style reference.

@RobJacobs
Copy link
Contributor

Tooltip and position - scrollbarWidth function are the only 2 inline instances I can find. I added a class to the datepicker that is kind of what we need, but it needs to be more generic. I'll create a PR that adds the implementation suggested in the ng-hide docs, something like:

.uib-position-measure {
    display: block !important;
    visibility: hidden !important;
    position: absolute;
    top: -9999px;
    left: -9999px;
}

That we should be able to use everywhere.

@RobJacobs RobJacobs mentioned this issue Feb 24, 2016
Closed
@apryce
Copy link
Author

apryce commented Feb 24, 2016

Awesome! Thanks guys!

@kennsippell kennsippell mentioned this issue Dec 17, 2018
Closed
5 tasks
@kennsippell kennsippell mentioned this issue Jan 9, 2019
Merged
5 tasks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
component: tooltip type: enhancement
Projects
None yet
Milestone
1.2.0
Development

Successfully merging a pull request may close this issue.

fix(tooltip): remove inline style wesleycho/bootstrap
4 participants
@icfantv @apryce @wesleycho @RobJacobs