I tried this
Specifying only no-unsafe-eval tells AngularJS that we must not use eval, but that we can inject inline styles. E.g. <body ng-csp="no-unsafe-eval">.
Specifying only no-inline-style tells AngularJS that we must not inject styles, but that we can run eval - no automatic check for unsafe eval will occur. E.g. <body ng-csp="no-inline-style">
Specifying both no-unsafe-eval and no-inline-style tells AngularJS that we must not inject styles nor use eval, which is the same as an empty: ng-csp. E.g.<body ng-csp="no-inline-style;no-unsafe-eval">
after this application is working but total htmla is howing not working as actual application do not showing any data.
Related
I want to know the difference between ng-bind-html and bind-html-compile directives. For example I gave
<p style='color:red'>test<p>
to ng-bind-html, this strips out the style where as bind-html-compile does not. May I know when each directive should be used. Thanks.
bind-html-compile is not a standard Angular directive, it comes with the module https://github.com/incuna/angular-bind-html-compile and it is used to compile binded data.To make it simple, it is equivalent to write html in your source code: it will be re-evaluated and if other directives are found, they will work as expected.
ng-bind-html is a standard directive (bundled with Angular itself) and just output html strings without compiling it.
for example, if you controller has a variable with plain html, like in:
$scope.dataToDisplay = '<h1><strong>Title</strong></h1>';
Then you can go with ng-bind-html.
If you need to inject variables that contain html with other directives, such as:
$scope.dataToDisplay = '<h1 ng-show="showIfOtherVariable"><strong>Title</strong></h1>';
then you need to aforementioned module.
I recently enforcing ng-strict-di in an old code base and now getting warnings and error on running the app. For instance, in the below code
export default angular
.module("profile", ["ui-router"])
.controller("profileCtrl", profileCtrl)
.config(($translateProvider) => {
---
});
I want to understand how I could explicitly define $inject for config
as I am getting below error:
function($translateProvider) is not using explicit annotation and cannot be invoked in strict mode
it wants something similar to this:
export default angular
.module("profile", ["ui-router"])
.controller("profileCtrl", profileCtrl)
.config(["$translationProvider", ($translateProvider) => {---}]);
per the documtention on this page:
https://docs.angularjs.org/error/$injector/strictdi
"This error occurs when attempting to invoke a function or provider which has not been explicitly annotated, while the application is running with strict-di mode enabled"
and here is a little more explanation:
http://frontendcollisionblog.com/javascript/angularjs/2015/03/31/something-no-one-tells-you-about-minifying-angularjs-controllers-until-its-too-late.html
The explicit notation is designed for the code functionality to be maintained through the code minification process. When the javascript is minified the dependencies being injected will be substituted with single characters.Therefore losing there reference. Angular won't have any idea what values the parameters are actually supposed to be and will throw an error.
To rectify this problem, Angular allows explicit dependency annotations. Using an array of strings (i.e. ["$translationProvider", function($translateProvider)] to associate representations of dependencies. This works because strings don't get minified.
A second method is to use the $inject property which would look like this:
export default angular
.module("profile", ["ui-router"])
.controller("profileCtrl", profileCtrl)
.config(($translateProvider) => {---});
profileCtrl.$inject = ["$translationProvider"];
The purpose remains the same. For the dependency injections to survive the minification process.
Let's assume we have an Angular app page with the following line:
<div class="item-name">{{person.FirstName}}</div>
Lower down the user is allowed to change the first name.
<md-input-container class="md-block">
<label>First name</label>
<input ng-model="person.FirstName" type="text">
</md-input-container>
If I put any html or naughty values like <script>console.log(1)</script> the div doesn't show parsed input but the actual string. This seems is good.
Is this safe at all?
Can this be exploited? (e.g. I am aware of operator overloading tricks -- would such a trick work here?)
I cannot seem to find any official or respectable information that says that this is safe, recommended or maybe not recommended.
AngularJS expressions are sandboxed.
Expression Sandboxing
AngularJS's expressions are sandboxed not for security reasons, but instead to maintain a proper separation of application responsibilities. For example, access to window is disallowed because it makes it easy to introduce brittle global state into your application.
However, this sandbox is not intended to stop attackers who can edit the template before it's processed by Angular. It may be possible to run arbitrary JavaScript inside double-curly bindings if an attacker can modify them.
But if an attacker can change arbitrary HTML templates, there's nothing stopping them from doing:
<script>somethingEvil();</script>
It's better to design your application in such a way that users cannot change client-side templates.
For instance:
Do not mix client and server templates
Do not use user input to generate templates dynamically
Do not run user input through $scope.$eval
Consider using CSP (but don't rely only on CSP)
For more information, see AngularJS Developer Guide - Security - Expression Sandboxing
AngularJS Expressions are sandboxed not for security reasons, but the sandboxing does increase security. Angular Expressions are limited to variable and functions that are on $scope. Angular Expressions can't access global functions or global variables.
There is some hint in the official docs: https://docs.angularjs.org/api/ng/directive/ngBind
Typically, you don't use ngBind directly, but instead you use the
double curly markup like {{ expression }} which is similar but less
verbose.
It is preferable to use ngBind instead of {{ expression }} if a
template is momentarily displayed by the browser in its raw state
before Angular compiles it. Since ngBind is an element attribute, it
makes the bindings invisible to the user while the page is loading.
Performance:
The {{}} is much slower.
This ng-bind is a directive and will place a watcher on the passed variable. So the ng-bind will only apply, when the passed value does actually change.
The brackets on the other hand will be dirty checked and refreshed in every $digest, even if it's not necessary.
The double curly brace notation {{ }} to bind expressions to elements is built-in Angular markup.
it is secure to use
you can visit here more information - https://docs.angularjs.org/api/ng/service/$interpolate
How and why is <body ng-app> used? How can we assign controllers, directives etc to this nameless module. Also explain how this is related to manually bootstraping the Angular App.
Fiddle
This is actually three separate questions, but I'm happy to tackle each one.
How and why is used?
Angular will not and cannot properly bootstrap the application unless there is an entrance point to that application. According to the documentation, if a parameter is not passed that names the app instance, angular will attempt to auto-bootstrap the application for you by crawling the DOM and using the first ngApp directive instance that it is encountered.
We typically want to place our entrance point on the <body> element to encompass all the potential DOM we need without cluttering it with <head> elements, such as loading scripts and css. That said, if you are auto-bootstrapping your application, the recommended placement is on the HTML element.
How can we assign controllers, directives etc to this nameless module?
Modules, controllers, etc MUST be attached to something in order for Angular to pick them up and interopt with them correctly.
Once the application is bootstrapped, Angular will begin parsing the DOM, looking for directives. If you have an application instance (and you do), your controllers will be automatically be added to that instance. If you look at the bootstrap documentation -> Automatic Initialization, you'll find the following:
Angular initializes automatically upon DOMContentLoaded event or when
the angular.js script is evaluated if at that time document.readyState
is set to 'complete'. At this point Angular looks for the ng-app
directive which designates your application root. If the ng-app
directive is found then Angular will:
load the module associated with the directive.
create the application
injector compile the DOM treating the ng-app directive as the root of
the compilation. This allows you to tell it to treat only a portion of
the DOM as an Angular application.
How the heck is the fiddle working?
This one is actually smoke and mirrors that really shouldn't count :). If you look at the network traffic for JSFiddle, you'll find that AngularJS is actually being loaded. As a result, your interpolation is actually getting automagically bound to the JSFiddle Angular instance, not one that you provide yourself (or in this case didn't), parsed, and subsequently rendered into the DOM as 2.
Per angularjs.org:
"The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the or tags."
In other words, ng-app is what makes your html become an Angular application, thus being able to use the {{ }} in your code. These brackets are able to carry out operations, which is why you're able to calcuate 1 + 1. If you were to use variables, however, you would need to attach an ng-controller to a container div and initialize a Controller.
It's the equivalent of ng-app="". However, you need a namespace to attach controllers, directives. etc too. Angular can interpolate {{ 1 + 1 }} without a namespace, but you won't be able to bind anything to the views scope. Interestingly enough ng-app=" " is a namespace you can bind to.
https://jsfiddle.net/n3hygcnd/3/
I have a directive which creates a rich text editor in its LinkingFunction. The small directive I'm using for my rich text editor can be found at https://github.com/angular-ui/ui-tinymce/blob/master/src/tinymce.js.
I need to extend this directive with another directive which will allow me to configure the default options and access the element created by the previous directive.
If possible, I would like to do this without forking the original ui-tinymce directive (linked to above). In this directive there are two properties:
uiTinymceConfig which I need to be able to access and configure before this directive's LinkingFunction is run (before the options are passed to TinyMCE)
tinyInstance which I need to manipulate after it has been created by this directive
I've done plenty of research into extending directives, as well as the different attributes available to the "Directive Definition Object", such as link, pre-link, post-link, compile, and controller. I have experimented with sharing properties between two directives using some of these methods, but I have not come up with a solution that fits my needs (above).
I am happy to fork this original directive code if it is not possible to achieve what is needed without doing so.
So I investigated this a little for you, and came up with this Plnkr.
This will let you override the value provided for injection - note that you can do this in a module that depends on the submodule, so you can provide different configurations for different modules that depend on the submodule, which would be of use for the ui-tinymce directive.
Using a similar principle, you should be able to edit the config value for uiTinymceConfig by just simply overriding it. You can even do this and override it right in the base module if you'd like.
If you want to edit the instance itself after instantiation, you can simply access it by using the ID attribute and calling tinymce.get('#IDattribute') directly anywhere in your code.