Can I change the user-agent when generating a lighthouse report? - google-chrome

I am trying to run a page performance report through lighthouse using a search engine crawler user-agent (such as Googlebot) rather than the default lighthouse user-agent. I can't see anywhere in lighthouse where it's possible to specify an alternate user-agent, so was wondering if it's possible?
Thanks

This can be achieved with --chrome-flags in the CLI.
The complete list of chrome flags is available here, I have quick-linked to the relevant flag, which is --user-agent.
Please note: in order to use this you have to switch off device emulation otherwise the user agent you set will get overridden. As such you may need to set height and width etc. (Which can be done with --window-size=360,640);
lighthouse https://example.com --disable-device-emulation --chrome-flags="--user-agent=**YOUR USER AGENT** --window-size=360,640".

Related

Chrome Invalid SSL Certificate Security Warning

I ran into an interesting problem today using Chrome and I'm hoping there is a better way to fix it than what I ended up doing.
The issue starts with an invalid SSL certificate on a site that I'm configuring. In Chrome it's possible to advance past this screen using a link which adds a security exception for the current domain so that you don't have to view this warning message again.
It's also possible to clear this warning by going to the site with the exception then clicking the Not secure text and choosing the Re-enable warnings option.
Now my problem, I have a couple different redirects in place on the site that will redirect my .com and .bank domains to the primary .net domain. While developing I added security exceptions for all three of these domains. This becomes and issue when testing that my SSL certificate is configured properly. I want to clear out Chrome's stored exception for the .com domain - but I cannot do so using the Re-enable warnings option because as soon as I arrive at the page Chrome sees that an exception is already stored and proceeds to load the page normally which then gets redirected to the .net domain. Because of this there is no point where I can actually clear out the bypassed security warning in Chrome...
The only way I've been able to find to clear out these exceptions is to use the Reset option in Chrome's settings, which is not something I want to do regularly. I'm wondering if there is a hidden settings page in Chrome that lists all of the bypassed security warnings so that I may clear them out individually.
To "Re-enable warnings" for all SSL warnings if you don't want to clear your history (or if you dont know all the exemptions you have in place), you can close Chrome and edit:
"C:\Users\USER\AppData\Local\Google\Chrome\User Data\Default\Preferences"
and set ssl_cert_decisions":{},"
Stored in the JSON-path:
profile > content_settings > exceptions > ssl_cert_decisions
Or you can change the decision_expiration_time of the specific exemption to be equal to the last_modified time
Example: "ssl_cert_decisions":{"https://expired.badssl.com:443,*":{"last_modified":"13235055329485008","setting":{"cert_exceptions_map":{"-201cgaDTf2DD6Cj0N6/tKvudkzDuRBA3GwKd8T9hE7mHhQ=":1},"decision_expiration_time":"13235055329485008","version":1}}}
you will have to clear the browsing data for that site, the easiest way I found to do this is (Ctrl+Shift+Del) to bring the clear browser data window up then set time range to 1 hour, choose browsing history only then click clear data. Hope this is useful.

Different HTML pages using the same image, does the browser fetch the image once and use it twice?

I've got an odd question. Say I have two HTML pages index1.html and index2.html. In both the pages is some jpg image called "Hello". When I use the browser to point to say www.testing.com/index1.html the browser will load index1.html and the image Hello.
Now my question is when I go click on some link in index1.html that takes me to index2.html, will the browser look to go to back to the server to get image Hello or will it use the Hello image used in index1.html?
It depends on the caching headers the server sends out alongside the image.
There are several ways in which caching can be done.
When a resource is served with an expiry date in the future, the browser will use its cached copy until that date is reached (or the cache is emptied or a refresh forced.
Another way is for the server to listen to the If-modified-since request header. The server can then check whether the resource has been modified since that date. If it hasn't, it will return a 304 not modified status; otherwise, the updated resource.
The Apache Caching guide is a (lengthy) introduction to the subject.
To see in your browser what caching rules apply, open its developer tools and look for the "Net" tab. It's a list of all the requests that were made in connection with the current page. It'll tell you whether a resource was loaded from the server, or a cached copy used.
For example, this result on a Stack Overflow image from Chrome's developer tools:
suggests the image was cached. When I click that row, I can switch to the "header" view, where I can see the exact caching instructions the server sends:
It means that as long as the browser has a cached copy of the image, it will keep on using that without ever checking with the server until December 17, 2014.
Different browsers handle this differently. It can also depend on user settings. Users can set the browser to cache nothing if they so desire.

Can Google Chrome be made to auto reload after network outage in kiosk scenario?

I have an unattended touch screen kiosk application which needs to be able to automatically reload the browser home page after a network outage has occurred. At the moment the browser will display an "Unable to connect to the internet" error and will wait for a manual reload to be carried out before proceeding. Can this be automated?
I've searched for plugins and have found some plugins which deal with auto-reload but they don't seem to work in this context. I am guessing that the plugin is only active when a page is loaded so in this case with an error condition, perhaps the plugin is not active.
One alternative might be to override the error page which is displayed by Chrome but I don't know if this is possible. I could then instantiate a Javascript timer to try a reload every n seconds for example. Is this possible?
I saw a suggestion to use frames to allow the outer frame (which is never refreshed) to keep trying the loading of an inner frame but I'm not keen to use frames unless there is no alternative. I also saw a suggestion to use AJAX calls to check if the network was working before attempting a page load but this seems overkill if there is a way to correct the error only when it has occurred rather than pre-empt an error for every page load.
Host system is Windows 7 by the way. I'm keen to keep the browser running if possible rather than kill and create a new browser process.
If you don't want to tackle chrome extension development, you could wrap your site in an iframe, and then periodically refresh the iframe from the parent frame. That way you don't need to worry about OS issues.
if the content were loaded from ajax from the start then the it could simply output a custom message on the page as it does a check via AJAX. Probably prevention over remedy is always recommended
Assuming linux, you could create an ifup script to simply relaunch the browser with something like
#!/bin/sh
killall google-chrome
DISPLAY=:0 google-chrome
On debian/ubuntu, edit /etc/network/interfaces to include a post-up line; Google ifupdown for other distros.
On windows, you'd do roughly the same with a PowerShell script.
If you really want the precise behaviour you describe (without restarting the whole browser), I suggest you develop a plugin/extension: http://code.google.com/chrome/extensions/getstarted.html
I know you are using Chrome, but in Firefox this is trivial by overriding the netError.xhtml page to do a setTimeout(location.reload, 10000);.

What to do with chrome sending extra requests?

Google chrome sends multiple requests to fetch a page, and that's -apparently- not a bug, but a feature. And we as developers just have to deal with it.
As far as I could dig out in five minutes, chrome does that just to make the surfing faster, so if one connection gets lost, the second will take over.
I guess if the website is well developed, then it's functionality won't break by this, because multiple requests are just not new.
But I'm just not sure if I have accounted for all the situations this feature can produce.
Would there be any special situations? Any best practices to deal with them?
Update 1: Now I see why my bank's page throws an error when I open the page with chrome! It says: "Only one window of the browser should be open." That's their solution to security threats?!!
Your best bet is to follow standard web development best practises: don't change application state as a result of a GET call.
If you're worried I recommend updating your data layer unit tests for GET calls to be duplicated & ensure they return the same data.
(I'm not seeing this behaviour with Chrome 8.0.552.224, by the way, is very new?)
I saw the subjected behavior while writing a server application and found that earlier answers are probably not true.
Chrome distributes a single request into multiple http ones to fetch resources in parallel. In this case, it is an image which it fetches as a separate http get.
I have attached screen shot of packet capture through wireshark.
It is for a simple get request to port 8080 for which the server returns a hello message.
Chrome sends the second get request for obtaining favorite icon which you see on top of every tab opened. It is NOT a second get to cater time out or any such thing.
It should be considered another element that differs across browsers. However, doing things in multiple http requests in parallel is kind of a standard thing in browsers as of 2018.
Here is a reference question that i found latter
Chrome sends two requests SO
Chrome issue on google code
It also can be caused by link tags with empty href attributes, at least in Chromium (v41). For example, each of the following line will generate an additional query on the pageĀ :
<link rel="shortcut icon" href="" />
<link rel="icon" type="image/x-icon" href="" />
<link rel="icon" type="image/png" href="" />
It seams that looking for empty attributes in the page is a good starting point, either href or src.
This behavior can be caused by SRC='' or SRC='#' in IMG or (as in my case) IFRAME tag. Replacing '#' with 'about:blank" has fixed the problem.
Here http://forums.mozillazine.org/viewtopic.php?f=7&t=1816755 they say that SCRIPT tags can be the issue as well.
My observation of this characteristic (bug/feature/whatever) occurs when I am typing in a URL and the Autocomplete lands on a match while still typing in the URL.
Chrome takes that match and fetches the page, I assume for the caching benefits that would occur when loading the page yourself....
I have just implemented a single-use Guid token (asp.net/TSQL) which is generated when the first form in a series of two (+confirmation page) is generated. The Token is recorded as "pending" in the DB when it is generated. The Guid token accompanies posts as a hidden field, and is finally marked as closed when the user operation is completed (payment). This mechanism does work, and prevents any of the forms being resubmitted after the payment is made. However, I see 2 or 3 (!?) additional tokens generated by additional requests quickly one after the other. The first request is what ends up in front of the user (localhost - so ie., me), where the generated content ends up for the other two requests I have no idea. I wondered initially why Page_Load handlers were firing mutliple times for one page impression, so I tried a flag in Http.Context.Current - but found to my dismay, that the subsequent requests come in on the same URL but with no post data, and empty Http.Context.Current arrays - ie., completely (for practical purposes) seperate http requests. How to handle this? Some sort of token and logic to refuse subsequent page body content requests while the first is still processing? I guess this could take place as a global context?
This only happens when I enable "webug" extension (which is a FirePHP replacement for chrome). If I disable the extension, server only gets one request.
I just want to update on this one. I've encountered the same problem but on css style.
I've looked at all my src, href, script tag and none of them had an empty string. The offending entry was this:
<div class="Picture" style="background-image: url('');"> </div>
Make sure you also check your styles for empty url string
I was having this problem, but none of the solutions here were the issue. For me, it was caused by the APNG extension in Chrome (support for animated PNGs). Once I disabled that extension, I no longer saw double requests for images in the browser. I should note that regardless of whether the page was outputting a PNG image, disabling this extension fixed the issue (i.e., APNG seems to cause the issue for images regardless of image type, they don't have to be PNG).
I had many other extensions as well (such as "Web Developer" which many have suggested is the issue), and those were not the problem. Disabling them did not fix the issue. I'm also running in Developer Mode and that didn't make a difference for me at all.
In my case, it was Chrome (v65) making a second GET /favicon.ico, even though the response was text/plain thus clearly no <link in there referring the icon. It stopped doing that after I replied with a 404.
Firefox (v59) was sending 2 requests for favicon; again it stopped doing this after the 404.
I'm having the same bug. And like the previous answer this issue is because I've installed the Validator chrome extension
Once disable the extension, works normally.
In my case I have enpoint (json) data to a different server and browser make first an empty request(Request Method:OPTIONS) to check if a endpoint accept requests from my server, Same-origin policy. Also goot to know is a Angular 1 App.
In conclusion I make requests from localhost to a online fake json data.
I had empty tcp packet sent by Chrome to my simple server before normal html GET query and /favicon after. Favicon wasn`t a problem but empty tcp was, since my server was waiting either for data or for connection to be finished. It had no data and wouldn't release connection for 2 minutes. So thread was hanging for 2 minutes.
Jrummell's Link in a comment to original post helped me. It says empty tcp packets could be caused by "Predict network actions to improve page load performance" setting. I tried turning off prediction settings one by one and it worked. In chrome version 73.0.3683.86 (Official Build) (64-bit) this behavior was caused by chrome setting "Use a prediction service to load pages more quickly" turned on.
So in chrome~73 you can try going to setting -> advanced -> privacy and security -> Use a prediction service to load pages more quickly and turn it OFF.
It could be situation when Chrome send in start the request with method OPTIONS and only the second is real request with method GET. Usually in code we deal only with GET (or POST/PUT/DELETE..) but not with OPTIONS. Check if the first request has method OPTIONS.

How to keep a url param across pages

I wan't developers who embed my webapp to be able to pass a param in the url like ?style=dark which will alter the css accordingly. Is there a better way to keep this setting as the user navigates than appending ?style=dark to all links?
I've considered cookies etc. but if one user is viewing two pages which embed my app with different themes then one will override the other.
I'm using Python/Django.
If you neither want to use Cookies nor Sessions and do not want to embed it into URLs, the only alternatives which comes to my mind are:
First the most generic: Use a dummy domain in front. Instead of www.example.com use h**p://THEME.example.com/PATH. This even works for HTTPS if you own a wildcard SSL for *.example.com.
A second variant would be to create a Basic-Auth-Handler which uses the Theme as the username with a dummy password. The URL then can look like:
h**p://THEME#www.example.com/PATH
However I am NOT sure what happens if a user connects to the same site with two different themes in the Basic-Auth-case. Also it is somewhat tricky to make the site available for search engines if it is behind an authentication handler. This is because you MUST have an auth-handler today to circumvent the Anti-Phishing-protection in modern browsers.
Note that with both methods you can only have one parameter easily. The password does not count and there are browsers out there which do not accept a wildcard SSL cert *.example.com for PARAM1.PARAM2.example.com.
I'm not exactly sure, but anyway you would have to pass this variable to your site. With that I mean, that there is no difference if you add ?style=dark to your href's, or rel="dark" to your <a>'s for use with javascript. keep in mind that it's just an example
Ofcourse you can always work on that AI to predict what the user wanted at the specific moment. hehe
I'm sure you can use a Session for this kind of thing, not? The first time the values are provided via the Querystring you add them to the Session and then retrieve them from the session in the future.