Add WAF Cloudflare custom error pages (#86)

* prepare custom pages for Cloudflare * add Ray ID * use errors folder * remove <--Main--> comment * remove other comment Main.. * insert full js inline with a variable to avoid errors * add vendors css * add meta viewport and favicons * add meta viewport and favicons in cf-block
epfl-si · Nov 19, 2019 · 41b4fbd · 41b4fbd
1 parent bb304c1
commit 41b4fbd
Show file tree

Hide file tree

Showing 6 changed files with 194 additions and 4 deletions.
diff --git a/grunt/compile-handlebars.js b/grunt/compile-handlebars.js
@@ -5,6 +5,9 @@
 
 'use strict';
 
+const fs = require('fs');
+const path = require('path');
+
 module.exports = {
   includes: {
     files: [{
@@ -20,6 +23,29 @@ module.exports = {
       YEAR: (new Date()).getFullYear().toString()
     }]
   },
+  errors: {
+    files: [{
+      cwd: 'src/errors',
+      expand: true,
+      src: '*.html',
+      dest: 'release/errors',
+      ext: '.html'
+    }],
+    partials: [
+      'src/includes/partials/*.html',
+      'src/includes/full/*.html',
+      'tmp/css/*.css'
+    ],
+    globals: [{
+      VERSION: '<%= pkg.version %>',
+      YEAR: (new Date()).getFullYear().toString(),
+      FULL_JS: function () {
+        return fs.readFileSync(
+          path.join(__dirname, '/../dist/js/elements.min.js'), 'utf-8'
+        );
+      }
+    }]
+  },
   download: {
     files: [{
       cwd: 'src',

diff --git a/grunt/cssmin.js b/grunt/cssmin.js
@@ -6,6 +6,15 @@
 'use strict';
 
 module.exports = {
+  tmpCloudflare: {
+    files: {
+      'tmp/css/css-elements-for-cloudflare-custom-pages.min.css': [
+        'tmp/css/base.css',
+        'tmp/css/vendors.min.css',
+        'src/css/utilities.css'
+      ]
+    }
+  },
   dist: {
     files: {
       'dist/css/elements.min.css': [

diff --git a/src/errors/cf-waf-block.html b/src/errors/cf-waf-block.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <title>Blocked - EPFL</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  {{> favicons}}
+  <style>
+    {{> css-elements-for-cloudflare-custom-pages.min }}
+  </style>
+</head>
+
+<body>
+
+  <div class="site d-flex flex-column min-vh-100">
+
+    {{> access-nav-en }}
+
+    <header class="header">
+      {{> logo }}
+    </header>
+
+    <div class="breadcrumb-container">
+      <nav aria-label="breadcrumb" class="breadcrumb-wrapper" id="breadcrumb-wrapper">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item">
+            <a href="//www.epfl.ch" title="Home" aria-label="Home">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-home"></use>
+              </svg>
+            </a>
+          </li>
+          <li class="breadcrumb-item active" aria-current="page">Blocked</li>
+        </ol>
+      </nav>
+    </div>
+
+    <div class="main-container">
+      <div class="w-100 pb-5">
+        <main id="main" class="content container">
+          <h2 class="mb-3">Sorry, you have been blocked</h2>
+          <div class="mb-5">
+            <p>You are unable to access epfl.ch.</p>
+          </div>
+          <h5 class="mb-2">Why have I been blocked?</h5>
+          <div class="mb-5">
+            <p>This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.</p>
+          </div>
+          <h5 class="mb-2">What can I do to resolve this?</h5>
+          <div class="mb-4">
+            <p>You can contact <a href="mailto:[email protected]">[email protected]</a> and send the following Ray ID: ::RAY_ID::.</p>
+          </div>
+        </main>
+      </div>
+    </div>
+
+    <div class="bg-gray-100 pt-5 mt-auto">
+      <div class="container">
+        {{> footer-light-en }}
+      </div>
+    </div>
+
+  </div>
+
+  <script>
+    svgPath = 'https://web2018.epfl.ch/{{VERSION}}/icons/icons.svg';
+  </script>
+
+  <script>
+    {{{ FULL_JS }}}
+  </script>
+
+</body>
+
+</html>
diff --git a/src/errors/cf-waf-challenge.html b/src/errors/cf-waf-challenge.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <title>Challenge CAPTCHA required - EPFL</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  {{> favicons}}
+  <style>
+    {{> css-elements-for-cloudflare-custom-pages.min }}
+  </style>
+</head>
+
+<body>
+
+  <div class="site d-flex flex-column min-vh-100">
+
+    {{> access-nav-en }}
+
+    <header class="header">
+      {{> logo }}
+    </header>
+
+    <div class="breadcrumb-container">
+      <nav aria-label="breadcrumb" class="breadcrumb-wrapper" id="breadcrumb-wrapper">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item">
+            <a href="//www.epfl.ch" title="Home" aria-label="Home">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-home"></use>
+              </svg>
+            </a>
+          </li>
+          <li class="breadcrumb-item active" aria-current="page">Challenge CAPTCHA required</li>
+        </ol>
+      </nav>
+    </div>
+
+    <div class="main-container">
+      <div class="w-100 pb-5">
+        <main id="main" class="content container">
+          <h2 class="mb-3">One more step</h2>
+          <div class="mb-5">
+            <p>Please complete the security check to access epfl.ch or contact <a href="mailto:[email protected]">[email protected]</a> by transmitting the following Ray ID: ::RAY_ID::.</p>
+            ::CAPTCHA_BOX::
+          </div>
+          <h5 class="mb-2">Why do I have to complete a CAPTCHA?</h5>
+          <div class="mb-5">
+            <p>Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.</p>
+          </div>
+          <h5 class="mb-2">What can I do to prevent this in the future?</h5>
+          <div class="mb-4">
+            <p>If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.</p>
+            <p>If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.</p>
+          </div>
+        </main>
+      </div>
+    </div>
+
+    <div class="bg-gray-100 pt-5 mt-auto">
+      <div class="container">
+        {{> footer-light-en }}
+      </div>
+    </div>
+
+  </div>
+
+  <script>
+    svgPath = 'https://web2018.epfl.ch/{{VERSION}}/icons/icons.svg';
+  </script>
+
+  <script>
+    {{{ FULL_JS }}}
+  </script>
+
+</body>
+
+</html>
diff --git a/src/includes/full/head.html b/src/includes/full/head.html
@@ -1,10 +1,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="theme-color" content="#ff0000">
 
-<link rel="shortcut icon" type="image/x-icon" href="//web2018.epfl.ch/{{VERSION}}/icons/favicon.ico">
-<link rel="icon" type="image/png" sizes="16x16" href="//web2018.epfl.ch/{{VERSION}}/icons/favicon-16.png">
-<link rel="icon" type="image/png" sizes="32x32" href="//web2018.epfl.ch/{{VERSION}}/icons/favicon-32.png">
-<link rel="apple-touch-icon" sizes="180x180" href="//web2018.epfl.ch/{{VERSION}}/icons/apple-touch-icon.png">
+{{> favicons }}
 
 <link rel="stylesheet" href="//web2018.epfl.ch/{{VERSION}}/css/elements.min.css">
 

diff --git a/src/includes/partials/favicons.html b/src/includes/partials/favicons.html
@@ -0,0 +1,4 @@
+<link rel="shortcut icon" type="image/x-icon" href="//web2018.epfl.ch/{{VERSION}}/icons/favicon.ico">
+<link rel="icon" type="image/png" sizes="16x16" href="//web2018.epfl.ch/{{VERSION}}/icons/favicon-16.png">
+<link rel="icon" type="image/png" sizes="32x32" href="//web2018.epfl.ch/{{VERSION}}/icons/favicon-32.png">
+<link rel="apple-touch-icon" sizes="180x180" href="//web2018.epfl.ch/{{VERSION}}/icons/apple-touch-icon.png">