2012-03-08 23:00:38 +00:00
|
|
|
'use strict';
|
|
|
|
|
|
2012-04-09 18:20:55 +00:00
|
|
|
describe('ngInclude', function() {
|
2012-03-08 23:00:38 +00:00
|
|
|
var element;
|
|
|
|
|
|
|
|
|
|
afterEach(function(){
|
|
|
|
|
dealoc(element);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function putIntoCache(url, content) {
|
|
|
|
|
return function($templateCache) {
|
|
|
|
|
$templateCache.put(url, [200, content, {}]);
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
feat($sce): new $sce service for Strict Contextual Escaping.
$sce is a service that provides Strict Contextual Escaping services to AngularJS.
Strict Contextual Escaping
--------------------------
Strict Contextual Escaping (SCE) is a mode in which AngularJS requires
bindings in certain contexts to result in a value that is marked as safe
to use for that context One example of such a context is binding
arbitrary html controlled by the user via ng-bind-html-unsafe. We
refer to these contexts as privileged or SCE contexts.
As of version 1.2, Angular ships with SCE enabled by default.
Note: When enabled (the default), IE8 in quirks mode is not supported.
In this mode, IE8 allows one to execute arbitrary javascript by the use
of the expression() syntax. Refer
http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx
to learn more about them. You can ensure your document is in standards
mode and not quirks mode by adding <!doctype html> to the top of your
HTML document.
SCE assists in writing code in way that (a) is secure by default and (b)
makes auditing for security vulnerabilities such as XSS, clickjacking,
etc. a lot easier.
Here's an example of a binding in a privileged context:
<input ng-model="userHtml">
<div ng-bind-html-unsafe="{{userHtml}}">
Notice that ng-bind-html-unsafe is bound to {{userHtml}} controlled by
the user. With SCE disabled, this application allows the user to render
arbitrary HTML into the DIV. In a more realistic example, one may be
rendering user comments, blog articles, etc. via bindings. (HTML is
just one example of a context where rendering user controlled input
creates security vulnerabilities.)
For the case of HTML, you might use a library, either on the client side, or on the server side,
to sanitize unsafe HTML before binding to the value and rendering it in the document.
How would you ensure that every place that used these types of bindings was bound to a value that
was sanitized by your library (or returned as safe for rendering by your server?) How can you
ensure that you didn't accidentally delete the line that sanitized the value, or renamed some
properties/fields and forgot to update the binding to the sanitized value?
To be secure by default, you want to ensure that any such bindings are disallowed unless you can
determine that something explicitly says it's safe to use a value for binding in that
context. You can then audit your code (a simple grep would do) to ensure that this is only done
for those values that you can easily tell are safe - because they were received from your server,
sanitized by your library, etc. You can organize your codebase to help with this - perhaps
allowing only the files in a specific directory to do this. Ensuring that the internal API
exposed by that code doesn't markup arbitrary values as safe then becomes a more manageable task.
In the case of AngularJS' SCE service, one uses $sce.trustAs (and
shorthand methods such as $sce.trustAsHtml, etc.) to obtain values that
will be accepted by SCE / privileged contexts.
In privileged contexts, directives and code will bind to the result of
$sce.getTrusted(context, value) rather than to the value directly.
Directives use $sce.parseAs rather than $parse to watch attribute
bindings, which performs the $sce.getTrusted behind the scenes on
non-constant literals.
As an example, ngBindHtmlUnsafe uses $sce.parseAsHtml(binding
expression). Here's the actual code (slightly simplified):
var ngBindHtmlUnsafeDirective = ['$sce', function($sce) {
return function(scope, element, attr) {
scope.$watch($sce.parseAsHtml(attr.ngBindHtmlUnsafe), function(value) {
element.html(value || '');
});
};
}];
Impact on loading templates
---------------------------
This applies both to the ng-include directive as well as templateUrl's
specified by directives.
By default, Angular only loads templates from the same domain and
protocol as the application document. This is done by calling
$sce.getTrustedResourceUrl on the template URL. To load templates from
other domains and/or protocols, you may either either whitelist them or
wrap it into a trusted value.
*Please note*:
The browser's Same Origin Policy and Cross-Origin Resource Sharing
(CORS) policy apply in addition to this and may further restrict whether
the template is successfully loaded. This means that without the right
CORS policy, loading templates from a different domain won't work on all
browsers. Also, loading templates from file:// URL does not work on
some browsers.
This feels like too much overhead for the developer?
----------------------------------------------------
It's important to remember that SCE only applies to interpolation expressions.
If your expressions are constant literals, they're automatically trusted
and you don't need to call $sce.trustAs on them.
e.g. <div ng-html-bind-unsafe="'<b>implicitly trusted</b>'"></div> just works.
Additionally, a[href] and img[src] automatically sanitize their URLs and
do not pass them through $sce.getTrusted. SCE doesn't play a role here.
The included $sceDelegate comes with sane defaults to allow you to load
templates in ng-include from your application's domain without having to
even know about SCE. It blocks loading templates from other domains or
loading templates over http from an https served document. You can
change these by setting your own custom whitelists and blacklists for
matching such URLs.
This significantly reduces the overhead. It is far easier to pay the
small overhead and have an application that's secure and can be audited
to verify that with much more ease than bolting security onto an
application later.
2013-05-14 21:51:39 +00:00
|
|
|
it('should trust and use literal urls', inject(function(
|
|
|
|
|
$rootScope, $httpBackend, $compile) {
|
2013-07-06 04:48:54 +00:00
|
|
|
element = $compile('<div><div ng-include="\'url\'"></div></div>')($rootScope);
|
feat($sce): new $sce service for Strict Contextual Escaping.
$sce is a service that provides Strict Contextual Escaping services to AngularJS.
Strict Contextual Escaping
--------------------------
Strict Contextual Escaping (SCE) is a mode in which AngularJS requires
bindings in certain contexts to result in a value that is marked as safe
to use for that context One example of such a context is binding
arbitrary html controlled by the user via ng-bind-html-unsafe. We
refer to these contexts as privileged or SCE contexts.
As of version 1.2, Angular ships with SCE enabled by default.
Note: When enabled (the default), IE8 in quirks mode is not supported.
In this mode, IE8 allows one to execute arbitrary javascript by the use
of the expression() syntax. Refer
http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx
to learn more about them. You can ensure your document is in standards
mode and not quirks mode by adding <!doctype html> to the top of your
HTML document.
SCE assists in writing code in way that (a) is secure by default and (b)
makes auditing for security vulnerabilities such as XSS, clickjacking,
etc. a lot easier.
Here's an example of a binding in a privileged context:
<input ng-model="userHtml">
<div ng-bind-html-unsafe="{{userHtml}}">
Notice that ng-bind-html-unsafe is bound to {{userHtml}} controlled by
the user. With SCE disabled, this application allows the user to render
arbitrary HTML into the DIV. In a more realistic example, one may be
rendering user comments, blog articles, etc. via bindings. (HTML is
just one example of a context where rendering user controlled input
creates security vulnerabilities.)
For the case of HTML, you might use a library, either on the client side, or on the server side,
to sanitize unsafe HTML before binding to the value and rendering it in the document.
How would you ensure that every place that used these types of bindings was bound to a value that
was sanitized by your library (or returned as safe for rendering by your server?) How can you
ensure that you didn't accidentally delete the line that sanitized the value, or renamed some
properties/fields and forgot to update the binding to the sanitized value?
To be secure by default, you want to ensure that any such bindings are disallowed unless you can
determine that something explicitly says it's safe to use a value for binding in that
context. You can then audit your code (a simple grep would do) to ensure that this is only done
for those values that you can easily tell are safe - because they were received from your server,
sanitized by your library, etc. You can organize your codebase to help with this - perhaps
allowing only the files in a specific directory to do this. Ensuring that the internal API
exposed by that code doesn't markup arbitrary values as safe then becomes a more manageable task.
In the case of AngularJS' SCE service, one uses $sce.trustAs (and
shorthand methods such as $sce.trustAsHtml, etc.) to obtain values that
will be accepted by SCE / privileged contexts.
In privileged contexts, directives and code will bind to the result of
$sce.getTrusted(context, value) rather than to the value directly.
Directives use $sce.parseAs rather than $parse to watch attribute
bindings, which performs the $sce.getTrusted behind the scenes on
non-constant literals.
As an example, ngBindHtmlUnsafe uses $sce.parseAsHtml(binding
expression). Here's the actual code (slightly simplified):
var ngBindHtmlUnsafeDirective = ['$sce', function($sce) {
return function(scope, element, attr) {
scope.$watch($sce.parseAsHtml(attr.ngBindHtmlUnsafe), function(value) {
element.html(value || '');
});
};
}];
Impact on loading templates
---------------------------
This applies both to the ng-include directive as well as templateUrl's
specified by directives.
By default, Angular only loads templates from the same domain and
protocol as the application document. This is done by calling
$sce.getTrustedResourceUrl on the template URL. To load templates from
other domains and/or protocols, you may either either whitelist them or
wrap it into a trusted value.
*Please note*:
The browser's Same Origin Policy and Cross-Origin Resource Sharing
(CORS) policy apply in addition to this and may further restrict whether
the template is successfully loaded. This means that without the right
CORS policy, loading templates from a different domain won't work on all
browsers. Also, loading templates from file:// URL does not work on
some browsers.
This feels like too much overhead for the developer?
----------------------------------------------------
It's important to remember that SCE only applies to interpolation expressions.
If your expressions are constant literals, they're automatically trusted
and you don't need to call $sce.trustAs on them.
e.g. <div ng-html-bind-unsafe="'<b>implicitly trusted</b>'"></div> just works.
Additionally, a[href] and img[src] automatically sanitize their URLs and
do not pass them through $sce.getTrusted. SCE doesn't play a role here.
The included $sceDelegate comes with sane defaults to allow you to load
templates in ng-include from your application's domain without having to
even know about SCE. It blocks loading templates from other domains or
loading templates over http from an https served document. You can
change these by setting your own custom whitelists and blacklists for
matching such URLs.
This significantly reduces the overhead. It is far easier to pay the
small overhead and have an application that's secure and can be audited
to verify that with much more ease than bolting security onto an
application later.
2013-05-14 21:51:39 +00:00
|
|
|
$httpBackend.expect('GET', 'url').respond('template text');
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
$httpBackend.flush();
|
|
|
|
|
expect(element.text()).toEqual('template text');
|
|
|
|
|
dealoc($rootScope);
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
it('should trust and use trusted urls', inject(function($rootScope, $httpBackend, $compile, $sce) {
|
2013-07-06 04:48:54 +00:00
|
|
|
element = $compile('<div><div ng-include="fooUrl"></div></div>')($rootScope);
|
feat($sce): new $sce service for Strict Contextual Escaping.
$sce is a service that provides Strict Contextual Escaping services to AngularJS.
Strict Contextual Escaping
--------------------------
Strict Contextual Escaping (SCE) is a mode in which AngularJS requires
bindings in certain contexts to result in a value that is marked as safe
to use for that context One example of such a context is binding
arbitrary html controlled by the user via ng-bind-html-unsafe. We
refer to these contexts as privileged or SCE contexts.
As of version 1.2, Angular ships with SCE enabled by default.
Note: When enabled (the default), IE8 in quirks mode is not supported.
In this mode, IE8 allows one to execute arbitrary javascript by the use
of the expression() syntax. Refer
http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx
to learn more about them. You can ensure your document is in standards
mode and not quirks mode by adding <!doctype html> to the top of your
HTML document.
SCE assists in writing code in way that (a) is secure by default and (b)
makes auditing for security vulnerabilities such as XSS, clickjacking,
etc. a lot easier.
Here's an example of a binding in a privileged context:
<input ng-model="userHtml">
<div ng-bind-html-unsafe="{{userHtml}}">
Notice that ng-bind-html-unsafe is bound to {{userHtml}} controlled by
the user. With SCE disabled, this application allows the user to render
arbitrary HTML into the DIV. In a more realistic example, one may be
rendering user comments, blog articles, etc. via bindings. (HTML is
just one example of a context where rendering user controlled input
creates security vulnerabilities.)
For the case of HTML, you might use a library, either on the client side, or on the server side,
to sanitize unsafe HTML before binding to the value and rendering it in the document.
How would you ensure that every place that used these types of bindings was bound to a value that
was sanitized by your library (or returned as safe for rendering by your server?) How can you
ensure that you didn't accidentally delete the line that sanitized the value, or renamed some
properties/fields and forgot to update the binding to the sanitized value?
To be secure by default, you want to ensure that any such bindings are disallowed unless you can
determine that something explicitly says it's safe to use a value for binding in that
context. You can then audit your code (a simple grep would do) to ensure that this is only done
for those values that you can easily tell are safe - because they were received from your server,
sanitized by your library, etc. You can organize your codebase to help with this - perhaps
allowing only the files in a specific directory to do this. Ensuring that the internal API
exposed by that code doesn't markup arbitrary values as safe then becomes a more manageable task.
In the case of AngularJS' SCE service, one uses $sce.trustAs (and
shorthand methods such as $sce.trustAsHtml, etc.) to obtain values that
will be accepted by SCE / privileged contexts.
In privileged contexts, directives and code will bind to the result of
$sce.getTrusted(context, value) rather than to the value directly.
Directives use $sce.parseAs rather than $parse to watch attribute
bindings, which performs the $sce.getTrusted behind the scenes on
non-constant literals.
As an example, ngBindHtmlUnsafe uses $sce.parseAsHtml(binding
expression). Here's the actual code (slightly simplified):
var ngBindHtmlUnsafeDirective = ['$sce', function($sce) {
return function(scope, element, attr) {
scope.$watch($sce.parseAsHtml(attr.ngBindHtmlUnsafe), function(value) {
element.html(value || '');
});
};
}];
Impact on loading templates
---------------------------
This applies both to the ng-include directive as well as templateUrl's
specified by directives.
By default, Angular only loads templates from the same domain and
protocol as the application document. This is done by calling
$sce.getTrustedResourceUrl on the template URL. To load templates from
other domains and/or protocols, you may either either whitelist them or
wrap it into a trusted value.
*Please note*:
The browser's Same Origin Policy and Cross-Origin Resource Sharing
(CORS) policy apply in addition to this and may further restrict whether
the template is successfully loaded. This means that without the right
CORS policy, loading templates from a different domain won't work on all
browsers. Also, loading templates from file:// URL does not work on
some browsers.
This feels like too much overhead for the developer?
----------------------------------------------------
It's important to remember that SCE only applies to interpolation expressions.
If your expressions are constant literals, they're automatically trusted
and you don't need to call $sce.trustAs on them.
e.g. <div ng-html-bind-unsafe="'<b>implicitly trusted</b>'"></div> just works.
Additionally, a[href] and img[src] automatically sanitize their URLs and
do not pass them through $sce.getTrusted. SCE doesn't play a role here.
The included $sceDelegate comes with sane defaults to allow you to load
templates in ng-include from your application's domain without having to
even know about SCE. It blocks loading templates from other domains or
loading templates over http from an https served document. You can
change these by setting your own custom whitelists and blacklists for
matching such URLs.
This significantly reduces the overhead. It is far easier to pay the
small overhead and have an application that's secure and can be audited
to verify that with much more ease than bolting security onto an
application later.
2013-05-14 21:51:39 +00:00
|
|
|
$httpBackend.expect('GET', 'http://foo.bar/url').respond('template text');
|
|
|
|
|
$rootScope.fooUrl = $sce.trustAsResourceUrl('http://foo.bar/url');
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
$httpBackend.flush();
|
|
|
|
|
expect(element.text()).toEqual('template text');
|
|
|
|
|
dealoc($rootScope);
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
it('should include an external file', inject(putIntoCache('myUrl', '{{name}}'),
|
2012-03-12 16:39:21 +00:00
|
|
|
function($rootScope, $compile) {
|
2013-07-06 04:48:54 +00:00
|
|
|
element = jqLite('<div><ng:include src="url"></ng:include></div>');
|
|
|
|
|
var body = jqLite(document.body);
|
|
|
|
|
body.append(element);
|
2012-03-08 23:00:38 +00:00
|
|
|
element = $compile(element)($rootScope);
|
2012-03-30 20:40:19 +00:00
|
|
|
$rootScope.name = 'misko';
|
2012-03-08 23:00:38 +00:00
|
|
|
$rootScope.url = 'myUrl';
|
|
|
|
|
$rootScope.$digest();
|
2013-07-06 04:48:54 +00:00
|
|
|
expect(body.text()).toEqual('misko');
|
2013-10-16 13:15:21 +00:00
|
|
|
body.empty();
|
2012-03-08 23:00:38 +00:00
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
2012-03-12 16:38:49 +00:00
|
|
|
it('should support ng-include="src" syntax', inject(putIntoCache('myUrl', '{{name}}'),
|
|
|
|
|
function($rootScope, $compile) {
|
2013-07-06 04:48:54 +00:00
|
|
|
element = jqLite('<div><div ng-include="url"></div></div>');
|
2012-03-12 16:38:49 +00:00
|
|
|
jqLite(document.body).append(element);
|
|
|
|
|
element = $compile(element)($rootScope);
|
|
|
|
|
$rootScope.name = 'Alibaba';
|
|
|
|
|
$rootScope.url = 'myUrl';
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
expect(element.text()).toEqual('Alibaba');
|
2013-10-16 13:15:21 +00:00
|
|
|
jqLite(document.body).empty();
|
2012-03-12 16:38:49 +00:00
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
2013-09-17 23:09:29 +00:00
|
|
|
it('should NOT use untrusted URL expressions ', inject(putIntoCache('myUrl', '{{name}} text'),
|
feat($sce): new $sce service for Strict Contextual Escaping.
$sce is a service that provides Strict Contextual Escaping services to AngularJS.
Strict Contextual Escaping
--------------------------
Strict Contextual Escaping (SCE) is a mode in which AngularJS requires
bindings in certain contexts to result in a value that is marked as safe
to use for that context One example of such a context is binding
arbitrary html controlled by the user via ng-bind-html-unsafe. We
refer to these contexts as privileged or SCE contexts.
As of version 1.2, Angular ships with SCE enabled by default.
Note: When enabled (the default), IE8 in quirks mode is not supported.
In this mode, IE8 allows one to execute arbitrary javascript by the use
of the expression() syntax. Refer
http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx
to learn more about them. You can ensure your document is in standards
mode and not quirks mode by adding <!doctype html> to the top of your
HTML document.
SCE assists in writing code in way that (a) is secure by default and (b)
makes auditing for security vulnerabilities such as XSS, clickjacking,
etc. a lot easier.
Here's an example of a binding in a privileged context:
<input ng-model="userHtml">
<div ng-bind-html-unsafe="{{userHtml}}">
Notice that ng-bind-html-unsafe is bound to {{userHtml}} controlled by
the user. With SCE disabled, this application allows the user to render
arbitrary HTML into the DIV. In a more realistic example, one may be
rendering user comments, blog articles, etc. via bindings. (HTML is
just one example of a context where rendering user controlled input
creates security vulnerabilities.)
For the case of HTML, you might use a library, either on the client side, or on the server side,
to sanitize unsafe HTML before binding to the value and rendering it in the document.
How would you ensure that every place that used these types of bindings was bound to a value that
was sanitized by your library (or returned as safe for rendering by your server?) How can you
ensure that you didn't accidentally delete the line that sanitized the value, or renamed some
properties/fields and forgot to update the binding to the sanitized value?
To be secure by default, you want to ensure that any such bindings are disallowed unless you can
determine that something explicitly says it's safe to use a value for binding in that
context. You can then audit your code (a simple grep would do) to ensure that this is only done
for those values that you can easily tell are safe - because they were received from your server,
sanitized by your library, etc. You can organize your codebase to help with this - perhaps
allowing only the files in a specific directory to do this. Ensuring that the internal API
exposed by that code doesn't markup arbitrary values as safe then becomes a more manageable task.
In the case of AngularJS' SCE service, one uses $sce.trustAs (and
shorthand methods such as $sce.trustAsHtml, etc.) to obtain values that
will be accepted by SCE / privileged contexts.
In privileged contexts, directives and code will bind to the result of
$sce.getTrusted(context, value) rather than to the value directly.
Directives use $sce.parseAs rather than $parse to watch attribute
bindings, which performs the $sce.getTrusted behind the scenes on
non-constant literals.
As an example, ngBindHtmlUnsafe uses $sce.parseAsHtml(binding
expression). Here's the actual code (slightly simplified):
var ngBindHtmlUnsafeDirective = ['$sce', function($sce) {
return function(scope, element, attr) {
scope.$watch($sce.parseAsHtml(attr.ngBindHtmlUnsafe), function(value) {
element.html(value || '');
});
};
}];
Impact on loading templates
---------------------------
This applies both to the ng-include directive as well as templateUrl's
specified by directives.
By default, Angular only loads templates from the same domain and
protocol as the application document. This is done by calling
$sce.getTrustedResourceUrl on the template URL. To load templates from
other domains and/or protocols, you may either either whitelist them or
wrap it into a trusted value.
*Please note*:
The browser's Same Origin Policy and Cross-Origin Resource Sharing
(CORS) policy apply in addition to this and may further restrict whether
the template is successfully loaded. This means that without the right
CORS policy, loading templates from a different domain won't work on all
browsers. Also, loading templates from file:// URL does not work on
some browsers.
This feels like too much overhead for the developer?
----------------------------------------------------
It's important to remember that SCE only applies to interpolation expressions.
If your expressions are constant literals, they're automatically trusted
and you don't need to call $sce.trustAs on them.
e.g. <div ng-html-bind-unsafe="'<b>implicitly trusted</b>'"></div> just works.
Additionally, a[href] and img[src] automatically sanitize their URLs and
do not pass them through $sce.getTrusted. SCE doesn't play a role here.
The included $sceDelegate comes with sane defaults to allow you to load
templates in ng-include from your application's domain without having to
even know about SCE. It blocks loading templates from other domains or
loading templates over http from an https served document. You can
change these by setting your own custom whitelists and blacklists for
matching such URLs.
This significantly reduces the overhead. It is far easier to pay the
small overhead and have an application that's secure and can be audited
to verify that with much more ease than bolting security onto an
application later.
2013-05-14 21:51:39 +00:00
|
|
|
function($rootScope, $compile, $sce) {
|
|
|
|
|
element = jqLite('<ng:include src="url"></ng:include>');
|
|
|
|
|
jqLite(document.body).append(element);
|
|
|
|
|
element = $compile(element)($rootScope);
|
|
|
|
|
$rootScope.name = 'chirayu';
|
2013-09-17 23:09:29 +00:00
|
|
|
$rootScope.url = 'http://example.com/myUrl';
|
|
|
|
|
expect(function() { $rootScope.$digest(); }).toThrowMinErr(
|
|
|
|
|
'$sce', 'insecurl',
|
|
|
|
|
/Blocked loading resource from url not allowed by \$sceDelegate policy. URL: http:\/\/example.com\/myUrl.*/);
|
2013-10-16 13:15:21 +00:00
|
|
|
jqLite(document.body).empty();
|
feat($sce): new $sce service for Strict Contextual Escaping.
$sce is a service that provides Strict Contextual Escaping services to AngularJS.
Strict Contextual Escaping
--------------------------
Strict Contextual Escaping (SCE) is a mode in which AngularJS requires
bindings in certain contexts to result in a value that is marked as safe
to use for that context One example of such a context is binding
arbitrary html controlled by the user via ng-bind-html-unsafe. We
refer to these contexts as privileged or SCE contexts.
As of version 1.2, Angular ships with SCE enabled by default.
Note: When enabled (the default), IE8 in quirks mode is not supported.
In this mode, IE8 allows one to execute arbitrary javascript by the use
of the expression() syntax. Refer
http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx
to learn more about them. You can ensure your document is in standards
mode and not quirks mode by adding <!doctype html> to the top of your
HTML document.
SCE assists in writing code in way that (a) is secure by default and (b)
makes auditing for security vulnerabilities such as XSS, clickjacking,
etc. a lot easier.
Here's an example of a binding in a privileged context:
<input ng-model="userHtml">
<div ng-bind-html-unsafe="{{userHtml}}">
Notice that ng-bind-html-unsafe is bound to {{userHtml}} controlled by
the user. With SCE disabled, this application allows the user to render
arbitrary HTML into the DIV. In a more realistic example, one may be
rendering user comments, blog articles, etc. via bindings. (HTML is
just one example of a context where rendering user controlled input
creates security vulnerabilities.)
For the case of HTML, you might use a library, either on the client side, or on the server side,
to sanitize unsafe HTML before binding to the value and rendering it in the document.
How would you ensure that every place that used these types of bindings was bound to a value that
was sanitized by your library (or returned as safe for rendering by your server?) How can you
ensure that you didn't accidentally delete the line that sanitized the value, or renamed some
properties/fields and forgot to update the binding to the sanitized value?
To be secure by default, you want to ensure that any such bindings are disallowed unless you can
determine that something explicitly says it's safe to use a value for binding in that
context. You can then audit your code (a simple grep would do) to ensure that this is only done
for those values that you can easily tell are safe - because they were received from your server,
sanitized by your library, etc. You can organize your codebase to help with this - perhaps
allowing only the files in a specific directory to do this. Ensuring that the internal API
exposed by that code doesn't markup arbitrary values as safe then becomes a more manageable task.
In the case of AngularJS' SCE service, one uses $sce.trustAs (and
shorthand methods such as $sce.trustAsHtml, etc.) to obtain values that
will be accepted by SCE / privileged contexts.
In privileged contexts, directives and code will bind to the result of
$sce.getTrusted(context, value) rather than to the value directly.
Directives use $sce.parseAs rather than $parse to watch attribute
bindings, which performs the $sce.getTrusted behind the scenes on
non-constant literals.
As an example, ngBindHtmlUnsafe uses $sce.parseAsHtml(binding
expression). Here's the actual code (slightly simplified):
var ngBindHtmlUnsafeDirective = ['$sce', function($sce) {
return function(scope, element, attr) {
scope.$watch($sce.parseAsHtml(attr.ngBindHtmlUnsafe), function(value) {
element.html(value || '');
});
};
}];
Impact on loading templates
---------------------------
This applies both to the ng-include directive as well as templateUrl's
specified by directives.
By default, Angular only loads templates from the same domain and
protocol as the application document. This is done by calling
$sce.getTrustedResourceUrl on the template URL. To load templates from
other domains and/or protocols, you may either either whitelist them or
wrap it into a trusted value.
*Please note*:
The browser's Same Origin Policy and Cross-Origin Resource Sharing
(CORS) policy apply in addition to this and may further restrict whether
the template is successfully loaded. This means that without the right
CORS policy, loading templates from a different domain won't work on all
browsers. Also, loading templates from file:// URL does not work on
some browsers.
This feels like too much overhead for the developer?
----------------------------------------------------
It's important to remember that SCE only applies to interpolation expressions.
If your expressions are constant literals, they're automatically trusted
and you don't need to call $sce.trustAs on them.
e.g. <div ng-html-bind-unsafe="'<b>implicitly trusted</b>'"></div> just works.
Additionally, a[href] and img[src] automatically sanitize their URLs and
do not pass them through $sce.getTrusted. SCE doesn't play a role here.
The included $sceDelegate comes with sane defaults to allow you to load
templates in ng-include from your application's domain without having to
even know about SCE. It blocks loading templates from other domains or
loading templates over http from an https served document. You can
change these by setting your own custom whitelists and blacklists for
matching such URLs.
This significantly reduces the overhead. It is far easier to pay the
small overhead and have an application that's secure and can be audited
to verify that with much more ease than bolting security onto an
application later.
2013-05-14 21:51:39 +00:00
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
it('should NOT use mistyped expressions ', inject(putIntoCache('myUrl', '{{name}} text'),
|
|
|
|
|
function($rootScope, $compile, $sce) {
|
|
|
|
|
element = jqLite('<ng:include src="url"></ng:include>');
|
|
|
|
|
jqLite(document.body).append(element);
|
|
|
|
|
element = $compile(element)($rootScope);
|
|
|
|
|
$rootScope.name = 'chirayu';
|
2013-09-17 23:09:29 +00:00
|
|
|
$rootScope.url = $sce.trustAsUrl('http://example.com/myUrl');
|
|
|
|
|
expect(function() { $rootScope.$digest(); }).toThrowMinErr(
|
|
|
|
|
'$sce', 'insecurl',
|
|
|
|
|
/Blocked loading resource from url not allowed by \$sceDelegate policy. URL: http:\/\/example.com\/myUrl.*/);
|
2013-10-16 13:15:21 +00:00
|
|
|
jqLite(document.body).empty();
|
feat($sce): new $sce service for Strict Contextual Escaping.
$sce is a service that provides Strict Contextual Escaping services to AngularJS.
Strict Contextual Escaping
--------------------------
Strict Contextual Escaping (SCE) is a mode in which AngularJS requires
bindings in certain contexts to result in a value that is marked as safe
to use for that context One example of such a context is binding
arbitrary html controlled by the user via ng-bind-html-unsafe. We
refer to these contexts as privileged or SCE contexts.
As of version 1.2, Angular ships with SCE enabled by default.
Note: When enabled (the default), IE8 in quirks mode is not supported.
In this mode, IE8 allows one to execute arbitrary javascript by the use
of the expression() syntax. Refer
http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx
to learn more about them. You can ensure your document is in standards
mode and not quirks mode by adding <!doctype html> to the top of your
HTML document.
SCE assists in writing code in way that (a) is secure by default and (b)
makes auditing for security vulnerabilities such as XSS, clickjacking,
etc. a lot easier.
Here's an example of a binding in a privileged context:
<input ng-model="userHtml">
<div ng-bind-html-unsafe="{{userHtml}}">
Notice that ng-bind-html-unsafe is bound to {{userHtml}} controlled by
the user. With SCE disabled, this application allows the user to render
arbitrary HTML into the DIV. In a more realistic example, one may be
rendering user comments, blog articles, etc. via bindings. (HTML is
just one example of a context where rendering user controlled input
creates security vulnerabilities.)
For the case of HTML, you might use a library, either on the client side, or on the server side,
to sanitize unsafe HTML before binding to the value and rendering it in the document.
How would you ensure that every place that used these types of bindings was bound to a value that
was sanitized by your library (or returned as safe for rendering by your server?) How can you
ensure that you didn't accidentally delete the line that sanitized the value, or renamed some
properties/fields and forgot to update the binding to the sanitized value?
To be secure by default, you want to ensure that any such bindings are disallowed unless you can
determine that something explicitly says it's safe to use a value for binding in that
context. You can then audit your code (a simple grep would do) to ensure that this is only done
for those values that you can easily tell are safe - because they were received from your server,
sanitized by your library, etc. You can organize your codebase to help with this - perhaps
allowing only the files in a specific directory to do this. Ensuring that the internal API
exposed by that code doesn't markup arbitrary values as safe then becomes a more manageable task.
In the case of AngularJS' SCE service, one uses $sce.trustAs (and
shorthand methods such as $sce.trustAsHtml, etc.) to obtain values that
will be accepted by SCE / privileged contexts.
In privileged contexts, directives and code will bind to the result of
$sce.getTrusted(context, value) rather than to the value directly.
Directives use $sce.parseAs rather than $parse to watch attribute
bindings, which performs the $sce.getTrusted behind the scenes on
non-constant literals.
As an example, ngBindHtmlUnsafe uses $sce.parseAsHtml(binding
expression). Here's the actual code (slightly simplified):
var ngBindHtmlUnsafeDirective = ['$sce', function($sce) {
return function(scope, element, attr) {
scope.$watch($sce.parseAsHtml(attr.ngBindHtmlUnsafe), function(value) {
element.html(value || '');
});
};
}];
Impact on loading templates
---------------------------
This applies both to the ng-include directive as well as templateUrl's
specified by directives.
By default, Angular only loads templates from the same domain and
protocol as the application document. This is done by calling
$sce.getTrustedResourceUrl on the template URL. To load templates from
other domains and/or protocols, you may either either whitelist them or
wrap it into a trusted value.
*Please note*:
The browser's Same Origin Policy and Cross-Origin Resource Sharing
(CORS) policy apply in addition to this and may further restrict whether
the template is successfully loaded. This means that without the right
CORS policy, loading templates from a different domain won't work on all
browsers. Also, loading templates from file:// URL does not work on
some browsers.
This feels like too much overhead for the developer?
----------------------------------------------------
It's important to remember that SCE only applies to interpolation expressions.
If your expressions are constant literals, they're automatically trusted
and you don't need to call $sce.trustAs on them.
e.g. <div ng-html-bind-unsafe="'<b>implicitly trusted</b>'"></div> just works.
Additionally, a[href] and img[src] automatically sanitize their URLs and
do not pass them through $sce.getTrusted. SCE doesn't play a role here.
The included $sceDelegate comes with sane defaults to allow you to load
templates in ng-include from your application's domain without having to
even know about SCE. It blocks loading templates from other domains or
loading templates over http from an https served document. You can
change these by setting your own custom whitelists and blacklists for
matching such URLs.
This significantly reduces the overhead. It is far easier to pay the
small overhead and have an application that's secure and can be audited
to verify that with much more ease than bolting security onto an
application later.
2013-05-14 21:51:39 +00:00
|
|
|
}));
|
|
|
|
|
|
2013-09-17 23:09:29 +00:00
|
|
|
|
2012-03-08 23:00:38 +00:00
|
|
|
it('should remove previously included text if a falsy value is bound to src', inject(
|
|
|
|
|
putIntoCache('myUrl', '{{name}}'),
|
2012-03-12 16:38:49 +00:00
|
|
|
function($rootScope, $compile) {
|
2013-07-06 04:48:54 +00:00
|
|
|
element = jqLite('<div><ng:include src="url"></ng:include></div>');
|
2012-03-08 23:00:38 +00:00
|
|
|
element = $compile(element)($rootScope);
|
2012-03-30 20:40:19 +00:00
|
|
|
$rootScope.name = 'igor';
|
2012-03-08 23:00:38 +00:00
|
|
|
$rootScope.url = 'myUrl';
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
|
|
|
|
|
expect(element.text()).toEqual('igor');
|
|
|
|
|
|
|
|
|
|
$rootScope.url = undefined;
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
|
|
|
|
|
expect(element.text()).toEqual('');
|
|
|
|
|
}));
|
|
|
|
|
|
2013-05-02 19:12:00 +00:00
|
|
|
it('should fire $includeContentRequested event on scope after making the xhr call', inject(
|
|
|
|
|
function ($rootScope, $compile, $httpBackend) {
|
|
|
|
|
var contentRequestedSpy = jasmine.createSpy('content requested').andCallFake(function (event) {
|
|
|
|
|
expect(event.targetScope).toBe($rootScope);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$httpBackend.whenGET('url').respond('my partial');
|
|
|
|
|
$rootScope.$on('$includeContentRequested', contentRequestedSpy);
|
|
|
|
|
|
2013-07-06 04:48:54 +00:00
|
|
|
element = $compile('<div><div><ng:include src="\'url\'"></ng:include></div></div>')($rootScope);
|
2013-05-02 19:12:00 +00:00
|
|
|
$rootScope.$digest();
|
|
|
|
|
|
|
|
|
|
expect(contentRequestedSpy).toHaveBeenCalledOnce();
|
|
|
|
|
|
|
|
|
|
$httpBackend.flush();
|
|
|
|
|
}));
|
2012-03-08 23:00:38 +00:00
|
|
|
|
2012-03-30 20:54:43 +00:00
|
|
|
it('should fire $includeContentLoaded event on child scope after linking the content', inject(
|
2012-03-08 23:00:38 +00:00
|
|
|
function($rootScope, $compile, $templateCache) {
|
2012-03-30 20:54:43 +00:00
|
|
|
var contentLoadedSpy = jasmine.createSpy('content loaded').andCallFake(function(event) {
|
|
|
|
|
expect(event.targetScope.$parent).toBe($rootScope);
|
2012-03-08 23:00:38 +00:00
|
|
|
expect(element.text()).toBe('partial content');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$templateCache.put('url', [200, 'partial content', {}]);
|
2012-03-08 23:42:35 +00:00
|
|
|
$rootScope.$on('$includeContentLoaded', contentLoadedSpy);
|
2012-03-08 23:00:38 +00:00
|
|
|
|
2013-07-06 04:48:54 +00:00
|
|
|
element = $compile('<div><div><ng:include src="\'url\'"></ng:include></div></div>')($rootScope);
|
2012-03-08 23:00:38 +00:00
|
|
|
$rootScope.$digest();
|
|
|
|
|
|
|
|
|
|
expect(contentLoadedSpy).toHaveBeenCalledOnce();
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
it('should evaluate onload expression when a partial is loaded', inject(
|
|
|
|
|
putIntoCache('myUrl', 'my partial'),
|
2012-03-12 16:39:21 +00:00
|
|
|
function($rootScope, $compile) {
|
2013-07-06 04:48:54 +00:00
|
|
|
element = jqLite('<div><div><ng:include src="url" onload="loaded = true"></ng:include></div></div>');
|
2012-03-08 23:00:38 +00:00
|
|
|
element = $compile(element)($rootScope);
|
|
|
|
|
|
|
|
|
|
expect($rootScope.loaded).not.toBeDefined();
|
|
|
|
|
|
|
|
|
|
$rootScope.url = 'myUrl';
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
|
|
|
|
|
expect(element.text()).toEqual('my partial');
|
|
|
|
|
expect($rootScope.loaded).toBe(true);
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
2012-03-30 20:40:19 +00:00
|
|
|
it('should create child scope and destroy old one', inject(
|
|
|
|
|
function($rootScope, $compile, $httpBackend) {
|
|
|
|
|
$httpBackend.whenGET('url1').respond('partial {{$parent.url}}');
|
|
|
|
|
$httpBackend.whenGET('url2').respond(404);
|
|
|
|
|
|
2013-07-06 04:48:54 +00:00
|
|
|
element = $compile('<div><ng:include src="url"></ng:include></div>')($rootScope);
|
2012-03-30 20:40:19 +00:00
|
|
|
expect(element.children().scope()).toBeFalsy();
|
2012-03-08 23:00:38 +00:00
|
|
|
|
2012-03-30 20:40:19 +00:00
|
|
|
$rootScope.url = 'url1';
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
$httpBackend.flush();
|
2012-04-04 02:01:57 +00:00
|
|
|
expect(element.children().scope().$parent).toBe($rootScope);
|
2012-03-30 20:40:19 +00:00
|
|
|
expect(element.text()).toBe('partial url1');
|
2012-03-08 23:00:38 +00:00
|
|
|
|
2012-03-30 20:40:19 +00:00
|
|
|
$rootScope.url = 'url2';
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
$httpBackend.flush();
|
2012-04-04 02:01:57 +00:00
|
|
|
expect($rootScope.$$childHead).toBeFalsy();
|
2012-03-30 20:40:19 +00:00
|
|
|
expect(element.text()).toBe('');
|
|
|
|
|
|
|
|
|
|
$rootScope.url = 'url1';
|
2012-03-08 23:00:38 +00:00
|
|
|
$rootScope.$digest();
|
2012-04-04 02:01:57 +00:00
|
|
|
expect(element.children().scope().$parent).toBe($rootScope);
|
2012-03-08 23:00:38 +00:00
|
|
|
|
|
|
|
|
$rootScope.url = null;
|
|
|
|
|
$rootScope.$digest();
|
2012-04-04 02:01:57 +00:00
|
|
|
expect($rootScope.$$childHead).toBeFalsy();
|
2012-03-08 23:00:38 +00:00
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
it('should do xhr request and cache it',
|
2012-03-12 16:39:21 +00:00
|
|
|
inject(function($rootScope, $httpBackend, $compile) {
|
2013-07-06 04:48:54 +00:00
|
|
|
element = $compile('<div><ng:include src="url"></ng:include></div>')($rootScope);
|
2012-03-08 23:00:38 +00:00
|
|
|
$httpBackend.expect('GET', 'myUrl').respond('my partial');
|
|
|
|
|
|
|
|
|
|
$rootScope.url = 'myUrl';
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
$httpBackend.flush();
|
|
|
|
|
expect(element.text()).toEqual('my partial');
|
|
|
|
|
|
|
|
|
|
$rootScope.url = null;
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
expect(element.text()).toEqual('');
|
|
|
|
|
|
|
|
|
|
$rootScope.url = 'myUrl';
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
expect(element.text()).toEqual('my partial');
|
|
|
|
|
dealoc($rootScope);
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
it('should clear content when error during xhr request',
|
|
|
|
|
inject(function($httpBackend, $compile, $rootScope) {
|
2013-07-06 04:48:54 +00:00
|
|
|
element = $compile('<div><ng:include src="url">content</ng:include></div>')($rootScope);
|
2012-03-08 23:00:38 +00:00
|
|
|
$httpBackend.expect('GET', 'myUrl').respond(404, '');
|
|
|
|
|
|
|
|
|
|
$rootScope.url = 'myUrl';
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
$httpBackend.flush();
|
|
|
|
|
|
|
|
|
|
expect(element.text()).toBe('');
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
it('should be async even if served from cache', inject(
|
|
|
|
|
putIntoCache('myUrl', 'my partial'),
|
2012-03-12 16:39:21 +00:00
|
|
|
function($rootScope, $compile) {
|
2013-07-06 04:48:54 +00:00
|
|
|
element = $compile('<div><ng:include src="url"></ng:include></div>')($rootScope);
|
2012-03-08 23:00:38 +00:00
|
|
|
|
|
|
|
|
$rootScope.url = 'myUrl';
|
|
|
|
|
|
|
|
|
|
var called = 0;
|
|
|
|
|
// we want to assert only during first watch
|
|
|
|
|
$rootScope.$watch(function() {
|
|
|
|
|
if (!called++) expect(element.text()).toBe('');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
expect(element.text()).toBe('my partial');
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
it('should discard pending xhr callbacks if a new template is requested before the current ' +
|
|
|
|
|
'finished loading', inject(function($rootScope, $compile, $httpBackend) {
|
2013-07-06 04:48:54 +00:00
|
|
|
element = jqLite("<div><ng:include src='templateUrl'></ng:include></div>");
|
2013-02-26 09:22:12 +00:00
|
|
|
var log = {};
|
2012-03-08 23:00:38 +00:00
|
|
|
|
|
|
|
|
$rootScope.templateUrl = 'myUrl1';
|
|
|
|
|
$rootScope.logger = function(msg) {
|
2013-02-26 09:22:12 +00:00
|
|
|
log[msg] = true;
|
2012-03-08 23:00:38 +00:00
|
|
|
}
|
|
|
|
|
$compile(element)($rootScope);
|
2013-02-26 09:22:12 +00:00
|
|
|
expect(log).toEqual({});
|
2012-03-08 23:00:38 +00:00
|
|
|
|
|
|
|
|
$httpBackend.expect('GET', 'myUrl1').respond('<div>{{logger("url1")}}</div>');
|
|
|
|
|
$rootScope.$digest();
|
2013-02-26 09:22:12 +00:00
|
|
|
expect(log).toEqual({});
|
2012-03-08 23:00:38 +00:00
|
|
|
$rootScope.templateUrl = 'myUrl2';
|
|
|
|
|
$httpBackend.expect('GET', 'myUrl2').respond('<div>{{logger("url2")}}</div>');
|
|
|
|
|
$httpBackend.flush(); // now that we have two requests pending, flush!
|
|
|
|
|
|
2013-02-26 09:22:12 +00:00
|
|
|
expect(log).toEqual({ url2 : true });
|
2012-03-08 23:00:38 +00:00
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
it('should compile only the content', inject(function($compile, $rootScope, $templateCache) {
|
|
|
|
|
// regression
|
|
|
|
|
|
2012-03-08 23:42:35 +00:00
|
|
|
var onload = jasmine.createSpy('$includeContentLoaded');
|
|
|
|
|
$rootScope.$on('$includeContentLoaded', onload);
|
2012-03-08 23:00:38 +00:00
|
|
|
$templateCache.put('tpl.html', [200, 'partial {{tpl}}', {}]);
|
|
|
|
|
|
2012-03-09 08:00:05 +00:00
|
|
|
element = $compile('<div><div ng-repeat="i in [1]">' +
|
2012-03-08 23:00:38 +00:00
|
|
|
'<ng:include src="tpl"></ng:include></div></div>')($rootScope);
|
|
|
|
|
expect(onload).not.toHaveBeenCalled();
|
|
|
|
|
|
|
|
|
|
$rootScope.$apply(function() {
|
|
|
|
|
$rootScope.tpl = 'tpl.html';
|
|
|
|
|
});
|
|
|
|
|
expect(onload).toHaveBeenCalledOnce();
|
2013-07-06 04:48:54 +00:00
|
|
|
|
|
|
|
|
$rootScope.tpl = '';
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
dealoc(element);
|
2012-03-08 23:00:38 +00:00
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
2013-09-20 18:04:37 +00:00
|
|
|
it('should not break attribute bindings on the same element', inject(function($compile, $rootScope, $httpBackend) {
|
|
|
|
|
// regression #3793
|
|
|
|
|
|
|
|
|
|
element = $compile('<div><span foo="#/{{hrefUrl}}" ng:include="includeUrl"></span></div>')($rootScope);
|
|
|
|
|
$httpBackend.expect('GET', 'url1').respond('template text 1');
|
|
|
|
|
$rootScope.hrefUrl = 'fooUrl1';
|
|
|
|
|
$rootScope.includeUrl = 'url1';
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
$httpBackend.flush();
|
|
|
|
|
expect(element.text()).toBe('template text 1');
|
|
|
|
|
expect(element.find('span').attr('foo')).toBe('#/fooUrl1');
|
|
|
|
|
|
|
|
|
|
$httpBackend.expect('GET', 'url2').respond('template text 2');
|
|
|
|
|
$rootScope.includeUrl = 'url2';
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
$httpBackend.flush();
|
|
|
|
|
expect(element.text()).toBe('template text 2');
|
|
|
|
|
expect(element.find('span').attr('foo')).toBe('#/fooUrl1');
|
|
|
|
|
|
|
|
|
|
$rootScope.hrefUrl = 'fooUrl2';
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
expect(element.text()).toBe('template text 2');
|
|
|
|
|
expect(element.find('span').attr('foo')).toBe('#/fooUrl2');
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
2013-11-20 19:04:38 +00:00
|
|
|
it('should exec scripts when jQuery is included', inject(function($compile, $rootScope, $httpBackend) {
|
|
|
|
|
if (!jQuery) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
element = $compile('<div><span ng-include="includeUrl"></span></div>')($rootScope);
|
|
|
|
|
|
|
|
|
|
// the element needs to be appended for the script to run
|
|
|
|
|
element.appendTo(document.body);
|
|
|
|
|
window._ngIncludeCausesScriptToRun = false;
|
|
|
|
|
$httpBackend.expect('GET', 'url1').respond('<script>window._ngIncludeCausesScriptToRun = true;</script>');
|
|
|
|
|
$rootScope.includeUrl = 'url1';
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
$httpBackend.flush();
|
|
|
|
|
|
|
|
|
|
expect(window._ngIncludeCausesScriptToRun).toBe(true);
|
|
|
|
|
|
|
|
|
|
// IE8 doesn't like deleting properties of window
|
|
|
|
|
window._ngIncludeCausesScriptToRun = undefined;
|
|
|
|
|
try {
|
|
|
|
|
delete window._ngIncludeCausesScriptToRun;
|
|
|
|
|
} catch (e) {}
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
2013-11-02 09:22:26 +00:00
|
|
|
describe('autoscroll', function() {
|
2012-03-08 23:00:38 +00:00
|
|
|
var autoScrollSpy;
|
|
|
|
|
|
|
|
|
|
function spyOnAnchorScroll() {
|
|
|
|
|
return function($provide) {
|
|
|
|
|
autoScrollSpy = jasmine.createSpy('$anchorScroll');
|
|
|
|
|
$provide.value('$anchorScroll', autoScrollSpy);
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function compileAndLink(tpl) {
|
|
|
|
|
return function($compile, $rootScope) {
|
|
|
|
|
element = $compile(tpl)($rootScope);
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
2013-11-02 09:22:26 +00:00
|
|
|
beforeEach(module(spyOnAnchorScroll(), 'mock.animate'));
|
2012-03-08 23:00:38 +00:00
|
|
|
beforeEach(inject(
|
|
|
|
|
putIntoCache('template.html', 'CONTENT'),
|
|
|
|
|
putIntoCache('another.html', 'CONTENT')));
|
|
|
|
|
|
|
|
|
|
it('should call $anchorScroll if autoscroll attribute is present', inject(
|
2013-07-06 04:48:54 +00:00
|
|
|
compileAndLink('<div><ng:include src="tpl" autoscroll></ng:include></div>'),
|
2013-11-02 09:22:26 +00:00
|
|
|
function($rootScope, $animate, $timeout) {
|
|
|
|
|
|
|
|
|
|
$rootScope.$apply(function () {
|
|
|
|
|
$rootScope.tpl = 'template.html';
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
expect(autoScrollSpy).not.toHaveBeenCalled();
|
|
|
|
|
$animate.flushNext('enter');
|
|
|
|
|
$timeout.flush();
|
|
|
|
|
|
2012-03-08 23:00:38 +00:00
|
|
|
expect(autoScrollSpy).toHaveBeenCalledOnce();
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
2013-11-02 09:22:26 +00:00
|
|
|
it('should call $anchorScroll if autoscroll evaluates to true',
|
|
|
|
|
inject(function($rootScope, $compile, $animate, $timeout) {
|
|
|
|
|
|
|
|
|
|
element = $compile('<div><ng:include src="tpl" autoscroll="value"></ng:include></div>')($rootScope);
|
|
|
|
|
|
|
|
|
|
$rootScope.$apply(function () {
|
|
|
|
|
$rootScope.tpl = 'template.html';
|
|
|
|
|
$rootScope.value = true;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$animate.flushNext('enter');
|
|
|
|
|
$timeout.flush();
|
|
|
|
|
|
|
|
|
|
$rootScope.$apply(function () {
|
|
|
|
|
$rootScope.tpl = 'another.html';
|
|
|
|
|
$rootScope.value = 'some-string';
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$animate.flushNext('leave');
|
|
|
|
|
$animate.flushNext('enter');
|
|
|
|
|
$timeout.flush();
|
|
|
|
|
|
|
|
|
|
$rootScope.$apply(function() {
|
|
|
|
|
$rootScope.tpl = 'template.html';
|
|
|
|
|
$rootScope.value = 100;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$animate.flushNext('leave');
|
|
|
|
|
$animate.flushNext('enter');
|
|
|
|
|
$timeout.flush();
|
|
|
|
|
|
2012-03-08 23:00:38 +00:00
|
|
|
expect(autoScrollSpy).toHaveBeenCalled();
|
|
|
|
|
expect(autoScrollSpy.callCount).toBe(3);
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
it('should not call $anchorScroll if autoscroll attribute is not present', inject(
|
2013-07-06 04:48:54 +00:00
|
|
|
compileAndLink('<div><ng:include src="tpl"></ng:include></div>'),
|
2013-11-02 09:22:26 +00:00
|
|
|
function($rootScope, $animate, $timeout) {
|
|
|
|
|
|
|
|
|
|
$rootScope.$apply(function () {
|
|
|
|
|
$rootScope.tpl = 'template.html';
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$animate.flushNext('enter');
|
|
|
|
|
$timeout.flush();
|
2012-03-08 23:00:38 +00:00
|
|
|
expect(autoScrollSpy).not.toHaveBeenCalled();
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
2013-11-02 09:22:26 +00:00
|
|
|
it('should not call $anchorScroll if autoscroll evaluates to false',
|
|
|
|
|
inject(function($rootScope, $compile, $animate, $timeout) {
|
|
|
|
|
|
|
|
|
|
element = $compile('<div><ng:include src="tpl" autoscroll="value"></ng:include></div>')($rootScope);
|
|
|
|
|
|
|
|
|
|
$rootScope.$apply(function () {
|
|
|
|
|
$rootScope.tpl = 'template.html';
|
|
|
|
|
$rootScope.value = false;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$animate.flushNext('enter');
|
|
|
|
|
$timeout.flush();
|
|
|
|
|
|
|
|
|
|
$rootScope.$apply(function () {
|
|
|
|
|
$rootScope.tpl = 'template.html';
|
|
|
|
|
$rootScope.value = undefined;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$rootScope.$apply(function () {
|
|
|
|
|
$rootScope.tpl = 'template.html';
|
|
|
|
|
$rootScope.value = null;
|
|
|
|
|
});
|
|
|
|
|
|
2012-03-08 23:00:38 +00:00
|
|
|
expect(autoScrollSpy).not.toHaveBeenCalled();
|
|
|
|
|
}));
|
2013-11-02 09:22:26 +00:00
|
|
|
|
|
|
|
|
it('should only call $anchorScroll after the "enter" animation completes', inject(
|
|
|
|
|
compileAndLink('<div><ng:include src="tpl" autoscroll></ng:include></div>'),
|
|
|
|
|
function($rootScope, $animate, $timeout) {
|
|
|
|
|
expect(autoScrollSpy).not.toHaveBeenCalled();
|
|
|
|
|
|
|
|
|
|
$rootScope.$apply("tpl = 'template.html'");
|
|
|
|
|
$animate.flushNext('enter');
|
|
|
|
|
$timeout.flush();
|
|
|
|
|
|
|
|
|
|
expect(autoScrollSpy).toHaveBeenCalledOnce();
|
|
|
|
|
}));
|
2012-03-08 23:00:38 +00:00
|
|
|
});
|
|
|
|
|
});
|
2013-03-20 23:24:23 +00:00
|
|
|
|
2013-11-14 21:50:36 +00:00
|
|
|
describe('ngInclude and transcludes', function() {
|
2013-11-22 05:54:42 +00:00
|
|
|
var element, directive;
|
|
|
|
|
|
|
|
|
|
beforeEach(module(function($compileProvider) {
|
|
|
|
|
element = null;
|
|
|
|
|
directive = $compileProvider.directive;
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
afterEach(function() {
|
|
|
|
|
if (element) {
|
|
|
|
|
dealoc(element);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2013-11-14 21:50:36 +00:00
|
|
|
it('should allow access to directive controller from children when used in a replace template', function() {
|
|
|
|
|
var controller;
|
2013-11-22 05:54:42 +00:00
|
|
|
module(function() {
|
2013-11-14 21:50:36 +00:00
|
|
|
directive('template', valueFn({
|
|
|
|
|
template: '<div ng-include="\'include.html\'"></div>',
|
|
|
|
|
replace: true,
|
|
|
|
|
controller: function() {
|
|
|
|
|
this.flag = true;
|
|
|
|
|
}
|
|
|
|
|
}));
|
|
|
|
|
directive('test', valueFn({
|
|
|
|
|
require: '^template',
|
|
|
|
|
link: function(scope, el, attr, ctrl) {
|
|
|
|
|
controller = ctrl;
|
|
|
|
|
}
|
|
|
|
|
}));
|
|
|
|
|
});
|
|
|
|
|
inject(function($compile, $rootScope, $httpBackend) {
|
|
|
|
|
$httpBackend.expectGET('include.html').respond('<div><div test></div></div>');
|
2013-11-22 05:54:42 +00:00
|
|
|
element = $compile('<div><div template></div></div>')($rootScope);
|
2013-11-14 21:50:36 +00:00
|
|
|
$rootScope.$apply();
|
|
|
|
|
$httpBackend.flush();
|
|
|
|
|
expect(controller.flag).toBe(true);
|
|
|
|
|
});
|
|
|
|
|
});
|
2013-11-22 05:54:42 +00:00
|
|
|
|
|
|
|
|
it("should compile it's content correctly (although we remove it later)", function() {
|
|
|
|
|
var testElement;
|
|
|
|
|
module(function() {
|
|
|
|
|
directive('test', function() {
|
|
|
|
|
return {
|
|
|
|
|
link: function(scope, element) {
|
|
|
|
|
testElement = element;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
inject(function($compile, $rootScope, $httpBackend) {
|
|
|
|
|
$httpBackend.expectGET('include.html').respond(' ');
|
|
|
|
|
element = $compile('<div><div ng-include="\'include.html\'"><div test></div></div></div>')($rootScope);
|
|
|
|
|
$rootScope.$apply();
|
|
|
|
|
$httpBackend.flush();
|
|
|
|
|
expect(testElement[0].nodeName).toBe('DIV');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
2013-12-11 00:46:29 +00:00
|
|
|
|
|
|
|
|
it('should link directives on the same element after the content has been loaded', function() {
|
|
|
|
|
var contentOnLink;
|
|
|
|
|
module(function() {
|
|
|
|
|
directive('test', function() {
|
|
|
|
|
return {
|
|
|
|
|
link: function(scope, element) {
|
|
|
|
|
contentOnLink = element.text();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
inject(function($compile, $rootScope, $httpBackend) {
|
|
|
|
|
$httpBackend.expectGET('include.html').respond('someContent');
|
|
|
|
|
element = $compile('<div><div ng-include="\'include.html\'" test></div>')($rootScope);
|
|
|
|
|
$rootScope.$apply();
|
|
|
|
|
$httpBackend.flush();
|
|
|
|
|
expect(contentOnLink).toBe('someContent');
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('should add the content to the element before compiling it', function() {
|
|
|
|
|
var root;
|
|
|
|
|
module(function() {
|
|
|
|
|
directive('test', function() {
|
|
|
|
|
return {
|
|
|
|
|
link: function(scope, element) {
|
|
|
|
|
root = element.parent().parent();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
inject(function($compile, $rootScope, $httpBackend) {
|
|
|
|
|
$httpBackend.expectGET('include.html').respond('<span test></span>');
|
|
|
|
|
element = $compile('<div><div ng-include="\'include.html\'"></div>')($rootScope);
|
|
|
|
|
$rootScope.$apply();
|
|
|
|
|
$httpBackend.flush();
|
|
|
|
|
expect(root[0]).toBe(element[0]);
|
|
|
|
|
});
|
|
|
|
|
});
|
2013-11-14 21:50:36 +00:00
|
|
|
});
|
|
|
|
|
|
feat(ngAnimate): complete rewrite of animations
- ngAnimate directive is gone and was replaced with class based animations/transitions
- support for triggering animations on css class additions and removals
- done callback was added to all animation apis
- $animation and $animator where merged into a single $animate service with api:
- $animate.enter(element, parent, after, done);
- $animate.leave(element, done);
- $animate.move(element, parent, after, done);
- $animate.addClass(element, className, done);
- $animate.removeClass(element, className, done);
BREAKING CHANGE: too many things changed, we'll write up a separate doc with migration instructions
2013-06-18 17:59:57 +00:00
|
|
|
describe('ngInclude animations', function() {
|
2013-06-18 02:40:01 +00:00
|
|
|
var body, element, $rootElement;
|
2013-04-09 22:33:16 +00:00
|
|
|
|
|
|
|
|
function html(html) {
|
2013-06-18 02:40:01 +00:00
|
|
|
$rootElement.html(html);
|
|
|
|
|
element = $rootElement.children().eq(0);
|
2013-04-09 22:33:16 +00:00
|
|
|
return element;
|
|
|
|
|
}
|
|
|
|
|
|
2013-06-18 02:40:01 +00:00
|
|
|
beforeEach(module(function() {
|
2013-04-09 22:33:16 +00:00
|
|
|
// we need to run animation on attached elements;
|
2013-06-18 02:40:01 +00:00
|
|
|
return function(_$rootElement_) {
|
|
|
|
|
$rootElement = _$rootElement_;
|
|
|
|
|
body = jqLite(document.body);
|
|
|
|
|
body.append($rootElement);
|
|
|
|
|
};
|
|
|
|
|
}));
|
2013-04-09 22:33:16 +00:00
|
|
|
|
|
|
|
|
afterEach(function(){
|
|
|
|
|
dealoc(body);
|
|
|
|
|
dealoc(element);
|
|
|
|
|
});
|
2013-03-20 23:24:23 +00:00
|
|
|
|
feat(ngAnimate): complete rewrite of animations
- ngAnimate directive is gone and was replaced with class based animations/transitions
- support for triggering animations on css class additions and removals
- done callback was added to all animation apis
- $animation and $animator where merged into a single $animate service with api:
- $animate.enter(element, parent, after, done);
- $animate.leave(element, done);
- $animate.move(element, parent, after, done);
- $animate.addClass(element, className, done);
- $animate.removeClass(element, className, done);
BREAKING CHANGE: too many things changed, we'll write up a separate doc with migration instructions
2013-06-18 17:59:57 +00:00
|
|
|
beforeEach(module('mock.animate'));
|
2013-03-20 23:24:23 +00:00
|
|
|
|
|
|
|
|
afterEach(function(){
|
|
|
|
|
dealoc(element);
|
|
|
|
|
});
|
|
|
|
|
|
feat(ngAnimate): complete rewrite of animations
- ngAnimate directive is gone and was replaced with class based animations/transitions
- support for triggering animations on css class additions and removals
- done callback was added to all animation apis
- $animation and $animator where merged into a single $animate service with api:
- $animate.enter(element, parent, after, done);
- $animate.leave(element, done);
- $animate.move(element, parent, after, done);
- $animate.addClass(element, className, done);
- $animate.removeClass(element, className, done);
BREAKING CHANGE: too many things changed, we'll write up a separate doc with migration instructions
2013-06-18 17:59:57 +00:00
|
|
|
it('should fire off the enter animation',
|
|
|
|
|
inject(function($compile, $rootScope, $templateCache, $animate) {
|
|
|
|
|
var item;
|
2013-03-20 23:24:23 +00:00
|
|
|
|
|
|
|
|
$templateCache.put('enter', [200, '<div>data</div>', {}]);
|
|
|
|
|
$rootScope.tpl = 'enter';
|
2013-04-09 22:33:16 +00:00
|
|
|
element = $compile(html(
|
2013-07-06 04:48:54 +00:00
|
|
|
'<div><div ' +
|
feat(ngAnimate): complete rewrite of animations
- ngAnimate directive is gone and was replaced with class based animations/transitions
- support for triggering animations on css class additions and removals
- done callback was added to all animation apis
- $animation and $animator where merged into a single $animate service with api:
- $animate.enter(element, parent, after, done);
- $animate.leave(element, done);
- $animate.move(element, parent, after, done);
- $animate.addClass(element, className, done);
- $animate.removeClass(element, className, done);
BREAKING CHANGE: too many things changed, we'll write up a separate doc with migration instructions
2013-06-18 17:59:57 +00:00
|
|
|
'ng-include="tpl">' +
|
2013-07-06 04:48:54 +00:00
|
|
|
'</div></div>'
|
2013-04-09 22:33:16 +00:00
|
|
|
))($rootScope);
|
2013-03-20 23:24:23 +00:00
|
|
|
$rootScope.$digest();
|
|
|
|
|
|
2013-07-31 19:38:19 +00:00
|
|
|
item = $animate.flushNext('enter').element;
|
feat(ngAnimate): complete rewrite of animations
- ngAnimate directive is gone and was replaced with class based animations/transitions
- support for triggering animations on css class additions and removals
- done callback was added to all animation apis
- $animation and $animator where merged into a single $animate service with api:
- $animate.enter(element, parent, after, done);
- $animate.leave(element, done);
- $animate.move(element, parent, after, done);
- $animate.addClass(element, className, done);
- $animate.removeClass(element, className, done);
BREAKING CHANGE: too many things changed, we'll write up a separate doc with migration instructions
2013-06-18 17:59:57 +00:00
|
|
|
expect(item.text()).toBe('data');
|
2013-03-20 23:24:23 +00:00
|
|
|
}));
|
|
|
|
|
|
feat(ngAnimate): complete rewrite of animations
- ngAnimate directive is gone and was replaced with class based animations/transitions
- support for triggering animations on css class additions and removals
- done callback was added to all animation apis
- $animation and $animator where merged into a single $animate service with api:
- $animate.enter(element, parent, after, done);
- $animate.leave(element, done);
- $animate.move(element, parent, after, done);
- $animate.addClass(element, className, done);
- $animate.removeClass(element, className, done);
BREAKING CHANGE: too many things changed, we'll write up a separate doc with migration instructions
2013-06-18 17:59:57 +00:00
|
|
|
it('should fire off the leave animation',
|
|
|
|
|
inject(function($compile, $rootScope, $templateCache, $animate) {
|
|
|
|
|
var item;
|
2013-03-20 23:24:23 +00:00
|
|
|
$templateCache.put('enter', [200, '<div>data</div>', {}]);
|
|
|
|
|
$rootScope.tpl = 'enter';
|
2013-04-09 22:33:16 +00:00
|
|
|
element = $compile(html(
|
2013-07-06 04:48:54 +00:00
|
|
|
'<div><div ' +
|
feat(ngAnimate): complete rewrite of animations
- ngAnimate directive is gone and was replaced with class based animations/transitions
- support for triggering animations on css class additions and removals
- done callback was added to all animation apis
- $animation and $animator where merged into a single $animate service with api:
- $animate.enter(element, parent, after, done);
- $animate.leave(element, done);
- $animate.move(element, parent, after, done);
- $animate.addClass(element, className, done);
- $animate.removeClass(element, className, done);
BREAKING CHANGE: too many things changed, we'll write up a separate doc with migration instructions
2013-06-18 17:59:57 +00:00
|
|
|
'ng-include="tpl">' +
|
2013-07-06 04:48:54 +00:00
|
|
|
'</div></div>'
|
2013-04-09 22:33:16 +00:00
|
|
|
))($rootScope);
|
2013-03-20 23:24:23 +00:00
|
|
|
$rootScope.$digest();
|
|
|
|
|
|
2013-07-31 19:38:19 +00:00
|
|
|
item = $animate.flushNext('enter').element;
|
feat(ngAnimate): complete rewrite of animations
- ngAnimate directive is gone and was replaced with class based animations/transitions
- support for triggering animations on css class additions and removals
- done callback was added to all animation apis
- $animation and $animator where merged into a single $animate service with api:
- $animate.enter(element, parent, after, done);
- $animate.leave(element, done);
- $animate.move(element, parent, after, done);
- $animate.addClass(element, className, done);
- $animate.removeClass(element, className, done);
BREAKING CHANGE: too many things changed, we'll write up a separate doc with migration instructions
2013-06-18 17:59:57 +00:00
|
|
|
expect(item.text()).toBe('data');
|
2013-03-20 23:24:23 +00:00
|
|
|
|
|
|
|
|
$rootScope.tpl = '';
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
|
2013-07-31 19:38:19 +00:00
|
|
|
item = $animate.flushNext('leave').element;
|
feat(ngAnimate): complete rewrite of animations
- ngAnimate directive is gone and was replaced with class based animations/transitions
- support for triggering animations on css class additions and removals
- done callback was added to all animation apis
- $animation and $animator where merged into a single $animate service with api:
- $animate.enter(element, parent, after, done);
- $animate.leave(element, done);
- $animate.move(element, parent, after, done);
- $animate.addClass(element, className, done);
- $animate.removeClass(element, className, done);
BREAKING CHANGE: too many things changed, we'll write up a separate doc with migration instructions
2013-06-18 17:59:57 +00:00
|
|
|
expect(item.text()).toBe('data');
|
2013-03-20 23:24:23 +00:00
|
|
|
}));
|
|
|
|
|
|
2013-07-06 04:48:54 +00:00
|
|
|
it('should animate two separate ngInclude elements',
|
|
|
|
|
inject(function($compile, $rootScope, $templateCache, $animate) {
|
|
|
|
|
var item;
|
|
|
|
|
$templateCache.put('one', [200, 'one', {}]);
|
|
|
|
|
$templateCache.put('two', [200, 'two', {}]);
|
|
|
|
|
$rootScope.tpl = 'one';
|
|
|
|
|
element = $compile(html(
|
|
|
|
|
'<div><div ' +
|
|
|
|
|
'ng-include="tpl">' +
|
|
|
|
|
'</div></div>'
|
|
|
|
|
))($rootScope);
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
|
2013-07-31 19:38:19 +00:00
|
|
|
item = $animate.flushNext('enter').element;
|
2013-07-06 04:48:54 +00:00
|
|
|
expect(item.text()).toBe('one');
|
|
|
|
|
|
|
|
|
|
$rootScope.tpl = 'two';
|
|
|
|
|
$rootScope.$digest();
|
|
|
|
|
|
2013-07-31 19:38:19 +00:00
|
|
|
var itemA = $animate.flushNext('leave').element;
|
|
|
|
|
var itemB = $animate.flushNext('enter').element;
|
2013-07-06 04:48:54 +00:00
|
|
|
expect(itemA.attr('ng-include')).toBe('tpl');
|
|
|
|
|
expect(itemB.attr('ng-include')).toBe('tpl');
|
|
|
|
|
expect(itemA).not.toEqual(itemB);
|
|
|
|
|
}));
|
|
|
|
|
|
2013-03-20 23:24:23 +00:00
|
|
|
});
|