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 withhttps://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.fetchwith our own custom code to change the URL to our proxy and keep the original in?url=*param
Read more