/ Docs

Private View

This feature is still WIP and probably doesn't fully proxy all of the assets on more complicated websites.

What is it

Private View is a full website proxy. That includes the initial html document and all other assets that are fetched after it.

To access it first enable it in settings then on any row in /search click and then

Usage

You can use PV as a standalone app by visiting this URL /proxy/page?url=* where the * is the full URL of the website that you want to visit. You can also use it in an iframe and embed into any website that you want.

How it works - technical stuff

1. The initial request to fetch the page document

API url: /proxy/page?url=*

There's a lot of work that needs to be done here:

  • Rewrite all <a> tag hrefs with https://khofly.com/pv/proxy?url=*
  • Rewrite all <script> tag src attributes to /proxy/{uuid}/{assetPath}
  • Rewrite all <style> tag ( embedded css ) url() to /proxy/{uuid}/{assetPath}
  • Rewrite all [style] attributes ( inline styles ) url() to /proxy/{uuid}/{assetPath}
  • Rewrite all <img> tag src attributes to /proxy/{uuid}/{assetPath}
  • Rewrite all <link[rel="*"]> tag href attributes to /proxy/{uuid}/{assetPath}

{uuid} is saved as key-value for every unique domain since websites sometimes load assets from external URLs, CDNs, etc. This also helps with relative JS module import resolve.

2. Assets that are fetched after the initial document loads

API url: /proxy/{uuid}/{assetPath}

Here we need to handle different asset types:

  • Handle with response.arrayBuffer() for images, icons, fonts, etc.
  • Handle with response.text() for JS files, CSS files, etc.
  • Handle with response.json() for JSON files, etc.

3. API Requests

API url: /api?url=*

  • Override window.fetch with our own custom code to change the URL to our proxy and keep the original in ?url=* param

Read more