Category: How To | Page 9

How to Get HTML Elements with textContent in JavaScript

This is a short instruction on how to identify an HTML element based on a specific string that can be searched using textContent property.

It’s best to demonstrate the method with an example. Using the HTML page below, we are going to search for a text “Search This!” and select the whole row and change the background color to maroon.

First of all, we are going to create a simple page using this HTML from an old ASP.NET Web Forms that look like the following:

And here’s the HTML code:

test.htm

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Old ITNota.com HTML File</title>
</head>
<body>
  <table>
    <tr>
      <td class="adminaxsSD1" width="30%">
        <span id="DltUserService_Label1_1">Not this one</span>
      </td>
      <td class="adminaxsSD1" align="center">
        <table>
          <tr>
            <td>
              <select name="DltUserService$ctl03$ddlUserAccess" 
                      id="DltUserService_ddlUserAccess_1"
                      disabled="disabled" class="aspNetDisabled">
                <option value="N">No Access</option>
                <option selected="selected" value="F">All Options</option>
                <option value="L">Selected Accounts</option>
              </select>
            </td>
          </tr>
        </table>
      </td>
      <td align="left" width="70%">
        <div id="DltUserService_panelCtl_1">
          <p>N/A</p>
        </div>
      </td>
    </tr>
    <tr>
      <td class="adminaxsSD1" width="30%">
        <span id="DltUserService_Label1_2">Search This!</span>
      </td>
      <td class="adminaxsSD1" align="center">
        <table>
          <tr>
            <td>
              <select name="DltUserService$ctl03$ddlUserAccess" 
                      id="DltUserService_ddlUserAccess_2"
                      disabled="disabled" class="aspNetDisabled">
                <option value="N">No Access</option>
                <option selected="selected" value="F">All Options</option>
                <option value="L">Selected Accounts</option>
              </select>
            </td>
          </tr>
        </table>
      </td>
      <td align="left" width="70%">
        <div id="DltUserService_panelCtl_2">
          <p>N/A</p>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

Yes, it’s messy, but this was taken from a real legacy application from the production only obfuscated and simplified.

Now, we want to search the text, and then select the whole row which is marked by tr tag in the HTML.

So, we’re going to use .closest() with the tag name we want to select (which is tr):

    const searchText = 'Search This!'

    document.addEventListener('DOMContentLoaded', function () {

        const spanTags = document.querySelectorAll('span')

        for (let i=0; i<spanTags.length; i++) {
            if (spanTags[i].textContent == searchText) {

                const elementId = spanTags[i].id

                // Change background to maroon
                document.getElementById(elementId)
                    .closest('tr')
                    .style.background = 'maroon'
            }
        }
    })

Now, when we reload the test page, the row with the text will look like so:

In the next post, we will go over on how to search a string and modify it using regular expression all in JavaScript.

How to Setup Naked Domain to Resolve in Cloudflare Pages

If you’ve never tried Cloudflare static site hosting, Cloudflare Pages is great for speed and worldwide distribution. One hiccup I encountered because of the way the DNS was setup in Cloudflare when using a custom domain. If you want to include the www prefix, it won’t resolve properly by default and you will see a page error.

The problem is Cloudflare just gives an instruction to add a CNAME record with ‘www’ and content to your Cloudflare Pages URL it provided you. Once done, it would still give you another warning like the following:

A few more steps are required to complete your setup.

Add an A, AAAA, or CNAME record for your root domain so that itnota.com will resolve.

Now, this is interesting because I was not given any other hints or IP address to create an A or AAAA record and CNAME can only be used on subdomains, including ‘www.’

I think in reality, you can ignore the warning and go ahead create a page rule anyway, but that does bug me so the other possibility is to create another CNAME with @ and the same forwarding address similar to the ‘www’.

Then you will get another warning:

Because CNAME records are not allowed at the zone apex (RFC 1034), CNAME flattening will be applied to this record.

And this point, you will still get an error message if you use naked domain to go to your page.

To solve this we need to setup a Page Rule to redirect the naked domain to the www.

Steps

In Cloudflare, go to your corresponding domain and on the icon menu on top of the page, select Rules and click the Create Page Rule button.
In Edit Page Rule screen, type in your naked domain name with forward slash and asterisk (e.g., itnota.com/*).
On the next line, select Forwarding URL from the first drop-down and 301 – Permanent Redirect.
Then in the last textbox, you want to type in the proper URL where you want to redirect the traffic to, which in this case is https://www.inota.com/$1. $1 is like a wildcard to take any strings after the last forward slash.
Your final setting should be similar to the screenshot below.
Don’t forget to click the Save button.
Once done, just make sure that the rule is active by making sure that it’s turned on (the button with green color on the right).

That’s all there is to it. This time, if you type in something like itnota.com in your browser, it will direct your browser to the proper URL and there’s no more error message.

How to Customize 401 Error Page with 302 Redirect on IIS

Continuing from the last post on customizing 401 error page on IIS, there’s a different way to do so by using 302 Redirection.

Using this method is actually a bit more simple to do, it’s just that you have to create a second website with a landing page to serve as your error page. Not everyone has this privilege to just have a second instance created in production environment, so it’s always good to have more options.

When you need to restrict access to your web application on IIS, any unauthorized users will see the standard 401 Error Page from IIS:

401 – Unauthorized: Access is denied due to invalid credentials. You do not have permision to view this directory or page using the credentials that you supplied.

Instead of serving a default 401 Error Page, it’s always good to show a customized 401 page that is more user-friendly. Here’s a one way to do it by using a page redirect.

Steps to Use Custom 401 Error Page using 302 Redirect in IIS

Create an HTML page as our custom 401 page. In this example, it will be called ITNOTA-Custom-401.htm.
Create an instance in IIS just for this file and set this file as the main landing page (or use it as your index.htm). For this example, we’ll set this up as fwd.itnota.com with a file name of ITNota-Custom-401.htm.
Next, launch Internet Information Services (IIS) Manager and click on your site on the left pane.
Click on Error Pages.
On the next screen, you will see a list of default error pages according to its Status Code. In this example, we want to select 401.
On the Edit Custom Error Page window, click on the Respond with a 302 redirect radio button and type in the URL of the second website where your custom 401 page resides, including the file name, then click OK.

That’s all there is to it.

As a test, we can try to load the page and this is also where using 302 redirect is different than using a static page within the same instance. If using Windows Authentication, you will not see the Windows Security screen to enter your NTID and password. It does the authentication in the background and if you’re not authorized, you will right away be redirected to the second web page that hosts the 401 custom page.

Yes, it’s almost like an anti-climax to see a plain custom 401 error page being displayed. I hope you can come up with a much better design than my example to make all the effort worthwhile.

This setting for a custom 401 using 302 redirect works for both ASP.NET and Classic ASP.

How to Use Custom 401 Error Page on IIS

When you need to restrict access to your web application on IIS, any unauthorized users will see the standard 401 Error Page from IIS:

401 – Unauthorized: Access is denied due to invalid credentials. You do not have permision to view this directory or page using the credentials that you supplied.

Often times, though, you want to show your end users a custom error page with specific instructions on what to do. That is certainly a more graceful way of handling the error than just showing the standard windows 401 error page.

If you have the flexibility to setup your own web instances, you might want to try using 302 Redirect instead as it’s much simpler to setup. Otherwise, this is also a viable option, although a bit long.

Steps to Use Custom 401 Error Page in IIS

Create an HTML page as our custom 401 page. In this example, it will be called ITNOTA-Custom-401.htm.

For simplicity, we’ll save the file in C:\Temp folder.
Next, launch Internet Information Services (IIS) Manager and click on your site on the left pane.
Click on Error Pages.
On the next screen, you will see a list of default error pages according to its Status Code. In this example, we want to select 401.
On the Edit Custom Error Page window, click on the Set… button.
Under Set Localized Custom Error Path window, type in the location where the custom 401 HTML page resides in the Directory path box. Only type in the path/folder. The file name itself should be in the Relative file path textbox, then click OK.
You should see something similar to this. Click OK again.
At this point, we’re done setting up the custom 401 error page. However, unless if you still use the default for other settings, you may run into this error:
```
        HTTP Error 500.19 – Internal Server Error
        Absolute physical path "c:\temp" is not allowed in system.webServer/httpErrors section in web.config file. Use relative path instead.
        
```
If you read the error message, it points exactly at the problem in the configuration, that is in the system.webServer/httpErrors section.
In IIS Manager, click on the server on the left navigation pane and click on Configuration Editor
In the Configuration Editor, under Section:, click on the drop-down and select system.webServer, then httpErrors.
Click on allowAbsolutePathsWhenDelegated, then click on the Unlock Attribute if it’s locked. If it’s already unlocked (no padlock sign), then you’re good. Then click Apply under Actions.
Now, click on your site on the left pane of navigation, and also click on Configuration Editor.
Repeat the step to get to the system.webServer/httpErrors and set allowAbsolutePathsWhenDelegated to True. Then, click Apply.
At this point, depending on your Authentication setting, you should be able to see the custom 401 error page in your browser (if you failed to authenticate). However, if you use Windows Authentication, you might see a 401.2 error page.
```
        HTTP Error 401.2 - UnauthorizedYou are not authorized to view this page due to invalid authentication headers.
        
```
Rest easy, we just need to redirect this 401.2 error to our custom 401 error page.
Go back to Internet Information Services (IIS) Manager and click on your site on the left
and Error Pages on the right.
This time, we create an additional entry for 401.2 error by clicking on the Add… link under Actions on the right pane. You can duplicate the entry for 401 setup, except this time the Status code should have a value of 401.2. Click OK.
Now you should see the list in your Error Pages windows similar to this.

That’s all there is to it.

As a test, we can try to load the page and when prompted to type in the a credential, you can leave it blank and click the Cancel button.

If you purposely fail the authentication to access your test website, you should see your custom 401 error page is displayed in your browser now.

Yes, it’s almost like an anti-climax to see a plain custom 401 error page being displayed. I hope you can come up with a much better design than my example to make all the effort worthwhile.

If you go to your web folder, you will see a web.config file, and your configuration is saved there:

  <httpErrors allowAbsolutePathsWhenDelegated="true">
    <remove statusCode="401" subStatusCode="-1" />
    <error statusCode="401" prefixLanguageFilePath="c:\temp" path="ITNOTA-Custom-401.htm" responseMode="File" />
    <error statusCode="401" subStatusCode="2" prefixLanguageFilePath="c:\temp" path="ITNOTA-Custom-401.htm" responseMode="File" />
  </httpErrors>
</system.webServer>

This setting for a custom 401 works for both ASP.NET and Classic ASP.

How to Find Out When the Last Time Windows Server Was Rebooted

For various reasons such as patch application or software installation, a server needs to be rebooted. This simple step could potentially make or break the availability of your application. Just to have a quick information when your server was rebooted can help you in troubleshooting an issue.

There are several ways to find this information.

Using Command Prompt

A quick way to do this is by executing a systeminfo command from Command Prompt within your Windows Server.

Launch Command Prompt and type in the following:
```
        systeminfo | find "Boot Time"
        
```
There are some other variants you can see, but as far as obtaining the date and time of the server reboot, the final result is still the same.
```
        systeminfo | find /i "Boot Time"
        
```

Using Task Manager

In Task Manager, click on the Performance tab and look for the Up time. This will involve a bit of calculation to determine the exact date and time, but you can see how long the server has been running since its last reboot.

How to Get HTML Elements with textContent in JavaScript

Further Reading

How to Setup Naked Domain to Resolve in Cloudflare Pages

Steps

Further Reading

How to Customize 401 Error Page with 302 Redirect on IIS

Steps to Use Custom 401 Error Page using 302 Redirect in IIS

Further Reading

How to Use Custom 401 Error Page on IIS

Steps to Use Custom 401 Error Page in IIS

Further Reading

How to Find Out When the Last Time Windows Server Was Rebooted

Using Command Prompt

Using Task Manager

Further Reading

Recent Posts