3 Replies Latest reply on Oct 16, 2014 2:10 AM by maitane

    Site review + Captcha

    maitane

      Hello,

       

      Has anyone tried to include in the template of the site-review a captcha?
      Could someone share or give any clues?

       

      Thanks in advance,

        • 1. Re: Site review + Captcha
          asabban

          Yes!

           

          It is not trivial but I set up authentication with Login Page to require a captcha.

           

          1.)

           

          First of all I grabbed a bunch of images. I got them from here:

           

          CAPTCHA IMAGE SETS

           

          I picked

           

          http://bumblebeeware.com/downloads/captchaimages3.tar.gz

           

          NOTE: I am not sure if it is allowed to use them. I just picked them for a quick test, it may be required to get different captcha images or create your own.

           

          Every captcha in my test had 4 characters, 0-9 A-Z. It is important that the image is called <solution>.gif, e.g. if the image contains a captcha showing "1ABC" the file name must be "1ABC.gif". I placed those files to a web server MWG could talk to.

           

          2.)

           

          The next step is to get some kind of "randomizer" since MWG should display a different captcha for every access. To do so I placed all the file names without extension (e.g. 1ABC) into a list of strings. You should have a list like this:

           

          2014-10-14 10_52_10-Edit List (String).png

           

          NOTE: All entries in the list must be working captchas. E.g. if I take any string of the list and I add ".gif" this image must exist on the webserver/directory you created in the first step.

           

          Now we add some rules to MWG. This needs to be done where you display the block template (welcome page). Please note in my example I use a Login Page, you need to adopt this. In front of the blocking rule we add a new rule that creates a captcha key for us like this:

           

          2014-10-14 10_55_46-McAfee _ Web Gateway - MWG7-Test-2 - 10.140.184.145.png

          It is a little ugly but it does the following:

           

          - The length of the above created list is set into a user-defined property (for example 499 when there are 500 entries (first entry in the list has index 0))

          - When a block template is displayed (next rule) MWG sends an additional header to the browser called "X-Captcha-Key"

          - This captcha key contains a random entry from the list (Math.Random picks a randon entry from the list between first and last entry)

          - To avoid people reading the expected captcha from the response header we use "SecureToken.CreateToken" to encrypt the list entry with a random password noone knows. So the capture key arrives on the client PC unreadable in the header

          - Because the SecureToken might contain strange characters we base64 encode it, just to be safe

           

          3.)

           

          So now we have MWG sent the client an encrypted value which contains the filename (without suffix) of any of the captcha files. Next we need to have the captcha show up on the block template. To do so we have to modify the block template:

           

          I added some code to the Login Page:

           

          <div id="showcaptcha" style="background-image: url(http://captcha.mwginternal.com/captcha/captcha.gif?cid=$<propertyInstance useMostRecentConfiguration="false" propertyId="com.scur.engine.headerfilter.block.headers.getheader">

            <parameters>

              <entry>

                <string>com.scur.engine.headerfilter.block.headers.getheader.headername</string >

                <parameter valueTyp="3">

                  <value>

                    <stringValue value="X-Captcha-Key" stringModifier="true" typeId="com.scur.type.string"/>

                  </value>

                </parameter>

              </entry>

            </parameters>

          </propertyInstance>$); width: 120px; height: 25px; border: 1px darkred solid;"></div>

           

          <input type="hidden" id="captcha" name="captcha" value="$<propertyInstance useMostRecentConfiguration="false" propertyId="com.scur.engine.headerfilter.block.headers.getheader">

            <parameters>

              <entry>

                <string>com.scur.engine.headerfilter.block.headers.getheader.headername</string >

                <parameter valueTyp="3">

                  <value>

                    <stringValue value="X-Captcha-Key" stringModifier="true" typeId="com.scur.type.string"/>

                  </value>

                </parameter>

              </entry>

            </parameters>

          </propertyInstance>$">

           

          So I added a "div" which shows the captcha. It loads the captcha from "http://captcha.mwginternal.com/captcha/captcha.gif?cid=<captcha key we made in previous step>". Please note that this URL does not really exists, it will trigger a rule in MWG we will create later. What I do here is I load a gif called "captcha.gif" (thus it contains no hint to the required captcha) and I add the "captcha key" as a URL parameter. The "captcha key" is the encrypted string we created in the previous step. The second entry I made is a hidden input field which is required to send the "captcha key" back to MWG when a user has typed a solution and submits/accepts the form.

           

          Furthermore I added a form field which takes the solution:

           

          <input name="solution" id="solution" onkeypress="KeyHandler(event)">

           

          This results in a page like this:

           

          2014-10-14 11_12_33-McAfee Web Gateway - Notification.png

           

          The final step is to modify the Block template so that captcha key and solution are sent back to MWG when you click the "Login" (or whatever other) button. It may be required that you heavily extend the welcome page/coaching templates in order to send this information. For the Login Page I have extended the Javascript that submits username + password to MWG to also send "captcha key" (from the hidden form field) and the solution to MWG.

           

          You can probably just extend the form a little and send "captcha key" and captcha solution as URL parameters to MWG. I think you need to experiment a little here or provide your block template in case I need to provide more detailed assistance.

           

          4.)

           

          Catch requests to "/captcha.gif".

           

          In the previous step we have loaded an image from "http://captcha.mwginternal.com/captcha/captcha.gif?cid=<captcha key we made in previous step>". At the very beginning of the policy we add a rule which catches such requests. It will read the captcha secret, decrypts it and will return the correct captcha as a response to this request:

           

          2014-10-14 11_22_02-McAfee _ Web Gateway - MWG7-Test-2 - 10.140.184.145.png

           

          What happens now is that MWG rewrites the destination URL. So the client requests "http://captcha.mwginternal.com/captcha/captcha.gif?cid=<captcha key we made in previous step>". MWG will connect to www.mywebserver.local (the server where you put the captcha images) and MWG will rewrite the path to point to the gif image which has the name of the captcha we have encrypted in the URL parameter.

           

          After this has done MWG shoud display the right image on the block template. Now we have the "captcha key" which contains an encrypted version of the captcha and have shown the right image to the user without exposing the file name of the image.

           

          5.)

           

          Now the user will type in what he sees on the captcha and needs to submit the form displayed on the block template. As mentioned before you need to build the block template that clicking the button causes the browser to send a request which contains the encrypted "captcha key" + the clear text solution entered by the user.

           

          In my example for the login page the "captcha key" and solution comes as custom HTTP parameters created by the Javascript in the login page. You might use URL parameters when using a simple form, but the concept is the same:

           

          2014-10-14 11_25_33-McAfee _ Web Gateway - MWG7-Test-2 - 10.140.184.145.png

           

          Since the client sends the encrypted "captcha key" and the solution he typed in you simply decrypt the original value from the "captcha key" and check if both strings match. If they match the user has typed in the correct catcha... otherwise he entered a wrong value, so we block again.

           

          I hope it makes some sense and I know it might be pretty high level, but hopefully it gives you some ideas. If you have any questions, just let me know.

           

          Best,

          Andre

          • 2. Re: Site review + Captcha
            M Bagheryan M

            Amazing job dude

            • 3. Re: Site review + Captcha
              maitane

              Great article Asabban.

               

              Thank you very much.