Chrome delay loading cached SVG file - ajax

I have javascript code that requests an SVG resource file for displaying.
The SVG won't change. It is about 100kb, containing one embedded jpeg image (as a data:image/jpeg:base64). So I'd like the browser to cache it if possible.
The code to load the svg is something like this
$(btn).click(function(){
console.log("loading...");
$(element).load("mri/t1/axi/t1_axi_100.svg", function(resp, status, xhr){
console.log("loaded");
...
});
});
It seems this takes 2 seconds. All of this time delay is in between the "loading..." and "loaded". You can see from the profiling (chrome dev tools timeline), that there's no processing going on in between: the left call stack is for the "click" event, and the right one is for the "loaded" handler. In between is a gap where "mri/t1/axi/t1_axi_100.svg" is allegedly loading (long blue bar near top).
However when I look in Network under chrome dev tools, I see that each of the "download" steps took < 4 ms only. (narrow blue bars on right hand side; note the large gaps)
You can also see here that the caching has worked (svgs from disk cache; embedded jpegs from memory cache).
The breakdown of the 4ms for the svg is shown here.
So why is there a 2 second delay? My code takes 4 ms, and the retrieval from the cache seems to take 4 ms!
The headers shown in the "Network" tab are:
General
Request URL:http://homphysiology.org/neurosim/basic/slices/mri/t1/axi/t1_axi_100.svg
Request Method:GET
Status Code:200 OK (from disk cache)
Remote Address:173.254.28.84:80
Response Headers
Accept-Ranges:bytes
Cache-Control:max-age=2592000
Content-Encoding:gzip
Content-Type:image/svg+xml
Date:Tue, 17 Jan 2017 15:49:02 GMT
Expires:Thu, 16 Feb 2017 15:49:02 GMT
Last-Modified:Thu, 11 Aug 2016 18:26:42 GMT
Server:nginx/1.10.2
Vary:Accept-Encoding
X-Content-Type-Options:nosniff
Request Headers
Provisional headers are shown
Accept:text/html, */*; q=0.01
Referer:http://homphysiology.org/neurosim/basic/case2_nonlinear.html
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
X-Requested-With:XMLHttpRequest
Could Chrome be polling the server and waiting for a response?
If so can I prevent this? Alternatively could it be that the XHR ready state is not being triggered in a timely fashion?

It looks like server delay to me.
You show us two different resource downloads at Timeline and Network tabs. First one is t1_axi_100.svg and second one is t1_axi_070.svg. Probably browser took only t1_axi_070.svg from cache. TTFB for t1_axi_100.svg was 1.75 seconds in my case.

Related

Accessing web-cam using Cypress

I am trying to automate a web-app (company specific) using Cypress which contains a page to take a picture using a web-cam. On clicking the 'Take a Photo' button, it shows an error message asking to provide access to the camera.
But, a browser pop-up is not displayed asking for permissions unlike the open-source website - https://webcamtests.com/
On looking at Cypress documentation, a default set of Chrome switches are being added to the browser before the launch which also includes
'--use-fake-device-for-media-stream'
'--use-fake-ui-for-media-stream'
I've removed them using the below code that is placed in the config file .
launchOptions.args = launchOptions.args.filter((arg) => {
return arg !== '--use-fake-device-for-media-stream' && arg !== '--use-fake-ui-for-media-stream'
})
Also, in the documentation it specifically says this reg the default switches- https://docs.cypress.io/guides/guides/launching-browsers#Launching-Browsers
"Disables prompts requesting permission to use devices like cameras or mics"
Am looking to see what is the corresponding switch for this and is there a way to enable the prompt to provide access?
Any help/suggestion is appreciated.
Cypress Version: 12.5.1
Chrome Version: 109
Platform - Mac
Note:
I've also tried using an open source library for enabling the camera permissions but it did not work.
https://github.com/kamranayub/cypress-browser-permissions
The prompt is displayed when automated using Web-Driver.
Please try this:
cy.request({
method: 'GET',
url: 'https://webcamtests.com/',
headers: {
'Content-Type': 'text/html',
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36'
},
followRedirect: false,
body: {}
});
Above test simulate a real user request to the target website and trigger camera permissions pop-up.
Please keep in mind, it might not work for all websites as the pop-up is controlled by the website and user's browser.

How to get the client PC name?

In my project, I want to get the PC name of the client user
but the methods I am using just give me the PC name of the server:
System.get(user.name)
Sorry you can't directly
Your best bet is User-Agent header. You can get it like this in JSP or Servlet,
String userAgent = request.getHeader("User-Agent");
The header looks like this,
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.0.13) Gecko/2009073021 Firefox/3.0.13
It provides detailed information on browser. However, it's pretty much free format so it's very hard to decipher every single one. You just need to figure out which browsers you will support and write parser for each one. When you try to identify the version of browser, always check newer version first. For example, IE6 user-agent may contain IE5 for backward compatibility. If you check IE5 first, IE6 will be categorized as IE5 also.
You can get a full list of all user-agent values from this web site,
http://www.user-agents.org/
With User-Agent, you can tell the exact version of the browser. You can get a pretty good idea on OS but you may not be able to distinguish between different versions of the same OS, for example, Windows NT and 2000 may use same User-Agent.
Remember the scope the client could be behind a proxy
A smart idea is to use javascript and send infos via ajax call
Browser, Operating System, Screen Colors, Screen Resolution, Flash version, and Java Support should all be detectable from JavaScript (and maybe a few more). However, computer name is not possible across all browser at least.
You can do it with IE 'sometimes' as I have done this for an internal application on an intranet which is IE only. Try the following:
function GetComputerName()
{
try
{
var network = new ActiveXObject('WScript.Network');
// Show a pop up if it works
alert(network.computerName);
}
catch (e) { }
}

Can I detect Tor Browser inside the browser itself, via Javascript I suppose?

I'd like to disable some features of a web app I'm building, if the browser is Tor Browser. Can I inside the browser itself (client side, not server side) find out if the browser is Tor Browser?
I would prefer a solution that didn't issue any HTTP requests to match the browser's IP against Tor exit nodes.
Background: In my case, Tor Browser pops up a dialog that asks the user "Should Tor Browser allow this website to extract HTML5 canvas image data?", because, says Tor Browser, canvas image data can be used to uniquely identify a browser.
Update: After reading the answers below: Perhaps the best solution in my case, is to keep a list of Tor exit nodes server side (an up-to-date list, refreshed periodically), and when a browser loads the page, I set a variable in a <script> tag, if the browser's IP matches such an exit node: var isProbablyTorBrowser = true. Then, client side, no additional requests, or complicated logic, is needed.
The Tor browser is not designed to be undetectable (that's impossible to do). Rather, it is designed so that all copies are indistinguishable from each other: you cannot track a browser from one site to another, or from one visit to another, strictly through browser fingerprinting.
This gives it a distinct fingerprint of its own. As of right now, a browser that
Has a User-Agent of Mozilla/5.0 (Windows NT 6.1; rv:31.0) Gecko/20100101 Firefox/31.0
Has a screen resolution that matches the browser window size (particularly if that size is 1000x800)
Has a time zone of "0" (GMT)
Has no plugins (navigator.plugins is empty)
is probably the TBB browser. The User-Agent string may change when the next ESR version of Firefox comes out, most likely to Mozilla/5.0 (Windows NT 6.1; rv:31.0) Gecko/20100101 Firefox/38.0.
The screen resolution/browser window match alone may uniquely identify TBB: even in fullscreen mode, there's a one-pixel difference between window height and screen height in Firefox.
The "official" way to detect tor is to check the user's IP address and see if it's a tor exit node. Tor runs TorDNSEL for this purpose.
Here's a PHP implementation of a TorDNSEL lookup from a tutorial by Irongeek
function IsTorExitPoint(){
if (gethostbyname(ReverseIPOctets($_SERVER['REMOTE_ADDR']).".".$_SERVER['SERVER_PORT'].".".ReverseIPOctets($_SERVER['SERVER_ADDR']).".ip-port.exitlist.torproject.org")=="127.0.0.2") {
return true;
} else {
return false;
}
}
function ReverseIPOctets($inputip){
$ipoc = explode(".",$inputip);
return $ipoc[3].".".$ipoc[2].".".$ipoc[1].".".$ipoc[0];
}
If you're not using PHP, you should still be able to adapt this relatively easily.
Another method of detecting Tor is to have a script download the list of Tor exit nodes every half hour or so, then check each user's IP address against that list. This may be less reliable, though, as not all exit nodes are published. There's a list you can use, and instructions, available at dan.me.uk.
EDIT: Since you updated your question, the second option (a list you host locally) is going to be preferable.
There might be a quite reliable way. Check if it returns you a blank (white) image when you try to Base64 it using canvas.
When you do so an notification is shown.
No matter what user chooses JS returns a white image. So you can try to base64 (<-- it's a verb ;)) a non white image and then check if a white base64 image returned.
UPD.
Here is an example I made for myself. For me it was important to detect if I have an access to the image, but it can be used for Tor detecting in some way.
UPD2.
There even might be no notification shown as it's shown in code snippet below. Maybe because it's ran in an iframe.
function isTorBrowser() {
var img = document.createElement("img");
// Creates a black 1x1 px image
img.src = 'data:image/png;base64,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';
var canvas = document.createElement("canvas");
canvas.width = 1;
canvas.height = 1;
var ctx = canvas.getContext("2d");
var imagedata = ctx.getImageData(0, 0, canvas.width, canvas.height);
return imagedata.data[0] == 255
&& imagedata.data[1] == 255
&& imagedata.data[2] == 255
&& imagedata.data[3] == 255;
}
document.getElementById('tor-browser-test').innerHTML = isTorBrowser() ? 'Is Tor' : 'Not Tor';
<div id="tor-browser-test"></div>
There is no reliable way to detect the TOR Browser... That's kind of a goal of that browser. If you find a reliable way, chances are somebody else finds it too, tells the TOR developers and they close it.
E.g. all TOR Browser bundles report bogus, but reasonable User-Agents. The current release version e.g. says it is Mozilla/5.0 (Windows NT 6.1; rv:31.0) Gecko/20100101 Firefox/31.0 no matter what OS you're actually using.
You may apply some heuristics to detect a TOR Browser with a certain probability, but will also generate some false-positives...
Check the user agent. TOR Browser will report the latest Firefox ESR on a certain OS, currently Windows 7 32-bit (but some users might have changed that again and other users might simply use the ESR release but not the TOR Browser)
Plugins are disabled, so navigator.plugins will be empty (but some users might have re-enabled plugins again).
etc.
Detect the browser actually uses the TOR network.
Of course, you'll have to keep your checks up to date, so it requires a fair amount of maintenance busywork.
Personally, given the less than stellar detection results, maintenance burden and very modest experience improvements for users, I wouldn't try to handle TOR Browser differently at all.
By the firefox resource bundle you can check it.
The resource:// URI scheme is used by Firefox to call on-disk resources from internal modules and extensions.
But some of these resources may also be included to any web page and executed via script tag. Mozilla developers is not consider the resources as a fingerprinting vector, despite the fact that some of them can reveal what the user does not wish. For example, differences in built-in preferences files clearly indicates you are using Windows or Linux or Mac, even if you're behind Tor Browser.
https://www.browserleaks.com/firefox

Can't download from youtube encoding error

it's a week that I'm trying to write a program that download correctly from youtube
a video
the problem is this:
I've done via httpwebrequest a simple downloader and all work well.
I've tried download a mp4 video from a local server (uniform server) and all goes well, video is the same, work and is valid mp4.
When I download the same video from youtube something strange happens:
It fill some characters in downloaded file with sequence EF BF BD
for example when encounter character E2 (I've compared the two files one from youtube and the original). Googling around I discover that a server return this kinda sequence when encounterd a invalid char for your encoding, now I'm on wp7 and I can't set
Accept-Charset:
ISO-8859-1,utf-8;q=0.7,*;q=0.7
here's others useful data: I've try with these:
_webRequest.Method = "GET"; //also POST
_webRequest.UserAgent = #"Mozilla/5.0 (Windows; U; Windows NT 6.1; it; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16";
_webRequest.Accept = #"text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8";
_webRequest.BeginGetResponse(_onDownload, userState);
format url from youtube
Any Idea?
thanks
Can you set the header using the _webRequest.Headers method? See these related questions:
Cannot set some HTTP headers when using System.Net.WebRequest
Constructing a POST in C#

Problem With IE 8

My site is working fine on mozila but when we go for IE 8 it gives error on status bar
Webpage error details:
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Timestamp: Sun, 3 Apr 2011 16:26:29 UTC
Message: Object expected
Line: 8
Char: 3
Code: 0
on line 7 to 11
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#container').easyTabs({defaultContent:1});
});
</script>
Is this web page publicly accessible? I work for a company called Changebase who have a product called “AOK Browse-It” which can check for IE8 compatibility. If you can send me the URL I can run it through this tool and post the results here. The tool can ‘spider’ static websites automatically, or for more complex web sites (user logon, dynamic content etc) we use ‘client-side capture’ which monitors web browsing using an agent on the PC.

Resources