We are maintaining a website where based on user access of different webpages we keep alive a cookie and do a session timeout based on inactivity(based on the cookies access timestamp).
Recently we found out there are many browser plugins (e.g Reload Every for Firefox etc.) which can programmatically refresh a web page, defeating our purpose of properly calculating when we should timeout the user.
I have tried the AddonManager API(FF version 4) and ExtensionManager(FF 2 and 3), but really reluctant to do some browser specific codes to disable plugins/ addons.
Is there any elegant solution to handle these addons or the auto page refresh scenario?
Thanks for your help.
Related
Short:
I need help in SSO in Safari, I'm using iFrame and postMessage logic which is working fine in Chrome and Firefox (PC, Mac, Android and iOS) but the catch is in Safari. I tried Storage Access APIs and placed those in iFrame's onLoading event to check access. But the localStorage which I was used to store JWT is not persistent in the iFrame. I'm using Angular 11.
Scenario:
I'm developing few applications which uses same auth site for sso, which was working as expected as I said in short description. But when it comes to Intelligent Tracking Prevention enabled browsers as of now Safari, It blocks the iFrame by considering it as 3rd Party Trackers which is very insane since the iFrame's origin (Domain) is same with Sub-domain used in service sites.
I tried to check the access by using storage access API i.e hasStorageAccess() in window onLoad method in the iFrame's script. If has no access, I called requestStorageAccess(). I'm here not using user gesture and using button click from service site because I'm using angular for frontend framework but in order to request using button in iFrame.(Since, The policy specifies to get access works only after user interaction which is another headache for devs)
I need help to overcome this issue and fix the SSO with ITP. Any guidance is useful and I'll keep updated.
Google is working fine with their sso and services such as YouTube and Mail doesn't need login on every visit. Any idea on how they achieved.
The reason could be that Safari has the option "Prevent cross-site tracking" enabled by default and that can interfere with the SSO login and display of an embedded iframe (because it blocks some cookies).
Solution
Disable (uncheck) the option for "Prevent cross-site tracking" in the Safari configuration menu.
Tip: To achieve a better user experience, using Javascript you can detect when a user is using Safari and show him an HTML message explaining that he needs to disable that option in order to continue or use another browser like Chrome or Firefox.
I was wondering if it is possible to throttle user internet speed when accessing the website, based on a user choice. This is needed for a small scale test of how users react to different internet speeds. My workaround would be to get the user to manually throttle the speed in chrome dev tools, but I would prefer that as the last option. Any option to achieve this or something similar would be amazing. Thank you.
Edit: Just to clarify I am looking to code the throttling functionality within the website itself so the user won't have to install something or set the Chrome dev tools manually, as I am aware of those solutions already.
What you desire to do is not easily possible due to security reasons. Chrome (and most other browsers) prevent DevTools access from js scripts. A user has to manually and interactively press the buttons on DevTools to change the network speed of the chrome tab.
On your behalf, you should get the UX testers to use the DevTools.
That being said, there are solutions for this. But they might be complex!
Solutions in JS:
Dirty fix:
Create looping data downloader script that performs a DOS attack on the client.
Basically something like:
let delay = 100*(Math.random() +0.5);
setInterval(/*downloadStuff*/, delay);
Issues with this fix:
This creates real network congestion on the client, which might not be optimal.
Introduces web page lag because of CPU usage.
Better, but time consuming fix:
You can simulate a slow network environment by doing the following:
Periodically do request.abort() some ajax and xhr requests. See here and here. And yes, you have to keep references to the remote calls. (Some inspirational code by bruth)
Randomly prevent some images from loading by changing their src attribute for a few second. See here.
And... there are more to it.
Iframes are tricky as they can be from another domain. Chrome does not support cross domain request. To simulate a slow network, you have to stop the iframe once in a while and refresh it using the src attribute, just like the images. You could use window.frames[].stop(), to simulate a frozen/stopped iframe.
Videos are sometimes loaded with iframes, which is again hard to simulate network lag on. Unlike, images, reloading a video will reset the playback time. AFAIK, there are no way to simulate video lag easily (without heavy change of video playback logic).
And... if you are really into it. Go ahead and override different events such as those from GlobalEventHandlers.
Many solutions aside from js
Use Chrome DevTools (easiest as mentioned)
If the site is connected to a server you own. Add delay on before responding to simulate server congestion.
Use/create a Chrome Extension that changes the network speed
Create your own browser that can run the site, and change the network speed accordingly
Install software to control networks settings on the OS
Change the network speed on the router
Not entirely sure what experience you want other than the Chrome dev tools way but here is an alternative.
clumsy makes your network condition on Windows significantly worse, but in a managed and interactive manner
https://jagt.github.io/clumsy/
https://serverfault.com/a/570702
How can we detect through PHP or maybe in node.js or other languages if a web page crashed (without the browser EXITing) so that when a user press the "reload" button on the "Aw Snap" page in chrome certain specific content inside the page can be shown in this particular case (crash case).
In a crash without EXIT, a browser shows per example in Google Chrome the famous "Aw, Snap!" page.
I don't want to know how to capture if the user refreshed the page or the page reloaded which can be known quite easily with different methods [one example see this PHP this code which can detect if users refreshed the page on major desktop/mobile browsers except IE unfortunately this code does not capture a crash event and the fact that user might request again the same page after a crash.
I tried using "register_shutdown_function", and some other maneuvers using connection PHP functions like "connection_aborted" etc... but with no success. I figure out a sloppy way through the use of session variables but probably there are better clever manoeuvres.
Any help or suggestion would be greatly appreciated. Any solution in nodejs will be also welcomed.
web brower crash because too many process from your browser to PC of Client.
this crash can't detected by php because PHP server scripting. and you have question.., why not use JS for detect crash of browser?, because JS created just for controller website,. if you force to checked that use ajax, node, etc you can't do that, why? because the problem comes suddenly
and detected crash browser from php is impossible.
What I'm looking to do is create a script that we could place on people's desktop to reset some settings back to where I want them for internal web application?
The script will need to reset everytime a user opens and closes the browser.
As far as my knowledge says, you cannot just edit settings of a browser without attaining user's permissions. So, it will be better to write a chrome plug-in application and ask you web application users to install that first.
You can identify the plug-in status in your web application.
Is it possible to find foreign instances of certain website? Ofc theese are independently opened tabs (not by window.open). I need to prevent user from opening 2 tabs, and send message to previously opened tab to inform that it's impossible to open 2 tabs. 2 Intependent tabs may break page offline storage and webSQL structure, so that I can't allow people to use 2 tabs. It's also semi-offline app so it needs to be client-side solution.
You can communicate across tabs using localStorage. Every time you write a value, a "storage" event is fired on the window object on every tab (except the current one).
http://diveintohtml5.info/storage.html
Scroll down to "Tracking changes in the html5 storage area"
The event will include event.key, event.newValue, event.oldValue.
This only works in modern browsers.
In 2021, you can use service worker:
https://github.com/gyteng/service-worker-event
notice: service worker only works in https protocol
localStorage can be used to track windows. You should take into account a situation when window crashes - it will leave the garbage in localStorage.
Accessing a common resource from several windows simultaneously may be done by mutex based on localStorage.
I've recently published the interwindow communication library (all features are described in readme). It provides thread-safe data sharing, cross-window locks and event broadcasting. It also solves some IE issues.
Broadcast Channel is design for this
https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
but the native api only support modern browsers.
there is a npm package support all old browsers as well
https://www.npmjs.com/package/broadcast-channel
You don't have control over that. The user can do basically whatever he/she wants on the computer.