AngularJS: is there a debug mode for typos in bindings? - angularjs

I've just wasted half an hour hunting for what turned out to be...
<select.... data-ng-options="x as x.name for x in customerController_clipped.options"
instead of
<select.... data-ng-options="x as x.name for x in customerController_Clipped.options"
That is, a one-character typo - in this case, a 'clip...' instead 'Clip...'
Sure, it's easy to see it when it's isolated above - but think of this inside huge HTML content, and you now know why I ask:
Is there a way to ask AngularJS to report any failures in names of bindings, to ease our debugging? A simple console logging of this kind of failure would suffice, instead of a silent operation that leaves our components empty...

I can't see anything built in for doing this, though maybe you could raise with angular.js as a feature request, or try writing a pull request for putting an option in $parseProvider? If you want to do this the only way I can see right now is by altering the code in the $parse service which does the interpreting of any expressions.
I've plunked a quick test to see how easy it is. The original code is from angular 1.1.5. Search for ANDYMOD in the angular-1.1.5.js file to see the code I've edited. This basically adds a console.log for whenever the y and z parts of a 'x.y.z' expression are undefined or null, rather than ignoring it.
This is in no way a production-worthy solution, and doesn't work it you want to use ng-csp, but it shows something can be done at least. Maybe you can sub these few lines in if you ever need to test again...

Related

Not able to set list2 in Adobe Launch in custom code

I am trying to set list2 in my analytics call through custom code but it is not getting set.
This issue comes with s.tl() only while with s.t() method, it is triggered correctly.
Below is the code :-
s.addEvent("event12", true);
s.linkTrackVars = "list2";
s.list2 = "Data"
s.tl(this, "d", "Download", s);
If I place logger just before beacon call, it shows the value. However, when I click the button and check for same, only "event12" get fired and not "list2".
Any help would be highly appreciated.
Just tested your code on lululemon:
Conclusion:
You're overwriting either the listvar or the linkTrackVars somewhere else. As #Crayton Mentioned above, doPlugins would be a good spot for it.
But it actually can be overwritten anywhere. In any rule that fires prior, or the s code, or any DE affected.
Paste your code into the console. Execute. Do you see the listvar populated? If yes, then your problem is in rules, so check them. You're not supposed to reassign linktrackvars. Always use the s.apl() plugin.
If no, however, then your problem is definitely in doPlugins. Sometimes I have it when I have silent catches in s code. Pageviews would have all vars populated, but links would have mixed results. Check your error reporting in the catches in doPlugins. I suggest having all code in doPlugins in a try catch.

Secure Angular JS expressions

I'm editing an existing code that has a lot of angular js expressions which are being detected as unsafe by our automated testing system. I was able to see the article below that describes my case, but I was not able to get any specific way to solve it (I'm mostly seeing $watch and $apply). I guess what I need to know here is where do I make changes on the code?
Related links:
http://blog.angularjs.org/2016/09/angular-16-expression-sandbox-removal.html
https://docs.angularjs.org/guide/security#angularjs-templates-and-expressions
Sample snippets on my code:
Your code looks perfectly fine. I think what you're missing is the "passing user provided content" portion of that warning.
In the first example the only thing you are passing to $apply is a function that YOU have defined, same as the second example. In the last example you don't pass anything to $apply.
The reason they have these warnings is because $apply can be passed a string to evaluate an expression on $scope.
In the same way that
{{$scope.hello = 'Hello, World'}}
will set the hello property of $scope
$scope.$apply('hello = "Hello, World"')
Will do exactly the same. now imagine you pass user defined content to this
$scope.$apply(userPassedString)
Now you have given a user the ability to run arbitrary javascript expressions in your apply function.
To see exactly what I mean by this (and how this is exploitable), I have created a codepen demo for you here: https://codepen.io/codymikol/pen/bGbzbvp
(You'll have to scroll down in the HTML to see the script, I was lazy and din't link it as a separate JS file \_('__')_/
Also if you REALLY want to understand how the above snippet is able to function (and where I learned about getting the function constructor in such a way) you should watch this video by liveoverflow: https://www.youtube.com/watch?v=DkL3jaI1cj0
This was made back when the AngularJS team was trying to create a sandbox around scope expressions to prevent XSS. There are a bunch of videos detailing different exploits people used to get around the sandbox. Because of how complicated creating a sandbox is and how often it was being exploited they decided to remove it entirely and just warn developers about passing user content in such a way.

How do I find the context in which document.write operates. Can you solve the riddle

Basically i have these two lines of code written right after each other.:
console.log(typeof (noAdsCallback));
document.write('<sc' + 'ript type="text/javascript">console.log(typeof(noAdsCallback));</scr' + 'ipt>');
The first one logs function, the second logs undefined.
Of course it's a bit trickier than that. So here is the set-up in a nutshell:
I have a so called waterfall of ad-providers. That means, I try to load some Ads, by writing (using document.write) some special tags (given to me by my ad-provider).
If the provider doesn't find an ad for me, they send back a javascript-snippet which looks like this:
if (typeof(window.noAdsCallback) === "function") noAdsCallback();
This function essentially writes the tags of the next provider, which does the same as the first one until I reach the end of the list.
This system actually works fine, doing exactly what I want it to do. Both lines given in the beginning log function.
Except if I use Google as an ad-provider. There is one thing Google does differently, which seems to mess everything up.
In Google, I cannot define a fallback-JavaScript-snippet. All I can do is provide a fallback-url. So this fallback-url (since it's loaded inside an iframe inside an iframe inside...) sends a postMessage to the top, which then calls the same noAdsCallback() method. And this too, works just fine. The message is received and the right method executed. However, already the two lines already give different results, i.e. function and undefined respectively
The next provider then fails to find the noAdsCallback() Method, when it returns, because it uses document.write to try to execute it. Somehow, the context was lost.
First hint: It works fine (i.e. both lines log function) in Chrome, but it doesn't work in FF or IE.
Second hint: It works fine, as long as context never switches, but if communication runs at any point through messaging, it get's confused.
Third hint: Using the fantastic postscribe library as mentioned below, actually solves the problem, but introduces new ones somewhere else.
Fourth hint: Debugging the window.name, before using document.write, gives the correct name, so I'm not in a random iFrame.
Finishing thoughts. I know, i know: DON'T USE DOCUMENT WRITE!! I know that. But since Adproviders use it all the time, I am forced to use it to, otherwise I get this:
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
In Fact, right now I'm using postscribe (https://github.com/krux/postscribe) and it works like a charm, except for one lousey provider. And the workauround solution would be, to use document.write only for this lousy provider and postscribe for all the others. But i would really like to find out what the root of the problem is.
Any Ideas, much appreciated.
I think I understood it now. Long story short: DON'T USE DOCUMENT.WRITE :)
Try postscribe, if you have to.
So in hindsight it is quite obvious, because really, anywhere you read about document.write() it says, that write() clears the whole document. And I just didn't get it, because I never saw it happening and every ad is using it, like the whole time. Plus, it seemed to work fine on Chrome. So what's going on??
Well here is what happens. As long as the document is open, which basically means while it is being written, document.write() just appends to the stream, and doesn't clear the document. And as long as I used document.write(), to append foreign ad-scripts (which may and will contain document.write()), the page does not close, hence the document stays open.
This is the reason, why adding Google to my waterfall, posed a problem: Google puts everything in iframes. So the page containing the waterfall model just sees the iframe and says: "well as far as I'm concerned, I'm done" and closes the document, while in fact, Google is still at it.
Afterwards, Google didn't find an ad, sends a postMessage to the main page, causing the next provider to be used. Who then uses document.write() and clears everything.
Everything? Not everything. Remember, it still used to work when I used Chrome? The reason for that is, Chrome just clears the HTML but leaves the Javascript intact. So on Chrome, my Javascript-waterfall worked fine, because all the JS-objects where still in place. All other browsers cleared it.
So that's it. Probably noone's gonna read it, but if you do, USE POSTSCRIBE! Now that I finally really understood document.write() and document.open() and document.close() I'm a big fan.

Delay generating directive until after page is ready and responsive

I'm working on a single-page app where some parts are really slow. They're slow because I'm displaying 400 complex things in a repeater for the user to scroll through. Each thing is generated by a fairly complex directive that does a ton of data binding and expression evaluation, adds one or two click handlers, and displays a couple of images. In some cases, I also need a grayscale CSS filter on those images, but that really seems way too slow.
I have of course already turned most of my data binding into one-time data binding, but simply generating the 400 things for the first time is still slow. It's initially hidden through ng-if, which speeds it up when I'm not showing it, but once I do need to show it, everything waits 10 seconds for that to happen. I would like to load it in advance, but using ng-show instead of ng-if means the loading of the entire app has to wait for this.
What I would like, is to load the rest of the app, and then, while we wait for user input, start creating these 400 things so they're ready once I need to show them. I don't want the user to notice how slow this is.
Problem is, I have no idea how to do this. Any ideas?
Edit: Having thought about this (and discussed this with my wife), I'm seeing two options (that I conceptually understand, at least):
The easy, quick, boring and cowardly solution is to simply not show the 400 things at the same time, but cut them in pieces and show 40 at a time. That should make it a lot quicker, but also less nice, as the user needs to click around to access all the data.
The interesting solution is to write a new ng-repeat that generates the 400 transcluded copies of the template each in their own asynchronous event, so they don't block user interaction. I really like this idea, but there's one big downside: it's an ambitious idea with deep Angular magic, and I don't have much time available.
OK, not seeing your code structure, through Q&A, I'm trying to get clarification. If I understand you correctly, I believe the solution is to process your images asynchronously and remove reliance of creating/processing them on the fly when the view is visible (i.e. via clicking on a button/tab to 'show' the array 'view' and thus triggering the ng-repeat). BTW, this solution assumes the delays are because the images are being processed rather than because they are being shown.
METHOD 1 (less preferred)
To do this, it's best to create an 'ImageDataService' service, where it get's kicked off at application start, and proceeds with building this array and taking whatever time it needs asynchronously without caring what view is showing or not. This service will be injected into the proper view or directive controller--perhaps where the current ng-repeat scope is.
Meanwhile, you also need to change the directives inside your ng-repeat to get the pre-built data from the array provided by ImageDataService rather than actually doing the calculation at view time. If the data for that directive is not ready, the directive will show something like 'loading...' otherwise, the directive will simply show the prebuilt images. This way, it doesn't matter when ng-repeat is triggered (i.e. its view is showing), because it will just show what are processed and ready at that point and the display the rest as 'loading...'.
METHOD 2 (I prefer this)
Alternatively, and maybe better, you can forego creating a pre-processed array in a service as in METHOD 1 and instead modify your directives to process their data asynchronously by invoking a service method that returns an asynchronous promise like this:
(code inside a controller)
var promise = ImageDataService.processImage(directiveData);
promise.then(function() {...set the directive image attributes..})
Needless to say, the ImageDataService.processImage() method needs to return a promise when it is done processing the data. The directive, as usual, will show 'loading...' until then. Also, although ImageDataService no longer needs to pre-populate its array mentioned in METHOD 1, it might be a good idea to save the processed images to a similar array anyway to serve as cache and not reprocess them needlessly. NOTE, in this case you don't need to have processImage() inside a service--but it is really good 'separation of concerns' practice to reserve the work of asynchronous data processing (ajax, etc) within a service which can be injected app-wide rather than within a controller.
Either of these 2 general tacks should work.

look up input field webbrowser C language

This is in C Language
I want to know how i can write a program to lookup all the input fields of a website. Any website. and then can fill them in. I can write the simple webbrowser in vbs but how can i analyse the input fields. even better would be is i could click the lookup field and it puts the name of it in a box..... that would be ideal.
Anyone can help? thanks :)
Are you sure you want to do this in C?
I ask because it is not easy. First of all, you need to be able to run the HTTP GET request against the webpage you wish to view. For this, you probably need libcurl; you definitely don't want to be writing from scratch at any rate.
Next, you need to process the html you get, finding all input fields. You do NOT want to do this using regular expressions, if anything for the sake of bobince's blood pressure. HTML is not a regular language is the bit you need to take away - you need an xml parser. Enter libxml. I'm sure there are other xml libraries out there, and even libraries for parsing html.
Finally, having done that (got the fields etc) you need to be able to populate them and submit the correct request as per the ACTION and METHOD parameters of the FORM.
This is of course assuming you know what the fields should be formatted with. And it also assumes nothing else is going on. If you have a javascript validated web form (I sincerely hope they're validating on the request too, but they might provide feedback via JS) you won't benefit from that (unless you're going to integrate JS, in which case you might as well write a browser).
This is not a trivial task and it is the reason there are accessibility standards for HTML, because otherwise it becomes tricky to interpret the form without human interaction.
Of course, this all assumes said html is well formed, which isn't always the case...
I might suggest another approach. BeautifulSoup is a well known Python web scraping library that works very well. Python as a language allows easier string manipulation too, which will dramatically cut down your development time. I'd suggest giving the need to use C some serious thought given the size and complexity of the task you want to undertake vs your need to get a result quickly. If you have a lot of time, by all means go for C.

Resources