Query Parameters Test Page (#67)

* AMP link protection page * Link change * Add cloaked URLs * Clean up and add expected URLs * Update worng expected links * Add query params test page * Lint
duckduckgo · Jan 7, 2022 · 10df8d9 · 10df8d9
1 parent deeb0ef
commit 10df8d9
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -63,6 +63,7 @@ <h2>Privacy Protections Tests</h2>
 	<li><a href='./privacy-protections/surrogates/'>Surrogates</a></li>
 	<li><a href='./privacy-protections/gpc/'>Global Privacy Control</a></li>
 	<li><a href='./privacy-protections/amp/'>AMP Links</a></li>
+	<li><a href='./privacy-protections/query-parameters/'>Query Parameters</a></li>
 </ul>
 
 <h2>Autofill</h2>

diff --git a/privacy-protections/index.html b/privacy-protections/index.html
@@ -23,6 +23,7 @@ <h1>Privacy Protections Tests</h1>
         <li><a href='./surrogates/'>Surrogates</a></li>
         <li><a href='./gpc/'>Global Privacy Control</a></li>
         <li><a href='./amp/'>AMP Links</a></li>
+        <li><a href='./query-parameters/'>Query Parameters</a></li>
     </ul>
 
 </body>

diff --git a/privacy-protections/query-parameters/index.html b/privacy-protections/query-parameters/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Query Parameters</title>
+
+  <style>
+    .expected {
+      color: grey;
+      font-size: 14px;
+      margin-top: -10px;
+      margin-bottom: -4px;
+    }
+  </style>
+</head>
+<body>
+  <p><a href="../../">[Home]</a> ↣ <a href="../">[Privacy Protections Tests]</a> ↣ <strong>[Query Parameters]</strong></p>
+
+  <p>This test page has sample links that use tracking query parameters. When clicking on the sample links the displayed results should be equal to the listed "Expected" value.</P>
+
+  <div id="demo">
+    <p>URLs with Tracking Parameters</p>
+    <ul>
+      <li>
+        <p><a href="/privacy-protections/query-parameters/query.html?utm_source=something&q=other">Link with utm_source and 1 standard parameter</a></p>
+        <p class="expected">Expected: &quot;q=other&quot;</p>
+      </li>
+      <li>
+        <p><a href="/privacy-protections/query-parameters/query.html?utm_source=something&utm_medium=somethingelse">Link with utm_source and utm_medium</a></p>
+        <p class="expected">Expected: &quot;&quot;</p>
+      </li>
+      <li>
+        <p><a href="/privacy-protections/query-parameters/query.html?fbclid=12345&fb_source=someting&u=14">Link with fbclid, fb_source and 1 standard parameter</a></p>
+        <p class="expected">Expected: &quot;u=14&quot;</p>
+      </li>
+      <li>
+        <p><a href="/privacy-protections/query-parameters/query.html?q=something&id=1234">Link which should not be rewritten</a></p>
+        <p class="expected">Expected: &quot;q=something&id=1234&quot;</p>
+      </li>
+    </ul>
+  </div>  
+</body>
+</html>
diff --git a/privacy-protections/query-parameters/main.js b/privacy-protections/query-parameters/main.js
@@ -0,0 +1,8 @@
+(function () {
+    window.addEventListener('load', function (event) {
+        const queryParams = new URLSearchParams(window.location.search);
+        // display the query parameters in the element with id results
+        console.log(queryParams);
+        document.getElementById('results').innerHTML = queryParams.toString();
+    });
+})();
diff --git a/privacy-protections/query-parameters/query.html b/privacy-protections/query-parameters/query.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Query Parameters Landing</title>
+
+  <style>
+    .expected {
+      color: grey;
+      font-size: 14px;
+      margin-top: -10px;
+      margin-bottom: -4px;
+    }
+  </style>
+  <script src="./main.js" type="text/javascript"></script>
+</head>
+<body>
+  <p><a href="../../">[Home]</a> ↣ <a href="../">[Privacy Protections Tests]</a> ↣ <strong>[Query Parameters]</strong></p>
+
+  <p>This page is a landing page for the query parameters tests. It is not intended to be used directly.</p>
+
+  <div>
+    <p>Results</p>
+    <p>&quot;<span id="results"></span>&quot;</p>
+  </div>
+</body>
+</html>