Expand readme, add templates, do a bit of a clean up (#16)

* Referrer trimming - start * Show referrers in the redirect page for a second there. * Referrer trimming v2 * Cache js referer on page load. * Add warning about redirects + make it work on glitch. * Fix /come-back page for safari. * Add iframe tests, group duplicated code into functions. * 2s -> 1s waiting time for navigations - referrer-trimming * Fix cross-origin communication issue * Missing semicolon * Make test frames 10x10px. * Fix how we store/clear localStorage partial results. * Drop unnecessary console.log * Fix for when header is not set * Cosmetic change undefined->'' * HTTPS upgrades - first batch * Hook up test urls. * Fix postMessage and frame. Add websocket. * fix opener/parent issue + websocket cleanup * we don't get info about navigation load - we have to pull * Extract test domain to a constant. * Add additional info to https-upgrades. * Hardcode paths to glitch deployment. * Add note in fingerprinting tests about https being a requirement. * fix a typo in url of test domain * Don't include the TEMPLATE folder right now. * Color values. * focus doesn't really work in this scenario * Add templates, improve copy, expand readme
duckduckgo · Dec 18, 2020 · d209e51 · d209e51
1 parent 2d22984
commit d209e51
Show file tree

Hide file tree

Showing 20 changed files with 229 additions and 50 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-node_modules
+node_modules
+.DS_Store
diff --git a/README.md b/README.md
@@ -1,4 +1,27 @@
-# privacy-test-pages
-A collection of pages with known content (trackers, web functionality) for testing with the mobile apps and extensions.
+# Privacy Test Pages
+This project contains a collection of pages that are meant to be used for testing various privacy and security features of browsers and browser extensions.
+## How to use it?
+The site with all tests is live [here](https://privacy-test-pages.glitch.me/). All tests run either on page load or provide instructions on how to run them.
 
-[Privacy Test Pages](https://duckduckgo.github.io/privacy-test-pages)
+### Privacy Protections Tests
+
+Those tests by default require clicking a button to start, but can be run immadiatelly on page load when loaded with a `?run` query or by calling a global `runTests()` function. Results from those pages are available in the global `results` object that can be downloaded as JSON using "download results" button.
+
+## Contributing
+
+Please note that we are not taking external contributions for new test pages, but we welcome all bug reports.
+### How to create a new test?
+
+- Templates for both simple and complex tests (Privacy Protections Tests) can be found in the [TEMPLATES](./TEMPLATES) directory.
+- Please remember to link new test page from [index.html](./index.html).
+- Once you have a PR with a new page please assign it to one of the AoR DRIs (@brindy, @kdzwinel).
+
+### How to test it locally
+
+If you are working on a simple page you can start any local server (e.g. `python -m SimpleHTTPServer 8000`) in the main folder of the project.
+
+If you are working on a complex page you may need to run our custom server (`node server.js`) which will require you to install all dependencies first (`npm i`).
+
+## How to deploy it?
+
+After PR is merged test pages are automatically deployed to glitch ([code](https://glitch.com/edit/#!/privacy-test-pages)) and github pages (legacy).
diff --git a/TEMPLATES/complex/index.html b/TEMPLATES/complex/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>X Test Page</title>
+
+    <script src='./main.js' defer></script>
+    <link href='./style.css' rel='stylesheet'></link>
+</head>
+<body>
+    <p><a href="../../">[Home]</a> ↣ <a href="../">[Privacy Protections Tests]</a> ↣ <strong>[X Test Page]</strong></p>
+
+    <p>This page will test if, and how, …</p>
+
+    <p><button id='start'>Start test</button></p>
+
+    <details id='tests' hidden>
+        <summary id='tests-summary'></summary>
+        <ul id='tests-details'>
+        </ul>
+    </details>
+
+    <p><button id='download' disabled>Download the result</button></p>
+
+</body>
+</html>
diff --git a/TEMPLATES/complex/main.js b/TEMPLATES/complex/main.js
@@ -0,0 +1,126 @@
+const startButton = document.querySelector('#start');
+const downloadButton = document.querySelector('#download');
+
+const testsDiv = document.querySelector('#tests');
+const testsSummaryDiv = document.querySelector('#tests-summary');
+const testsDetailsDiv = document.querySelector('#tests-details');
+
+const tests = [
+    {
+        id: 'test-test',
+        run: () => {
+            // function returning either a value or a promise
+            let resolve, reject;
+            const promise = new Promise((res, rej) => {resolve = res; reject = rej});
+
+            setTimeout(() => resolve('ok'), 1000);
+
+            return promise;
+        }
+    }
+];
+
+// object that contains results of all tests
+const results = {
+    page: 'name-of-the-test',// FILL ME OUT!
+    date: null,
+    results: []
+};
+
+function resultToHTML(data) {
+    if (Array.isArray(data)) {
+        return `<ul>${data.map(r => `<li>${r.test} - ${r.result}</li>`).join('')}</ul>`;
+    } else if (data) {
+        return JSON.stringify(data, null, 2);
+    }
+
+    return null;
+}
+
+/**
+ * Test runner
+ */
+function runTests() {
+    startButton.setAttribute('disabled', 'disabled');
+    downloadButton.removeAttribute('disabled');
+    testsDiv.removeAttribute('hidden');
+
+    results.results.length = 0;
+    results.date = (new Date()).toUTCString();
+    let all = 0;
+    let failed = 0;
+
+    testsDetailsDiv.innerHTML = '';
+
+    function updateSummary() {
+        testsSummaryDiv.innerText = `Performed ${all} tests${failed > 0 ? ` (${failed} failed)` : ''}. Click for details.`;
+    }
+
+    for (const test of tests) {
+        const resultObj = {
+            id: test.id,
+            value: null
+        };
+        results.results.push(resultObj);
+
+        const li = document.createElement('li');
+        li.id = `test-${test.id.replace(' ', '-')}`;
+        li.innerHTML = `${test.id} - <span class='value'>…</span>`;
+        const valueSpan = li.querySelector('.value');
+
+        testsDetailsDiv.appendChild(li);
+
+        try {
+            const result = test.run();
+
+            if (result instanceof Promise) {
+                result
+                    .then(data => {
+                        valueSpan.innerHTML = resultToHTML(data);
+                        resultObj.value = data || null;
+                    })
+                    .catch(e => {
+                        failed++;
+                        valueSpan.innerHTML = `❌ error thrown ("${e.message ? e.message : e}")`;
+                        updateSummary();
+                    });
+            } else {
+                valueSpan.innerHTML = resultToHTML(data);;
+                resultObj.value = result || null;
+            }
+        } catch(e) {
+            failed++;
+            valueSpan.innerHTML = `❌ error thrown ("${e.message ? e.message : e}")`;
+        }
+
+        all++;
+    }
+
+    updateSummary();
+
+    startButton.removeAttribute('disabled');
+}
+
+function downloadTheResults() {
+    const data = JSON.stringify(results, null, 2);
+    const a = document.createElement('a');
+    const url = window.URL.createObjectURL(new Blob([data], {type: 'application/json'}));
+    a.href = url;
+    a.download = 'fingerprinting-results.json';
+
+    document.body.appendChild(a);
+    a.click();
+
+    window.URL.revokeObjectURL(url);
+    a.remove();
+}
+
+downloadButton.addEventListener('click', () => downloadTheResults());
+
+// run tests if button was clicked or…
+startButton.addEventListener('click', () => runTests());
+
+// if url query is '?run'
+if (document.location.search === '?run') {
+    runTests();
+}
diff --git a/TEMPLATES/complex/style.css b/TEMPLATES/complex/style.css
@@ -0,0 +1,3 @@
+* {
+    box-sizing: border-box;
+}
diff --git a/TEMPLATES/simple.html b/TEMPLATES/simple.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Name of the test</title>
+
+  <style>
+      /* styles, if needed */
+  </style>
+</head>
+<body>
+<p><a href="../index.html">[Home]</a></p>
+
+<p>Description of the test.</P>
+
+<p id="demo"></p>
+
+<script>
+// script, if needed
+</script>
+
+</body>
+</html>
diff --git a/deployment.md b/deployment.md
diff --git a/index.html b/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
-  <title>Client Test Pages - Home</title>
+  <title>Privacy Test Pages - Home</title>
 </head>
 <body>
 
-<h1>Private Test Pages</h1>
+<h1>Privacy Test Pages</h1>
 
-<p>This site contains a collection of pages with known web content (e.g. trackers, web functionality, etc) that can be used for testing by the extensions and mobile apps.<p>
+<p>This project contains a collection of pages that are meant to be used for testing various privacy and security features of browsers and browser extensions.<p>
 
-<h2>Trackers</h2>
+<h2>Tracker Reporting</h2>
 
 <ul>
-	<li><a href="./trackers/1major-via-script.html">1 major tracker loaded via script</a></li>
-	<li><a href="./trackers/1major-with-surrogate.html">1 major tracker with surrogate</a></li>
-	<li><a href="./trackers/1major-via-img.html">1 major tracker loaded via img</a></li>
-	<li><a href="./trackers/document-fragment.html">Image loaded via document fragment</a></li>
-	<li><a href="./trackers/1major-via-fetch.html">1 major tracker loaded via fetch</a></li>
+	<li><a href="./tracker-reporting/1major-via-script.html">1 major tracker loaded via script</a></li>
+	<li><a href="./tracker-reporting/1major-with-surrogate.html">1 major tracker with surrogate</a></li>
+	<li><a href="./tracker-reporting/1major-via-img.html">1 major tracker loaded via img</a></li>
+	<li><a href="./tracker-reporting/document-fragment.html">Image loaded via document fragment</a></li>
+	<li><a href="./tracker-reporting/1major-via-fetch.html">1 major tracker loaded via fetch</a></li>
 </ul>
 
 <h2>Browser Features</h2>
@@ -39,6 +39,7 @@ <h2>Security</h2>
 </ul>
 
 <h2>Privacy Protections Tests</h2>
+
 <ul>
 	<li><a href='https://privacy-test-pages.glitch.me/privacy-protections/request-blocking/'>Request blocking</a></li>
 	<li><a href='https://privacy-test-pages.glitch.me/privacy-protections/fingerprinting/'>Fingerprinting</a></li>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "privacy-test-pages",
   "version": "1.0.0",
-  "description": "A collection of pages with known content (trackers, web functionality) for testing with the mobile apps and extensions.",
+  "description": "This project contains a collection of pages that are meant to be used for testing various privacy and security features of browsers and browser extensions.",
   "main": "server.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

diff --git a/privacy-protections/fingerprinting/main.js b/privacy-protections/fingerprinting/main.js
@@ -224,7 +224,7 @@ downloadButton.addEventListener('click', () => downloadTheResults());
 // run tests if button was clicked or…
 startButton.addEventListener('click', () => runTests());
 
-// if url contains 'run-tests'
+// if url query is '?run' start tests imadiatelly
 if (document.location.search === '?run') {
     runTests();
 }
diff --git a/privacy-protections/https-upgrades/main.js b/privacy-protections/https-upgrades/main.js
@@ -189,7 +189,7 @@ downloadButton.addEventListener('click', () => downloadTheResults());
 // run tests if button was clicked or…
 startButton.addEventListener('click', () => runTests());
 
-// if url query is '?run'
+// if url query is '?run' start tests imadiatelly
 if (document.location.search === '?run') {
     runTests();
 }
diff --git a/privacy-protections/referrer-trimming/main.js b/privacy-protections/referrer-trimming/main.js
@@ -228,7 +228,7 @@ downloadButton.addEventListener('click', () => downloadTheResults());
 // run tests if button was clicked or…
 startButton.addEventListener('click', () => runTests());
 
-// if url contains 'run' start tests imadiatelly
+// if url query is '?run' start tests imadiatelly
 if (document.location.search.indexOf('?run') === 0) {
     runTests();
 }
diff --git a/privacy-protections/request-blocking/main.js b/privacy-protections/request-blocking/main.js
@@ -524,7 +524,7 @@ downloadButton.addEventListener('click', () => downloadTheResults());
 // run tests if button was clicked or…
 startButton.addEventListener('click', () => runTests());
 
-// if url contains 'run-tests'
+// if url query is '?run' start tests imadiatelly
 if (document.location.search === '?run') {
     runTests();
 }
diff --git a/privacy-protections/running-tests.md b/privacy-protections/running-tests.md
diff --git a/privacy-protections/storage-blocking/main.js b/privacy-protections/storage-blocking/main.js
@@ -318,7 +318,11 @@ downloadButton.addEventListener('click', () => downloadTheResults());
 storeButton.addEventListener('click', () => storeData());
 retriveButton.addEventListener('click', () => retrieveData());
 
-// if url contains 'run-tests'
-if (document.location.search === '?run') {
+// if url query is '?store' store the data immadiatelly
+if (document.location.search === '?store') {
     storeData();
 }
+// if url query is '?retrive' retrieve the data immadiatelly
+if (document.location.search === '?retrive') {
+    retrieveData();
+}
diff --git a/trackers/1major-via-fetch.html → tracker-reporting/1major-via-fetch.html b/trackers/1major-via-fetch.html → tracker-reporting/1major-via-fetch.html
diff --git a/trackers/1major-via-img.html → tracker-reporting/1major-via-img.html b/trackers/1major-via-img.html → tracker-reporting/1major-via-img.html
diff --git a/trackers/1major-via-script.html → tracker-reporting/1major-via-script.html b/trackers/1major-via-script.html → tracker-reporting/1major-via-script.html
diff --git a/trackers/1major-with-surrogate.html → tracker-reporting/1major-with-surrogate.html b/trackers/1major-with-surrogate.html → tracker-reporting/1major-with-surrogate.html
diff --git a/trackers/document-fragment.html → tracker-reporting/document-fragment.html b/trackers/document-fragment.html → tracker-reporting/document-fragment.html