Create a build of AngularJS that contains no CSS. #8459
Conversation
|
Which environments allow eval but not inline CSS? |
|
This is mostly useful for sites with custom CSP headers, not for a certain environment like a browser extensions. We prohibit inline styles on our projects but on some we're not ready to give up the performance increase eval offers. The resulting warning is mostly annoying but it also looks kinda unprofessional when a visitor happens to look into the console. It's also annoying because we happen to log these errors on the server. |
This is useful for sites that use CSP, especially those that prohibit inline CSS but allow eval.
petebacondarwin
force-pushed
the
v1.2.x
branch
from
472162d
to
466320f
Compare
|
Any news or feedback on this? |
|
Checking with the core team... |
|
What's the goal here? Size reduction or avoiding an exception/warning from CSP? If it's the latter then we should look into how we could avoid it via ng-csp attribute. If size reduction is the goal then I don't think it's worth it because the css is tiny. |
|
I believe the goal is the latter. @IgorMinar Are you saying that we could make |
|
Yeah
|
|
OK, so I took a look into this. I think that there is a reasonable work around for this specific case that doesn't require a change to the Angular build or code. The key is to trick the
<html ng-csp>
angular.module('app', []).
decorate('$sniffer', function($delegate) {
$delegate.csp = function() { return false; };
return $delegate;
});I haven't yet tested this code but you might want to give it a try. |
|
That will also disable fn generation that speeds up dirty-checking, which might not be desirable. |
|
From looking at the code, I don't think so: The parser checks Actually my code is slightly wrong since $sniffer.csp is actually a property not a function... angular.module('app', []).
decorate('$sniffer', function($delegate) {
$delegate.csp = false;
return $delegate;
}); |
|
@realityking - is my workaround good enough for you? |
|
@petebacondarwin I probably won't be able to test this until the weekend as we're in the middle of a bigger release rigth now. |
|
No problem. |
|
I finally got a chance to test this. Your workaround works completely fine. There's no warning about styles being inserted and I manually checked that function generation is still used. While I think my solution is more elegant, this is completely serviceable. Thank you very much! |
|
I agree that your solution was more elegant but I am glad that you now have a serviceable solution. |
There are two different features in Angular that can break CSP rules: use of `eval` to execute a string as JavaScript and dynamic injection of CSS style rules into the DOM. This change allows us to configure which of these features should be turned off to allow a more fine grained set of CSP rules to be supported. Closes angular#11933 Closes angular#8459
There are two different features in Angular that can break CSP rules: use of `eval` to execute a string as JavaScript and dynamic injection of CSS style rules into the DOM. This change allows us to configure which of these features should be turned off to allow a more fine grained set of CSP rules to be supported. Closes angular#11933 Closes angular#8459
There are two different features in Angular that can break CSP rules: use of `eval` to execute a string as JavaScript and dynamic injection of CSS style rules into the DOM. This change allows us to configure which of these features should be turned off to allow a more fine grained set of CSP rules to be supported. Closes angular#11933 Closes angular#8459
There are two different features in Angular that can break CSP rules: use of `eval` to execute a string as JavaScript and dynamic injection of CSS style rules into the DOM. This change allows us to configure which of these features should be turned off to allow a more fine grained set of CSP rules to be supported. Closes #11933 Closes #8459 Closes #12346
There are two different features in Angular that can break CSP rules: use of `eval` to execute a string as JavaScript and dynamic injection of CSS style rules into the DOM. This change allows us to configure which of these features should be turned off to allow a more fine grained set of CSP rules to be supported. Closes angular#11933 Closes angular#8459 Closes angular#12346
There are two different features in Angular that can break CSP rules: use of `eval` to execute a string as JavaScript and dynamic injection of CSS style rules into the DOM. This change allows us to configure which of these features should be turned off to allow a more fine grained set of CSP rules to be supported. Closes angular#11933 Closes angular#8459 Closes angular#12346
This is useful for sites that use CSP, especially those that prohibit inline CSS but allow eval.