Google reCAPTCHA Privacy and Terms of Service links not Working in Internet Explorer 11 (Explained)

I’m sharing this story as it is something you might encounter when using Internet Explorer 11 with Google’s CAPTCHA service (code). 

This came up in UAT testing recently for a web product I work on so I thought I would share.  It might save you some time explaining to your customers about cross browser compatibility testing.

First off, Google has a free service for trying to detect bots on your site called “CAPTCHA”. CAPTCHA is an acronym for “Completely Automated Public Turing Test to tell Computer and Humans Apart”.

Google’s free CAPTCHA service called reCAPTCHA requires developers to register your website to get an API key which you will use along with some code to call the API from your site.  Pretty cool stuff, right?

I’m really simplifying this but to render the reCAPTCHA you would insert their code snippet. Make sure the code is loading from a a page using the HTTPS protocol or else it might not work.

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

Once the reCAPTCHA is loading on the page, it will be loading its contents in an IFRAMEThis is really important to our story!

There are links in the Google CAPTCHA that point to a privacy page and terms of service page on the Google.com domain which both have a “target =_blank” attribute on the link. This means these links should open in new windows or tab depending on other pressed keys.

The links are working just fine in Chrome and Firefox and opening in new windows but not IE 11.

What is the issue here?

It could have been earlier than IE 11 but, Microsoft implemented a security feature to restrict links loading in IFRAMES from linking out to a domain other than the one it originally loaded from.

The CAPTCHA code is loading from your WhatEverDomain.com but all the links in the IFRAME are pointing to the Google.com domain are now all disabled.

References:

https://github.com/google/recaptcha/issues/191

https://answers.microsoft.com/en-us/ie/forum/ie11-iewindows_10/links-that-open-in-new-browser-tabs-dont-work-on/55e7b147-bb66-4b4a-b88d-3533166a059a

Here is a video on how to install Google reCAPTCHA for your website. Good luck and happy coding!

Video: Google reCapthca 2.0

Securing Your WordPress Blog from xmlrpc.php Attacks

Today marks my first week of owning a WordPress blog.

I figured a week should be ample enough time to have the web server run and let the bad guys and bots take a swing at it. A review of my Apache web server log should show me what type of WordPress hacks would be attempted first.

My site is really new so I don’ t expect a lot of traffic. I downloaded my Apache web server log and noticed that apparently I had a lot of traffic for a brand new site that had not yet been promoted.

Once I downloaded and looked through the web server log file, a pattern quickly appeared. Lots of requests for a specific file called xmlrpc.php.

What the hell is xmlrpc.php?

I had found this in depth article about the xmlrpc file. For a more in-depth dive please check it out.

https://www.hostinger.com/tutorials/xmlrpc-wordpress

The super short version is, that XML-RPC is a WordPress feature enabling transmission of XML messages between systems using HTTP as the transport mechanism.

WordPress being an open system, occasionally needs to communicate with other systems, xmlrpc.php is supposed to handle that job.

My understanding is that xmlrpc.php is being deprecated in future versions of WordPress so why leave an artifact that can be used to enable a brute force attack on your site. Get rid of it ASAP!

Block Access to the xmlrpc.php file using Apache’s .htaccess file

.htaccess files are used by Apache web servers to allow or deny access to resources on your web site. We can allow or deny based on things like IP addresses or file names.

Your WordPress installation on Apache has a .htaccess file included by default.

You won’t see it using the >ls command as files beginning with a dot are hidden files. You can’t see it in the directory but we can open it.

In the screenshot below, I’ve opened the default WordPress .htaccess file using the nano text editor after connecting via SSH using PuTTY.

Setting an Access Restriction to the xmlrpc.php file using .htaccess file

Blocking access to the xmlrpc.php file to all users can be done using an entry in the .htaccess file that the Apache web server uses to grant or deny access to web resources.

When a request comes in to the Apache web server for the xmlrpc.php file, the server will apply this access rule which states that only local request will be granted and all others will be denied.

Navigate to your WordPress root folder. Mine was in: /var/www/html

I opened the .htaccess file by entering the command >sudo nano .htaccess

In the screenshot below, you see the special entry for <Files xmlrpc.php>.

.htaccess code for Denying Access to xmlprc.php

#Block WordPress xmlrpc.php requests
<Files xmlrpc.php>
Order deny,allow
deny from all
</Files>

One More Thing: Check Your Apache Config AllowOverride Setting

Of course I did not realize for 24 hours that my .htaccess settings were not actually working. There was one more thing we had to configure on the Apache web server.

Double check your Apache2.conf file to see if the AllowOverride setting is set to All for you WordPress public html directory. Mine was in the /var/www directory.

My AllowOverride setting was set to None by default as you can see the /srv/ is still set to None. Your installation maybe different.

3 Ways to Reverse a String using JavaScript

3 JavaScript Code Examples for Reversing a String

function reverseString1(str) {    
  //This way uses an array to reverse the string
  var strArr = str.split("");
  var reverseStringArray = strArr.reverse();
  var reversedString = reverseStringArray.join("");
  return reversedString;
}

reverseString1("hello")

//*******************************************
function reverseString2(str) {
  //Single Line does it all
  return str.split("").reverse().join();
}

reverseString2("hello")


//*******************************************
function reverseString3(str) {    
  var final = "";
  for (var i = str.length - 1; i >= 0; i--) {
   final += str[i]
  }
  return final;
}

reverseString3("hello")

Razor Views in C# MVC – C# Code and HTML Coexisting Together

Razor Views in C# MVC

How C# Code and HTML Coexist Together

Tonight’s study topic is Razor Views in C# MVC 5.

Here are two good resources for this topic.

Paid access to Mosh Hamedani’s Complete ASP.net MVC 5 Course. This is covered in video 16 of his course.

Also helpful, was this YouTube video that is part of a larger MVC tutorial that I really like and refer to often

VIDEO: Razor View Syntax

What are Razor Views and What Do They Do?

Specific to C# MVC, Razor Views are code snippets with special syntax made up of C# code and HTML/CSS. The C# logic can interact with and output HTML and CSS elements/attributes dynamically.

With Razor Views, we use the @ symbol to switch between C# code and HTML. 

A simple example of printing numbers from 1 to 10 using Razor.

@for {int i = 1; i <=10; i++)
{
 <b>@i</b>
}

The Output would be: 1 2 3 4 5 6 7 8 9 10
Inside the brackets, Razor sees the <b>@i</b> and knows to render the C# variable i when its proceeded with an @ character then Razor sees the angle brackets and switches back in to HTML parsing mode.

If we didn’t want to use HTML we could change the <b> tag to <text> and output would just be text without the HTML.

The most important thing to understand and remember about Razor Views is the context switching in the parser is based on detection of specific characters.

@ character starts the C# parser but HTML & text won’t parse until Razor see a tag wrapped in angle brackets. We are just switching back and forth between to parsing modes. Make sense?

The loop is C# code but the output is HTML.
In ASP Classic and .Net, the Response Object would handle the HTML output to the browser from inside the loop.

Here are two more examples to help us cement the idea in our brains.

1. A simple date:
@{
   int day = 24;
   int month = 08;
   int year = 2020;
}
Date is @day-@month-@year
Output = Date is 24-08-2020


2. Loop thru images in folder
@for (int i = 1; i <= 5; i++)
{
  <img src="~/Images/@(i).png" />
}

Notice how in the sample above, we put the variable inside the parenthesis. Why, when we didn’t do this for the date example above?

Because if we don’t C# will try and read i. and an object with a property so we have to wrap it in parenthesis. This tell the Razor syntax that we are just trying to concatenate the values.

Razor View Code Blocks

In Razor Views we define code blocks using @{}.

@{
 int SumOfEvenNumbers = 0;
 int SumOfOddNumbers = 0;

 for(int i=1; i<=10; i++)
 {
  if(i %2==0)
  {
    SumOfEvenNumbers = SumOfEvenNumber + 1;
  }
  else
  {
    SumOfOddNumbers = SumOfOddNumbers + 1;
  }
 }
}

<h3>Sum of Even Numbers = @SumOfEvenNumbers</h3>
<h3>Sum of Odd Numbers = @SumOfOddNumbers</h3>

Razor View Comments

Razor View multi-line code comments are very similar to JavaScript and CSS that use the asterisk and forward slash, /*  */, to wrap comments.

Razor View multi-line comments use ampersand and asterisk in same way. @* to start a multi-line comment and *@ to end it. (See code example below)

What’s in the Razor View Example Below?

H2 tag class name is dynamically selected based on  logic, if Model.Customers.Count is greater than 5 then change the CSS class of the H2 element to “popular”.

Also, inside the <ul> tags, Razor View code loops through the list of customers and outputs the name.  

Sample C# Razor Code Example:

@model  Vidly.ViewModels.RandomMovieViewModel
@{
    ViewBag.Title = "Random";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
@*
    This is a comment
    on multiple lines
*@
 
@{
    var className = Model.Customers.Count > 5? "popular": null;
}
 
<h2 class="@className">@Model.Movie.Name</h2>
 
@if (Model.Customers.Count == 0)
{
    <text>No one has rented the movie before.</text>
}
 
else 
{
    <ul>
        @foreach (var cusomter in Model.Customers)
        {
            <li>@cusomter.Name</li>
        }
     </ul>
}

Copying Files to Windows from Linux Using Putty’s PSCP Command Line Tool

I’m wanting to look at my cloud hosted Linux Apache web server log files on my local Windows PC and I’m using PuTTY SSH as my Windows SSH telnet client.

How do we transfer the Apache web server log files over to my local Windows PC so I can work with it?

Instead of trying to copy the file from inside the PuTTY SSH session on the remote server, we can use a built-In Windows command line tool (pscp.exe) included with PuTTY called “PSCP” which mimic much of what you get with Linux’s built-in scp file transfer utility.

Putty’s Command Line File Transfer Tool (PSCP)

Below is a screenshot of me figuring out how to properly transfer an Apache web server log file over to my Windows PC temp folder on the C drive.

Sample Command Line Code

Run from the Windows Command Line from your Putty Install folder.

I used // to escape the forward slashes on the Linux server and \\ to escape backslahes and it worked.

Below should be entered all on one line.
c:\Program Files\PuTTY>pscp user@remoteserver://var//log//apache2//access.log c:\\temp\\access.log