Merge pull request #64 from PerimeterX/release/v2.3.0

[SDKNEW-1656] Feature/new block page
PerimeterX · Apr 10, 2022 · 72d8eda · 72d8eda
2 parents 93e08df + accf133
commit 72d8eda
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 186 deletions.
diff --git a/LICENSE.txt b/LICENSE.txt
@@ -1,4 +1,4 @@
-Copyright © 2016 PerimeterX, Inc.
+Copyright © 2022 PerimeterX, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/changelog.md b/changelog.md
@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2.3.0] - 2022-04-10
+
+### Added
+
+- Custom logo in block JSON response
+
+### Changed
+
+- Updated block page to use new template
+
 ## [2.2.1] - 2020-09-27
 ### Fixed
  - bypass_monitor_header type validation

diff --git a/lib/perimeter_x.rb b/lib/perimeter_x.rb
@@ -56,19 +56,22 @@ def px_verify_request(request_config={})
           end
 
           is_mobile = px_ctx.context[:cookie_origin] == 'header' ? '1' : '0'
-          action = px_ctx.context[:block_action][0,1]          
+          action = px_ctx.context[:block_action][0,1]
+          block_script_uri = "/captcha.js?a=#{action}&u=#{px_ctx.context[:uuid]}&v=#{px_ctx.context[:vid]}&m=#{is_mobile}"
 
           if px_config[:first_party_enabled]
             px_template_object = {
             js_client_src:  "/#{px_config[:app_id][2..-1]}/init.js",
-            block_script: "/#{px_config[:app_id][2..-1]}/captcha/#{px_config[:app_id]}/captcha.js?a=#{action}&u=#{px_ctx.context[:uuid]}&v=#{px_ctx.context[:vid]}&m=#{is_mobile}",
-            host_url: "/#{px_config[:app_id][2..-1]}/xhr"
+            block_script: "/#{px_config[:app_id][2..-1]}/captcha/#{px_config[:app_id]}#{block_script_uri}",
+            host_url: "/#{px_config[:app_id][2..-1]}/xhr",
+            alt_block_script: "//#{PxModule::ALT_CAPTCHA_HOST}/#{px_config[:app_id]}#{block_script_uri}"
             }
           else
             px_template_object = {
             js_client_src: "//#{PxModule::CLIENT_HOST}/#{px_config[:app_id]}/main.min.js",
-            block_script: "//#{PxModule::CAPTCHA_HOST}/#{px_config[:app_id]}/captcha.js?a=#{action}&u=#{px_ctx.context[:uuid]}&v=#{px_ctx.context[:vid]}&m=#{is_mobile}",
-            host_url: "https://collector-#{px_config[:app_id]}.perimeterx.net"
+            block_script: "//#{PxModule::CAPTCHA_HOST}/#{px_config[:app_id]}#{block_script_uri}",
+            host_url: "https://collector-#{px_config[:app_id]}.perimeterx.net",
+            alt_block_script: "//#{PxModule::ALT_CAPTCHA_HOST}/#{px_config[:app_id]}#{block_script_uri}"
             }
           end
 
@@ -92,6 +95,8 @@ def px_verify_request(request_config={})
                   :vid => px_ctx.context[:vid],
                   :hostUrl => "https://collector-#{px_config[:app_id]}.perimeterx.net",
                   :blockScript => px_template_object[:block_script],
+                  :altBlockScript => px_template_object[:alt_block_script],
+                  :customLogo => px_config[:custom_logo]
               }
 
               render :json => hash_json

diff --git a/lib/perimeterx/utils/px_constants.rb b/lib/perimeterx/utils/px_constants.rb
@@ -36,18 +36,19 @@ module PxModule
   PROP_APP_ID = :appId
   PROP_VID = :vid
   PROP_UUID = :uuid
-  PROP_LOGO_VISIBILITY = :logoVisibility
   PROP_CUSTOM_LOGO = :customLogo
   PROP_CSS_REF = :cssRef
   PROP_JS_REF = :jsRef
   PROP_BLOCK_SCRIPT = :blockScript
+  PROP_ALT_BLOCK_SCRIPT = :altBlockScript
   PROP_JS_CLIENT_SRC = :jsClientSrc
   PROP_HOST_URL = :hostUrl
   PROP_FIRST_PARTY_ENABLED = :firstPartyEnabled
 
   # Hosts
   CLIENT_HOST = 'client.perimeterx.net'
   CAPTCHA_HOST = 'captcha.px-cdn.net'
+  ALT_CAPTCHA_HOST = 'captcha.px-cloud.net'
 
   VISIBLE = 'visible'
   HIDDEN = 'hidden'

diff --git a/lib/perimeterx/utils/px_template_factory.rb b/lib/perimeterx/utils/px_template_factory.rb
@@ -6,7 +6,7 @@ module PxTemplateFactory
     def self.get_template(px_ctx, px_config, px_template_object)
       logger = px_config[:logger]
       if (px_config[:challenge_enabled] && px_ctx.context[:block_action] == 'challenge')
-        logger.debug('PxTemplateFactory[get_template]: px challange triggered')
+        logger.debug('PxTemplateFactory[get_template]: px challenge triggered')
         return px_ctx.context[:block_action_data].html_safe
       end
 
@@ -23,15 +23,14 @@ def self.get_template(px_ctx, px_config, px_template_object)
       Mustache.template_file =  "#{File.dirname(__FILE__) }/templates/#{template_type}#{PxModule::TEMPLATE_EXT}"
 
       view[PxModule::PROP_APP_ID] = px_config[:app_id]
-      view[PxModule::PROP_REF_ID] = px_ctx.context[:uuid]
       view[PxModule::PROP_VID] = px_ctx.context[:vid]
       view[PxModule::PROP_UUID] = px_ctx.context[:uuid]
       view[PxModule::PROP_CUSTOM_LOGO] = px_config[:custom_logo]
       view[PxModule::PROP_CSS_REF] = px_config[:css_ref]
       view[PxModule::PROP_JS_REF] = px_config[:js_ref]
       view[PxModule::PROP_HOST_URL] = px_template_object[:host_url]
-      view[PxModule::PROP_LOGO_VISIBILITY] = px_config[:custom_logo] ? PxModule::VISIBLE : PxModule::HIDDEN
       view[PxModule::PROP_BLOCK_SCRIPT] = px_template_object[:block_script]
+      view[PxModule::PROP_ALT_BLOCK_SCRIPT] = px_template_object[:alt_block_script]
       view[PxModule::PROP_JS_CLIENT_SRC] = px_template_object[:js_client_src]
       view[PxModule::PROP_FIRST_PARTY_ENABLED] = px_ctx.context[:first_party_enabled]
 

diff --git a/lib/perimeterx/utils/templates/block_template.mustache b/lib/perimeterx/utils/templates/block_template.mustache
@@ -3,173 +3,42 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Access to this page has been denied.</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
-    <style>
-        html, body {
-            margin: 0;
-            padding: 0;
-            font-family: 'Open Sans', sans-serif;
-            color: #000;
-        }
-
-        a {
-            color: #c5c5c5;
-            text-decoration: none;
-        }
-
-        .container {
-            align-items: center;
-            display: flex;
-            flex: 1;
-            justify-content: space-between;
-            flex-direction: column;
-            height: 100%;
-        }
-
-        .container > div {
-            width: 100%;
-            display: flex;
-            justify-content: center;
-        }
-
-        .container > div > div {
-            display: flex;
-            width: 80%;
-        }
-
-        .customer-logo-wrapper {
-            padding-top: 2rem;
-            flex-grow: 0;
-            background-color: #fff;
-            visibility: {{logoVisibility}};
-        }
-
-        .customer-logo {
-            border-bottom: 1px solid #000;
-        }
-
-        .customer-logo > img {
-            padding-bottom: 1rem;
-            max-height: 50px;
-            max-width: 100%;
-        }
-
-        .page-title-wrapper {
-            flex-grow: 2;
-        }
-
-        .page-title {
-            flex-direction: column-reverse;
-        }
-
-        .content-wrapper {
-            flex-grow: 5;
-        }
-
-        .content {
-            flex-direction: column;
-        }
-
-        .page-footer-wrapper {
-            align-items: center;
-            flex-grow: 0.2;
-            background-color: #000;
-            color: #c5c5c5;
-            font-size: 70%;
-        }
-
-        @media (min-width: 768px) {
-            html, body {
-                height: 100%;
-            }
-        }
-    </style>
-    <!-- Custom CSS -->
+    <meta name="description" content="px-captcha">
+    <title>Access to this page has been denied</title>
     {{#cssRef}}
         <link rel="stylesheet" type="text/css" href="{{{cssRef}}}"/>
     {{/cssRef}}
 </head>
-
 <body>
-<section class="container">
-    <div class="customer-logo-wrapper">
-        <div class="customer-logo">
-            <img src="{{customLogo}}" alt="Logo"/>
-        </div>
-    </div>
-    <div class="page-title-wrapper">
-        <div class="page-title">
-            <h1>Please verify you are a human</h1>
-        </div>
-    </div>
-    <div class="content-wrapper">
-        <div class="content">
-
-            <div id="px-captcha">
-            </div>
-            <p>
-                Access to this page has been denied because we believe you are using automation tools to browse the
-                website.
-            </p>
-            <p>
-                This may happen as a result of the following:
-            </p>
-            <ul>
-                <li>
-                    Javascript is disabled or blocked by an extension (ad blockers for example)
-                </li>
-                <li>
-                    Your browser does not support cookies
-                </li>
-            </ul>
-            <p>
-                Please make sure that Javascript and cookies are enabled on your browser and that you are not blocking
-                them from loading.
-            </p>
-            <p>
-                Reference ID: #{{refId}}
-            </p>
-        </div>
-    </div>
-    <div class="page-footer-wrapper">
-        <div class="page-footer">
-            <p>
-                Powered by
-                <a href="https://www.perimeterx.com/whywasiblocked">PerimeterX</a>
-                , Inc.
-            </p>
-        </div>
-    </div>
-</section>
-<!-- Px -->
-<script>
-    window._pxAppId = '{{appId}}';
-    window._pxJsClientSrc = '{{{jsClientSrc}}}';
-    window._pxFirstPartyEnabled = {{firstPartyEnabled}};
-    window._pxVid = '{{vid}}';
-    window._pxUuid = '{{uuid}}';
-    window._pxHostUrl = '{{{hostUrl}}}';
-</script>
-<script>
-    var s = document.createElement('script');
-    s.src = '{{{blockScript}}}';
-    var p = document.getElementsByTagName('head')[0];
-    p.insertBefore(s, null);
-    if ({{firstPartyEnabled}}) {
-        s.onerror = function () {
-            s = document.createElement('script');
-            var suffixIndex = '{{{blockScript}}}'.indexOf('captcha.js');
-            var temperedBlockScript = '{{{blockScript}}}'.substring(suffixIndex);
-            s.src = '//captcha.px-cdn.net/{{appId}}/' + temperedBlockScript;
-            p.parentNode.insertBefore(s, p);
+    <script>
+        window._pxVid = '{{vid}}';
+        window._pxUuid = '{{uuid}}';
+        window._pxAppId = '{{appId}}';
+        window._pxCustomLogo = '{{customLogo}}';
+        window._pxHostUrl = '{{hostUrl}}';
+        window._pxJsClientSrc = '{{jsClientSrc}}';
+        window._pxFirstPartyEnabled = {{firstPartyEnabled}};
+        var script = document.createElement('script');
+        script.src = '{{blockScript}}';
+        document.head.appendChild(script);
+        script.onerror = function () {
+            script = document.createElement('script');
+            script.src = '{{altBlockScript}}';
+            script.onerror = window._pxDisplayErrorMessage;
+            document.head.appendChild(script);
         };
-    }
-</script>
-
-<!-- Custom Script -->
-{{#jsRef}}
-    <script src="{{{jsRef}}}"></script>
-{{/jsRef}}
+        window._pxDisplayErrorMessage = function () {
+            var style = document.createElement('style');
+            style.innerText = '@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);body{background-color:#fafbfc}@media (max-width:480px){body{background-color:#fff}}.px-captcha-error-container{position:fixed;height:328px;background-color:#fff;font-family:Roboto,sans-serif}.px-captcha-error-header{color:#f0f1f2;font-size:29px;margin:67px 0 33px;font-weight:500;line-height:.83;text-align:center}.px-captcha-error-message{color:#f0f1f2;font-size:18px;margin:0 0 29px;line-height:1.33;text-align:center}div.px-captcha-error-button{text-align:center;line-height:50px;width:253px;margin:auto;border-radius:25px;border:solid 1px #f0f1f2;font-size:20px;color:#f0f1f2}div.px-captcha-error-wrapper{margin:23px 0 0}div.px-captcha-error{margin:auto;text-align:center;width:400px;height:30px;font-size:12px;background-color:#fcf0f2;color:#ce0e2d}img.px-captcha-error{margin:6px 10px -2px 0}@media (min-width:620px){.px-captcha-error-container{width:528px;top:50%;left:50%;margin-top:-164px;margin-left:-264px;border-radius:3px;box-shadow:0 2px 9px -1px rgba(0,0,0,.13)}}@media (min-width:481px) and (max-width:620px){.px-captcha-error-container{width:85%;top:50%;left:50%;margin-top:-164px;margin-left:-42.5%;border-radius:3px;box-shadow:0 2px 9px -1px rgba(0,0,0,.13)}}@media (max-width:480px){.px-captcha-error-container{width:528px;top:50%;left:50%;margin-top:-164px;margin-left:-264px}}';
+            document.head.appendChild(style);
+            var div = document.createElement('div');
+            div.className = 'px-captcha-error-container';
+            div.innerHTML = '<div class="px-captcha-error-header">Before we continue...</div><div class="px-captcha-error-message">Press & Hold to confirm you are<br>a human (and not a bot).</div><div class="px-captcha-error-button">Press & Hold</div><div class="px-captcha-error-wrapper"><div class="px-captcha-error"><img class="px-captcha-error" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAQCAMAAADDGrRQAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTNYELOEGONQILd0AONwALtwEL+AAL9MFLfkJSNQGLdMJLdQJLdQGLdQKLtYFLNcELdUGLdcBL9gFL88OLdUFLNEOLglBhT4AAAAXdFJOUwC8CqgNIRgRoAS1dWWuR4RTjzgryZpYblfkcAAAAI9JREFUGNNdj+sWhCAIhAdvqGVa1r7/oy6RZ7eaH3D4ZACBIed9wlOOMtUnSrEmZ6cHa9YAIfsbCkWrdpi/c50Bk2CO9mNLdMAu03wJA3HpEnfpxbyOg6ruyx8JJi6KNstnslp1dbPd9GnqmuYq7mmcv1zjnbQw8cV0xzkqo+fX1zkjUOO7wnrInUTxJiruC3vtBNRoQQn2AAAAAElFTkSuQmCC">Please check your network connection or disable your ad-blocker.</div></div>';
+            document.body.appendChild(div);
+        };
+    </script>
+    {{#jsRef}}
+        <script src="{{{jsRef}}}"></script>
+    {{/jsRef}}
 </body>
-</html>
+</html>
diff --git a/lib/perimeterx/version.rb b/lib/perimeterx/version.rb
@@ -1,3 +1,3 @@
 module PxModule
-  VERSION = '2.2.1'
+  VERSION = '2.3.0'
 end
diff --git a/px_metadata.json b/px_metadata.json
@@ -1,26 +1,28 @@
 {
-    "version": "2.2.1",
+    "version": "2.3.0",
     "supported_features": [
         "additional_activity_handler",
         "advanced_blocking_response",
-        "batching_activities",
+        "batched_activities",
         "block_activity",
         "block_page_captcha",
+        "block_page_rate_limit",
+        "bypass_monitor_header",
+        "client_ip_extraction",
         "cookie_v3",
         "css_ref",
         "custom_logo",
-        "debug_mode",
+        "logger",
+        "filter_by_route",
         "first_party",
-        "ip_headers",
         "js_ref",
-        "mobile",
-        "module_enable_disable",
-        "monitor_mode",
-        "page_requested",
-        "pxvid",
+        "mobile_support",
+        "module_enable",
+        "module_mode",
+        "page_requested_activity",
+        "vid_extraction",
         "risk_api",
         "sensitive_headers",
-        "sensitive_routes",
-        "whitelist_routes"
+        "sensitive_routes"
     ]
 }
diff --git a/readme.md b/readme.md
@@ -5,7 +5,7 @@
 [PerimeterX](http://www.perimeterx.com) Ruby SDK
 =============================================================
 
-> Latest stable version: [v2.2.1](https://rubygems.org/gems/perimeter_x)
+> Latest stable version: [v2.3.0](https://rubygems.org/gems/perimeter_x)
 
 Table of Contents
 -----------------