Use qs for SHAREABLE preview URLs

charlespwd · Mar 26, 2021 · bc7d82b · bc7d82b
1 parent c5aa1f3
commit bc7d82b
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 44 deletions.
diff --git a/index.html b/index.html
@@ -207,7 +207,7 @@ <h2>How to use</h2>
           </div>
           <textarea id="wpt-script" disabled rows="7"></textarea>
           <input type="button" id="copy" value="📋 Copy To Clipboard" />
-          <input type="button" id="debug-button" value="Test run (30s)" />
+          <a id="preview" href="/" target="_blank">Preview</a>
         </form>
       </section>
       <section>
@@ -258,7 +258,9 @@ <h2>Reference</h2>
             </p>
             <p>
               @example:<br />
-              <code>X-Async: head &gt; script[src]:not([async]):not([defer])</code>
+              <code
+                >X-Async: head &gt; script[src]:not([async]):not([defer])</code
+              >
             </p>
           </li>
           <li>
@@ -269,7 +271,9 @@ <h2>Reference</h2>
             </p>
             <p>
               @example:<br />
-              <code>X-Defer: head &gt; script[src]:not([async]):not([defer])</code>
+              <code
+                >X-Defer: head &gt; script[src]:not([async]):not([defer])</code
+              >
             </p>
           </li>
           <li>
@@ -344,7 +348,10 @@ <h2>Reference</h2>
           </li>
         </ul>
       </section>
-      <footer>by <a href="//twitter.com/cpclermont">@cpclermont</a> | <a href="https://github.com/charlespwd/faster">source</a></footer>
+      <footer>
+        by <a href="//twitter.com/cpclermont">@cpclermont</a> |
+        <a href="https://github.com/charlespwd/faster">source</a>
+      </footer>
       <script>
         const area = document.getElementById('wpt-script')
         const inputs = [
@@ -447,45 +454,46 @@ <h2>Reference</h2>
           } catch (e) {}
         }
 
+        const updateUI = () => {
+          updateScript()
+          updateLink()
+        }
+
         const updateScript = () => {
           area.value = getScriptValue()
         }
 
         inputs.forEach((input) => {
-          input.addEventListener('input', updateScript)
+          input.addEventListener('input', updateUI)
         })
 
-        updateScript()
+        updateUI()
 
-        document
-          .getElementById('debug-button')
-          .addEventListener('click', function tryItOutFor30Seconds() {
-            const headers = Object.keys(elements)
+        function updateLink() {
+          const link = document.getElementById('preview')
+          const target = new URL(elements.url.value)
+          const url = new URL(window.location)
+          if (url.host.match(/127\.0\.0\.1/)) {
+            url.host = '127.0.0.1:8787'
+          }
+
+          url.search =
+            '?' +
+            Object.keys(elements)
               .filter((x) => /^x-/.test(x))
               .map(getHeaderKeyValue)
               .filter(Boolean)
-            for (const [header, value] of headers) {
-              document.cookie = `${header}=${encodeURIComponent(
-                value,
-              )};path=/;max-age=30`
-            }
-            const url = new URL(elements.url.value)
-            document.cookie = `x-host=${encodeURIComponent(
-              url.hostname,
-            )};path=/;max-age=30`
-
-            if (/127\.0\.0\.1/.test(location.hostname)) {
-              location.href = 'http://127.0.0.1:8787'
-            } else {
-              location.reload()
-            }
-          })
+              .concat([['x-host', target.hostname]])
+              .map(([k, v]) => [k, encodeURIComponent(v)].join('='))
+              .join('&')
+          link.href = url.toString()
+        }
 
         document
           .getElementById('copy')
           .addEventListener('click', function copyScriptToClipboard() {
-            const scriptText = getScriptValue();
-            navigator.clipboard.writeText(scriptText);
+            const scriptText = getScriptValue()
+            navigator.clipboard.writeText(scriptText)
           })
       </script>
     </main>

diff --git a/index.js b/index.js
@@ -61,6 +61,10 @@ async function proxyFetch(qs, realRequest) {
   const proxyRequestUrl = odp.replace(/^\/\//, 'https://')
   const request = new Request(proxyRequestUrl, realRequest)
   if (compression) request.headers.set('Accept-Encoding', compression)
+  request.headers.delete('x-host')
+  request.headers.delete('x-forwarded-proto')
+  request.headers.delete('cf-visitor')
+  request.headers.delete('cf-workers-preview-token')
 
   const response = await fetch(proxyRequestUrl, {
     ...request,
@@ -153,7 +157,7 @@ async function handleRequest(request) {
     'x-append-to-head',
     'x-append-to-body',
   ]
-    .map((k) => [k, request.headers.get(k) || cookies[k]])
+    .map((k) => [k, request.headers.get(k) || cookies[k] || qs[k]])
     .reduce((acc, [k, v]) => {
       acc[k] = v
       return acc
@@ -240,7 +244,7 @@ async function handleRequest(request) {
     ],
     domains && [
       'on',
-      'script[src],link[href][rel=stylesheet],link[href][rel=preload],link[href][rel*=icon],[src],[data-srcset],[data-src]',
+      'script[src],link[href][rel=stylesheet],link[href][rel=preload],link[href][rel*=icon],[src],[data-srcset],[data-src],[data-bgset]',
       new OnDomainHandler(domains, url.hostname, compression),
     ],
     domains && [
@@ -302,7 +306,7 @@ class OnDomainHandler {
   }
 
   element(element) {
-    const attrs = ['href', 'src', 'srcset', 'data-srcset', 'data-src'].filter(
+    const attrs = ['href', 'src', 'srcset', 'data-srcset', 'data-src', 'data-bgset'].filter(
       element.getAttribute.bind(element),
     )
     for (const attr of attrs) {

diff --git a/package.json b/package.json
@@ -5,8 +5,7 @@
   "description": "A web worker to make websites fast",
   "main": "index.js",
   "scripts": {
-    "curl": "scripts/curl-production",
-    "curl:local": "scripts/curl-local"
+    "request": "scripts/request"
   },
   "author": "Charles-P. Clermont <charles@cpclermont.com>",
   "license": "MIT",

diff --git a/scripts/curl-local b/scripts/curl-local
diff --git a/scripts/curl-production → scripts/request b/scripts/curl-production → scripts/request
@@ -4,5 +4,6 @@ host="${SITE}"
 curl -s \
   -H "x-host: $host" \
   -H 'accept: text/html' \
+  -H 'x-on-domain: *' \
   "$@" \
-  https://fast.cpclermont.workers.dev
+  "$ROOT_URL"