From d209e512f8a1b92bd5293b4d07e0b627a0e76b30 Mon Sep 17 00:00:00 2001 From: Konrad Dzwinel Date: Fri, 18 Dec 2020 01:45:33 +0100 Subject: [PATCH] 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 --- .gitignore | 3 +- README.md | 29 +++- TEMPLATES/complex/index.html | 27 ++++ TEMPLATES/complex/main.js | 126 ++++++++++++++++++ TEMPLATES/complex/style.css | 3 + TEMPLATES/simple.html | 24 ++++ deployment.md | 15 --- index.html | 19 +-- package.json | 2 +- privacy-protections/fingerprinting/main.js | 2 +- privacy-protections/https-upgrades/main.js | 2 +- privacy-protections/referrer-trimming/main.js | 2 +- privacy-protections/request-blocking/main.js | 2 +- privacy-protections/running-tests.md | 15 --- privacy-protections/storage-blocking/main.js | 8 +- .../1major-via-fetch.html | 0 .../1major-via-img.html | 0 .../1major-via-script.html | 0 .../1major-with-surrogate.html | 0 .../document-fragment.html | 0 20 files changed, 229 insertions(+), 50 deletions(-) create mode 100644 TEMPLATES/complex/index.html create mode 100644 TEMPLATES/complex/main.js create mode 100644 TEMPLATES/complex/style.css create mode 100644 TEMPLATES/simple.html delete mode 100644 deployment.md delete mode 100644 privacy-protections/running-tests.md rename {trackers => tracker-reporting}/1major-via-fetch.html (100%) rename {trackers => tracker-reporting}/1major-via-img.html (100%) rename {trackers => tracker-reporting}/1major-via-script.html (100%) rename {trackers => tracker-reporting}/1major-with-surrogate.html (100%) rename {trackers => tracker-reporting}/document-fragment.html (100%) diff --git a/.gitignore b/.gitignore index b512c09..28f1ba7 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -node_modules \ No newline at end of file +node_modules +.DS_Store \ No newline at end of file diff --git a/README.md b/README.md index 6268e2d..d692bfe 100644 --- 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 new file mode 100644 index 0000000..65c6f3c --- /dev/null +++ b/TEMPLATES/complex/index.html @@ -0,0 +1,27 @@ + + + + + + X Test Page + + + + + +

[Home] ↣ [Privacy Protections Tests] ↣ [X Test Page]

+ +

This page will test if, and how, …

+ +

+ + + +

+ + + \ No newline at end of file diff --git a/TEMPLATES/complex/main.js b/TEMPLATES/complex/main.js new file mode 100644 index 0000000..6042836 --- /dev/null +++ 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 ``; + } 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} - …`; + 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 new file mode 100644 index 0000000..36a5735 --- /dev/null +++ b/TEMPLATES/complex/style.css @@ -0,0 +1,3 @@ +* { + box-sizing: border-box; +} diff --git a/TEMPLATES/simple.html b/TEMPLATES/simple.html new file mode 100644 index 0000000..1327929 --- /dev/null +++ b/TEMPLATES/simple.html @@ -0,0 +1,24 @@ + + + + + + Name of the test + + + + +

[Home]

+ +

Description of the test.

+ +

+ + + + + diff --git a/deployment.md b/deployment.md deleted file mode 100644 index 6133eb5..0000000 --- a/deployment.md +++ /dev/null @@ -1,15 +0,0 @@ -# Deployment - -This project currently coexists on [Github Pages](https://duckduckgo.github.io/privacy-test-pages/) and on [Glitch](https://privacy-test-pages.glitch.me). - -## Github Pages - -Deployment to Github Pages happens automatically after changes are merged to `gh-pages` branch. - -## Glitch - -Some Privacy Protection test pages may not fully work on Github Pages though bacause they require a back-end (see server.js file in this repo).For that reason we are also deploying this page on Glitch. Currently updates on Glitch are manual: -1. Log in to Glitch, make sure you are part of the duckduckgo team on glitch -1. Go to the project - https://glitch.com/edit/#!/privacy-test-pages -1. Click `Tools -> Import and Export -> Import from Github` and provide name of this repo (`duckduckgo/privacy-test-pages`). -1. Code will update and deploy imadiatelly. \ No newline at end of file diff --git a/index.html b/index.html index b390407..7332c48 100644 --- a/index.html +++ b/index.html @@ -3,22 +3,22 @@ - Client Test Pages - Home + Privacy Test Pages - Home -

Private Test Pages

+

Privacy Test Pages

-

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.

+

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.

-

Trackers

+

Tracker Reporting

Browser Features

@@ -39,6 +39,7 @@

Security

Privacy Protections Tests

+