Sunday, October 21, 2018

Boost SEO Performance with Google Lighthouse Audit Tool

SEO (Search engine optimization) performance is important because it's simply quality control for websites—For websites, good SEO performance means good for their social promotion.

In early 2018, Google released an SEO tool called Lighthouse that offers insight on how to improve the quality of your pages.The audit tool reports details on how visitors interact with different elements of your pages and what issues need to be fixed.


Google Lighthouse Audit Tool


In a  nutshell, Lighthouse is
  • An open-source
  • A webpage auditing tool that reports on a few key factors for each web page, which include
    • Overall performance 
    • Accessibility 
    • Best practices 
    • Progressive web applications
  • Can be run in different ways:
    • in Chrome DevTools
    • from the command line, or 
    • as a Node module
The easiest way to use Lighthouse is to install the latest version of Chrome and launch the DevTools from it.  In this article, we will cover more details on this way of using Lighthouse.

Chrome DevTools


This may be the simplest option when it comes to running the Google Lighthouse audit. To launch the DevTools, you do:
  1. Download Google Chrome for Desktop.
  2. In Google Chrome, go to the URL you want to audit. You can audit any URL on the web.
  3. Open Chrome DevTools.
    • You can open Chrome DevTools from Chrome's menu , click into “More tools” and then click into “Developer Tools.”
  4. Click the Audits tab.
  5. Click Perform an audit. DevTools shows you a list of audit categories. Leave them all enabled.
  6. Click Run audit. After 60 to 90 seconds, Lighthouse gives you a report on the page.

Sample Report





Performance


Besides SEO audit, you can also get a Performance audit report.  For example, below shows you the Opportunities and Diagnostics of Performance based on audit results:


Analysis of Performance
  • Has significant main thread work & JavaScript boot-up time is too high
    • Recommendation: delivering smaller JS payloads
      • Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this.
      • Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles
  • Uses an excessive DOM size
    • Recommendation: reducing DOM size to be fewer than ~1,500 nodes per page
      • Browser engineers recommend pages contain fewer than ~1,500 DOM nodes. The sweet spot is a tree depth < 32 elements and fewer than 60 children/parent element. A large DOM can increase memory usage, cause longer style calculations, and produce costly layout reflows

References

  1. How Google Lighthouse Audit Works

Wednesday, October 17, 2018

JMetesr—How to Load Test CSRF-Protected Web Sites

As shown in below Figure (click to enlarge), an X-CSRF-Token header is used in an HTTP request.  In this article, we will discuss how to load test CSRF-Protected web sites using JMeter.  To begin with, what is CSRF?

Figure 1.  X-CSRF-Token header shown in View Results Tree

Cross-Site Request Forgery (CSRF)


Unlike cross-site scripting (XSS), which exploits the trust a user has for a particular site, CSRF exploits the trust that a site has in a user's browser. Cross-Site Request Forgery (CSRF) attacks occur through a malicious website that sends the requests to the targeted application website if the user is already authenticated through a different website.

These attacks happen if the user logs in to the actual website and leaves the session open, and accesses the malicious website links and forms that try to form the dynamic URLs to the targeted application where the user has already logged in.

The best way to prevent CSRF attacks is to attach CSRF tokens to each request from the application users and bind them to the user session. This way, the applications can restrict the access to the user's secure information by confirming the request is coming from known user sessions.

View Results Tree


After script recording, the best way to debug correlation issues is to use View Results Tree component (a Listener).

The View Results Tree shows a tree of all sample responses, allowing you to view the response for any sample. In addition to showing the response, you can see the time it took to get this response, and some response codes.

Note that View Results Tree MUST NOT BE USED during load test as it consumes a lot of resources (memory and CPU). Use it only for either functional testing or during Test Plan debugging and Validation.

From Figure 1, we have found an X-CSRF-Token header used in Step 32.  This means that we need to search for CSRF token backwards in the Response Data of earlier Steps.

Correlation


From the end-user’s point of view, CSRF protection is transparent. On the protocol level, CSRF protection is an additional mandatory dynamic parameter, such as the:[2]
  • Cookie
  • Header
  • Request Parameter
When a real-life user surfs a CSRF-protected website with a web browser, the browser’s CSRF security token can be set (for example: this can be set with a JavaScript function). Now, here’s where JMeter’s “not being a browser” issue really becomes a limitation. As it’s not a browser, it can’t execute a client-side JavaScript and therefore can’t generate and record a proper CSRF token.

To resolve the challenges raised by CSRF sites, you’ll need to use a JMeter Correlation.  In this article, we will demonstrate the use of a JMeter PostProcessor Regular Expression Extractor to extract the CSRF token.

Figure 2.  Specification of  a PostProcessor Regular Expression Extractor 

Regular Expression Extractor


At Step 15 (see Figure 2), you need to add a new PostProcessor Regular Expression Extractor to extract the CSRF token.

Sample Response Data:

[
  {
   <snipped>
    "bimodelerURL": "/bimodeler",
    "csrftoken": "h3CYF2EDNYlfBPKM01grVQQMfUKE0lAvhwfRzHtxU1Mdigx6",
    "vaAdminPermission": true,
   <snipped>
   }
]

Regular Expression:

"csrftoken":"([^\"]+)


Then, you can use a text editor to open the jmx file and do a global replacement of
h3CYF2EDNYlfBPKM01grVQQMfUKE0lAvhwfRzHtxU1Mdigx6
with
${csrftoken}
For example, at Step 32, you should see something updated like below:

Figure 3.  Variable Substitution in HTTP Header


References

  1. Oracle JET for Developers
  2. How to Load Test CSRF-Protected Web Sites