How to handle 3rd party javascript app with cookies? - javascript

I have a question about loading javascript source and initialize function on a page depends on the user`s cookie preference. I have an API that I can check the user's cookie preference with javascript.
My first idea was to hide(with js) the app (which will be loaded on the page via 3rd party script source and initialize function) and show a message to the user that the user can't see the app/content because of his/her cookie setting. But on the legal side, it is allowed because even the user doesn't see the app/content it is going to be loaded on the browser.
My second idea was creating a script tag dynamically and adding in head and run the initialize function,
but in this case, if initialize works faster than script tag creating function, I get an error. And even if it works sometimes user has to reload page couple of times to load the app.
Is there any better practice/idea that you can advise me on?

Related

How to know where javascript calls redirect?

So, I have wordpress site that was infected by javascript virus, that calls redirect to another site. There is a set of js files.
How to know where javascript calls redirect? What browser tools can use for this?
There are a couple of things you can do.
You can go though javascripts files content which should be encrypted basically using base64_encode so you might get it bit hard to understand code pattern.
You can use the Event Listener Breakpoint -> Load - unload and then when it breaks in the 3rd party library, right click and select Blackbox Script. The next time you play through the code, it should only break in your own code (assuming there are no other 3rd party libraries to blackbox).
Another option is to go to the Network tab and check the Preserve Log checkbox. This will persist all requests between page loads/navigation, so that you will be able to find the network request
For Firefox check this : https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor

How to apply JavaScript changes in Firebug?

I am playing around with a JavaScript code in Firebug and I would like changes to take effect in that page. Especially when there is code inside jQuery's $.ready() function.
Some kind of refreshing the page without losing of what has been edited. Is there any way to do that?
Page changes made via Firebug or via Javascript do not persist from one page load to another. Each time a page is loaded, the original HTML, CSS and JavaScript is parsed and loaded (from cache or from the server). Any prior changes will not be there.
The only way for a dynamic page change to be still present after a refresh is for you to save the changed state to a persistent location and then rebuilt the appropriate page content from that state each time the page is loaded.
But, if you make a change to the page and store some state in a cookie, in local storage or on your server, then you can have JavaScript that runs each time the page loads that gets that state from wherever you stored it and then applies the appropriate change to the page. If you're saving the state on the server (on behalf of this particular user), then you could even have the serve modify the page contents before it is served to the browser.
You can type JavaScript code in the Firebug command line and see changes take effect on the page. You can do the same in the Firefox, Chrome, Opera and Safari DevTools.
Changes to pages done via Firebug do not persist. After a page reload the original sources will be loaded again (from the server or the browser cache).
Currently Firebug doesn't allow you to edit the code of the loaded scripts directly.
Though you can execute JavaScript code within the context of the page by using the Command Line:
Or for longer scripts you can use the Command Editor:
But again, code you executed there will be gone as soon as the page is reloaded.
To make permanent changes to the JavaScript code of a page you need to have access to the server and make them there.

Session Expires in Frames

I am developing a web application and my requirement is as specified below.
I need to display four websites in a single browser window...(which i implemented using frameset)
I need to refresh the whole page (which certainly will refresh frames inside ) after 1 minute to update the frames content....(which i implemented using the java script)...
however in one of the frames i need to login to the 3rd party website. i am able to login and able to view the content after the login...however when the page refresh happens after 1 minute the page will be redirected back to the login page again and i have to login after each page refresh...
I googled this and found that it might be due to frames which does not set the cookies.for this i have implemented P3P policy also but the problem persists...
please provide the solution if anybody knows about this...
The javascript I used to refresh a page is
function timeRefresh(timeoutPeriod) {
window.setTimeout("location.reload(true);", timeoutPeriod);
}
window.onload = timeRefresh(60*1000);
If the cookies for the 3rd party site are set then your P3P looks fine and you can navigate fine for over a minute without losing session then the problem must be something with the timeRefresh()
As you can't get a customized URL of the 3rd party site in order to issue a specific reload and assuming that you have no control over the third party site, I suggest you do something different. Set up some JavaScript to load an image from the site (the logo or something else that won't change, or alternatively a script or page) every minute from a frame that you have control over. Because the browser is the same, any existing cookies from a login will be referenced and it will extend the login.

AJAX App JavaScript Loading Issue

I am creating a complete ajax application where there is one base page and any pages the user navigates to within the application are loaded via ajax into a content div on the page. On the base page I include the various scripts that are needed for every page within the application (jQuery, jQuery-UI, other custom javascript files). Then on the various pages with the application I include a script or two for each page that contains the logic needed for just that page. Each of those script files have something that executes on the page ready event. The problem is that every time the user navigates to page1, the page1.js file is loaded. So, if they visit that page 10 times, that script is then loaded ten times into their browser. Looking at the Chrome script developer tools after running around the site I see tons of duplicated scripts.
I read somewhere about checking to see if the script has already been loaded using a boolean value or storing the loaded scripts in an array. But, the problem with that is that if I see the script is already loaded and I don't load it, the page ready function doesn't get fired for the page's javascript file and everything fails.
Is there an issue having the javascript file loaded over and over when the user visit the same page multiple times?
I did notice looking at the network traffic that every time we visit the page, the script is requested with a random number parameter (/Scripts/Page1.js?_=298384892398) which causes the forced request for the script file every time. I set the cache: true settings on the jQuery ajaxSetup method and that removed the parameter from the request and thus the cached version of the javascript file was loaded instead of actually making a separate HTTP request for it. But, the problem is that I don't want all the ajax requests made to be cached as content changes all the time. Is there a way to force just javascript files to be cachced but allow all other ajax requests to be not cached.
Even when I forced caching on all requests, the javascript file still showed up multiple times in the developer tools. Maybe that isn't a big deal but it doesn't seem quite right.
Any advice on how to handle this situation?
About your first question:
Every time you load a JavaScript file, the entire content gets evaluated by the browser. It solely depends on the content if you can load and execute it multiple times in a row. I'd not consider it a best practice to do so. ;)
Still i'd recommend that you find a way to check if it was already loaded and fire the "page loaded" event manually within the already present code.
For the second question: I'd assume that the script is intended to show up multiple times when including it multiple times. To give an advice on how to not cache the loaded JS i'd need to know how you loaded the code, how you do AJAX and the general jQuery setup.
After doing some more research it looks like it is actually just a Chrome issue. When you load a script via AJAX you can include the following in your code to get it to show up in the the Chrome developer tools
//# sourceURL=some-script-name
The problem is that when you navigate away from the page, the developer tools keeps the script around, but it is actually not longer referenced by the page.

loading remote page into DOM with javascript

I am trying to write a web widget which will allow users to display customized information (from my website) in their own web page. The mechanism I want to use (for creating the web widget) is javascript.
So basically, I want to be able to write some javascript code like this (this is what the end user copies into their HTML page, to get my widget displayed in their page)
<script type="text/javascript">
/* javascript here to fetch page from remote url and insert into DOM */
</script>
I have two questions:
how do I write a javascript code to fetch the page from the remote url?
Ideally this will be PLAIN javascript (i.e. not using jQuery etc - since I dont want to force the user to get third party scripts jQuery which may conflict with other scripts on their page etc)
The page I am fetching contains inline javascript, which gets executed in an body.onLoad event, as well as other functions which are used in response to user actions - my questions are:
i). will the body.onLoad event be triggered for the retrieved document?.
ii). If the retrieved page is dumped directly into the DOM, then the document will contain two <body> sections, which is no longer valid (X)HTML - however, I need the body.onLoad event to be triggered for the page to be setup correctly, and I also need the other functions in the retrieved page, for the retrieved page to be able to respond to the user interaction.
Any suggestions/tips on how I can solve these problems?
There are two approaches to this.
The host site uses an <iframe> tag to include your page in a fixed-size box inside their page. It operates in its own document with its own <body> and onload event; it is in your site's security context so it can use AJAX to call back to your server if it needs to for some reason.
This is easy; the guest page doesn't even especially need to know it is being included in an iframe.
The host site uses <script src="http://your-site/thing.js"></script> to run a script from your server. Your script creates a load of content directly inside the host document using document.write() or DOM methods. Either way you know when you've finished putting them in place so you don't need onload.
You are running in the host's security context, so you can't AJAX to your server or look at your server's cookies directly; any such data must be served as part of the script. (You can look at the host server's cookies and cross-site-script into any of their pages, and conversely if there is any sensitive data in your script the host site gets to see it too. So there is an implicit trust relationship any time one site takes scripting content from another.)

Categories