Javascript tracing of cookie source - javascript

I have a server with tons of lines of Javascript and i need to check lines, which sets a new cookie.
All JS files are minified (variable names are abbreviated to one char etc.), so search it by the name of the cookie is almost impossible.
Is there any software/debugger/browser/approach/whatever which is able to track the lines of code, which sets up some cookies?
I've tried to use a Chrome built-in webkit debugger which allows me to set up an "Event Listener Breakpoints". Unfortunately it cannot listen to setting new cookie.

If I had to do this I would first beautify the source code to make it more readable, then find any lines which set a cookie (e.g. by searching for the regex /(document)?\.cookie\s*=\s*/), then trace the origin of the value which is assigned.

Related

Prevent overlapping between 2 Experiments in Google Optimize?

Could you please help me with a rule that can exclude users that have already been exposed to one of other experiments in Google Optimize?
What is the best approach?
I am thinking about using 1st party cookie variable or some other custom variable that would mark the user as "exposed" so that another experiment will not affect him.
In addition I can use "run custom "JavaScript" in Optimize's visual editor that will create such a cookie. Will that solve the problem?
Also I can't understand how to prevent 2 experiments from running simultaneously. So that user who sees experiment A will not see experiment B or C (free version is limited to 3 experiments). Is there any rules or configuration that can help with that?
Just had to tackle this! The approach by #swapnil-jain seemed to work on the surface level, but unfortunately had some issues.
When Optimize evaluates whether or not a new user should be opted in to a list of experiments, it creates the _gaexp cookie once for all opt-ins, it doesn't create it then update it between opt-ins.
So it looks for the _gaexp cookie, evalutes opt-in for Exp A (does not contain <expBId>) and opts a user in to Exp A. Then it evalutes opt-in for Exp B (does not contain <expAId>), and opts a user in to Exp B. Then it creates a cookie reading something like GAX1.3.<expAId>.<expDate>.<value>.<expBId>.<expDate>.<value>.
The problem now is that on their second visit, the user will be excluded from seeing the variation for either experiment, because they now fail the audience targeting conditions. Their cookie now contains both <expAId> and <expBId>!
I had similar problems trying to target the _gaexp cookie with regex, since the cookie is created all at once for both experiments after the opt-in is decided.
My current working solution is to create a custom JavaScript rule called rand100. For a first time user, it generates a random number 0-100. If that number is below 50, they are evaluated for Exp A, and a cookie is stored containing the rand100 value. If equal to or above 50, they are evaluated for Exp B. For returning users, the cookie is retrieved, and the previous value of rand100 is returned instead of a new one, and so they still meet the targeting conditions for the experiment they've been opted into.
The one cookie is shared between opt-in evaluations, since it runs the custom JavaScript during Exp A eval, and so the cookie is available for Exp B eval. The cookie is set to expire after 90 days, which is the default expiration for Optimize tracking.
I'm running these experiments at 100% traffic, but technically they are only seeing 50% traffic because of rand100. Traffic is split 25%/25%/25%/25% between control/v1/control/v1.
When we create any experiment, google creates an experiment id which we can find in the details section. Also when an experiment is triggered for a user, it sets a _gaexp cookie which contains that experiment id (apart from other identifiers).
So, if you want to run two mutually exclusive experiments, all you need to do is exclude a user from the experiment if _gaexp contains the id of other. Here are the steps:
In audience targeting, add a rule and choose First-party cookie
Create a variable and set it's value to _gaexp
Choose the does not contain option and add other experiment's id in value
Save
Repeat the same steps for the other experiment
This is one of the reasons that I'm still using Google Experiments. It provides a lot more control with its api. With that said, you should be able to achieve the result that you're looking for by setting a cookie in the user's browser. Here is how I see it playing out:
All experiment cookies have same the same name but differing values to avoid creating multiple cookies.
Upon a new session, check to see if cookie exists
Exists - fire tag to initialize appropriate experiment.
Doesn't Exist - determine which experiment bucket to put user in and fire tag to initialize appropriate experiment.
I know that Optimizely has an algorithm to bucket experiment users in a way that each user can be part of multiple experiment but I don't believe that Google Optimize has that sort of functionality yet.

How can I prevent javascript caching? Querystring approach isn't working

I've seen other approaches that attach a version number or MD5 hash to a JS src querystring.
e.g. <script src='/script/v1/'></script>
However, my JavaScript is still getting cached in multiple browsers (Chrome, Firefox) when I push a new version of my site.
This seems like a major problem that others have solved, and I seem to be doing the right things. How can I get this to work?
I added log messages and determined that the querystring method is working. Sorry for the unnecessary question.
However, in researching, I found some important points worth mentioning:
One of the articles suggests using a querystring with the current time appended. You probably don't want to follow this suggestion as your files will never be cached. Using source control version numbers or an MD5 hash would be better.
Steve Souders (of High Performance Web Sites fame) notes that certain web proxies never cache anything with a querystring. Thus, the version number should be embedded within the path to the file in order to ensure that your files are cached appropriately when accessed through these proxies. ( http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/ )
It will be cached always. Although, by using a version number (or any other varying string) a new version will be downloaded and used every time, ignoring the previous one.
http://thecrmgrid.wordpress.com/2007/10/22/prevent-caching-of-javascript-include-files-during-development/
http://davidwalsh.name/prevent-cache
1.)make sure the response headers for the javascript files are correct and include expires, cache-control, etc.
2.)you probably have to append the version not as a query parameter but part of the filename, e.g. page_v.2.js. You could change the javascript filenames at build time for example if you are using Java. That is what i have done.

Opera User-JS: how do I get the raw server response?

I'm writing some user-JS for Opera. It reacts on a request that doesn't have an extension, e.g. /stuff/code/MyFile, or has one not related to JavaScript, e.g. /stuff/code/load.do. The content-type of the response is set to text/html, even though it returns pure JavaScript source (text/javascript). As I don't have access to the server code I simply have to live with this.
The problem now is that I want to format the source with line numbers and such and display it inside Opera. Therefore, I wrote some user-JS to react on AfterEvent.DOMContentLoaded (also tried AfterEvent.load, same thing). It reads e.event.target.body.innerHTML to gain access to the body, i.e. the JavaScript-code.
That alone would work nicely, if only the source wouldn't contain HTML-tags or comparison operators (<, >). Since it does, I never get the output I want. Opera seems to have some internal logic to convert the text/html-response into its own representation format. This includes that e.g. a CRLF after a HTML-tag is removed or code between two "matching" < and > (comparison operators!) are crunched together into one single line applying ="" after each word in there.
And that's where the problem is.
If I request the same URL without my user-JS and then look at the source of the "page" I see a clean JavaScript-code identical to what the server sent out. And this is what I want to get access to.
If I use innerText instead of innerHTML, Opera strips out the HTML-tags making the file different to the original, too.
I also tried to look at outerHTML, outerText and textContent, but they all have the same problems.
I know that Opera doesn't do anything wrong here. The server says it's a text/html and Opera simply does what it usually does with a text/html-kind of response.
Therefore, my question is: is there any way to get the untouched response with a user-JS?
There isn't any way to access the pre-parsed markup from JS. The only way to do that would be to use XMLHttpRequest to request the content yourself.

Want to create a multilingual javascript object, how to handle if lots of labels?

I want to create a javascript file for multilingual functionality
i.e. display the error message in the correct language.
If I have allot of labels for a page, error messages, etc., what is a smart way of making this so the actual output on the page isn't huge?
i guess the best way is to somehow output the labels that I need ONLY?
lang.getkey('username');
will output the correct label, depending on the language.
Language detection is usually done server-side by checking the Accept-Language HTTP header that is sent.
Browsers have limited, non-standardized means for identifying a user's language (with the exception of IE running on Windows). With IE on Windows, you can access navigator.userLanguage or navigator.systemLanguage, which will return the operating system's RFC #4646 language-COUNTRY code. Other browsers (Opera, Safari, Chrome, Firefox) provide navigator.language, which is in the same format with the exception of Opera which returns the language only. In many cases this might be good enough, but it's still recommended to use a server solution.
I achieved something like this a while ago by separating the strings into different lang.js files and added the script to the document using document.write(). The function would simply fetch the string from an array defined in that lang.js file. A basic example might be:
// Get the language-COUNTRY code, and strip it to the language part only
var lang = (navigator.language || navigator.userLanguage).substring(0,2);
var file = "lang/" + lang + ".js";
document.write('<script src="'+lang+'" type="text/javascript"><\/script>');
This would ensure that only the strings for the necessary language were loaded, although I haven't included a fallback method here, you would need one for defaulting to a language when an unsupported one was detected. You could do this by having a list of supported languages in an array, check to see if lang exists and if it doesn't, write a default script src instead.
Not to sound like a broken record, but you should probably be determining languages and including files server side, not client side.

Add spell check to my website

I have an asp-based website which I would like to add spell checking capabilities to the textarea elements on the page. Most of the pages are generated from an engine, though I can add JavaScript to them. So my preferred solution is a JavaScript-based one. I have tried JavaScriptSpellCheck and it works okay, though I would like to see what some of my other options may be. I also found spellchecker.net but at $3500 for a server license it seems excessive.
Spell checking can be in a separate window and must support multiple languages (the more the better). Ultimately I would like to send the spell check object a collection or delimited string of textarea names or id's (preferably names as they already exist in the pages) and have it spell check all of them, updating the text as spelling is corrected.
Check out using Google's api for this: http://www.asp101.com/articles/jeremy/googlespell/default.asp
Here is a free, open source Javascript library for spell checking that I authored:
https://github.com/LPology/Javascript-PHP-Spell-Checker
There's a link to a live demo at the top. It's designed to have the feel of a spell checker in a desktop word processor. I wrote it after being dissatisified with these same options.
To use, just include the JS and CSS files into your page, and then add this:
var checker = new sc.SpellChecker(
button: 'spellcheck_button', // opens the spell checker when clicked
textInput: 'text_box', // HTML field containing the text to spell check
action: '/spellcheck.php' // URL of the server side script
);
It includes a PHP script for spell checking, but it could be ported to another language fairly easily as long as it returns the correct JSON response.
If I were you, I'd look into something like aspell - this is used as one of the supported spellchecking backends in TinyMCE. Personally, I use pspell because it's integrated into PHP.
EDIT
There's an aspell integration here that has a PHP or a Perl/CGI version; might be worth checking out.
If I am not wrong, Firefox's English dictionary for spell checking takes around 800KB of data.
If you like to do everything in JavaScript -- for a full-featured spell checking engine, it means you need to load that 800KB data in every page load. It's really not a good idea.
So, instead of doing that in JavaScript, send the data to the server with AJAX, check it server side, and return it back; that's the best way.
Well this is quite old question, but my answer might help people who are looking for latest options on this question.
"JavaScript SpellCheck" is the industry leading spellchecker plugin for javascript. It allows the developer to easily add and control spellchecking in almost any HTML environment. You can install it in about 5 minutes by copying a folder into your website.
http://www.javascriptspellcheck.com/
Also support multiple languages - http://www.javascriptspellcheck.com/Internationalization_Demo
I might be a bit late on the answer to this question. I found a solution a long while ago. You must have a spell checker installed on your browser first. Then create a bookmark with the following code as the link.
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Categories

Resources