Proxy websites with arbitrary links and support style

Hello! I’m try to create a Worker with support arbitrary URL, to generate access for websites and I use this template:

"use strict";

if (typeof addEventListener === 'function') {
    addEventListener('fetch', (e) => {
        // work around as strict typescript check doesn't allow e to be of type FetchEvent
        const fe = e;
        fe.respondWith(proxyRequest(fe.request));
    });
}
async function proxyRequest(r) {
    const url = new URL(r.url);
    const prefix = '/website/';
    if (url.pathname.startsWith(prefix)) {
        const remainingUrl = url.pathname.replace(new RegExp('^' + prefix), '');
        let targetUrl = decodeURIComponent(remainingUrl);
        if (!targetUrl.startsWith('http://') && !targetUrl.startsWith('https://')) {
            targetUrl = url.protocol + '//' + targetUrl;
        }
        return fetch(targetUrl);
    }
    else {
        return new Response('Bad Request', { status: 400, statusText: 'Bad Request' });
    }
}

"use strict";

if (typeof addEventListener === 'function') {
    addEventListener('fetch', (e) => {
        // work around as strict typescript check doesn't allow e to be of type FetchEvent
        const fe = e;
        fe.respondWith(proxyRequest(fe.request));
    });
}
async function proxyRequest(r) {
    const url = new URL(r.url);
    const prefix = '/website/';
    if (url.pathname.startsWith(prefix)) {
        const remainingUrl = url.pathname.replace(new RegExp('^' + prefix), '');
        let targetUrl = decodeURIComponent(remainingUrl);
        if (!targetUrl.startsWith('http://') && !targetUrl.startsWith('https://')) {
            targetUrl = url.protocol + '//' + targetUrl;
        }
        return fetch(targetUrl);
    }
    else {
        return new Response('Bad Request', { status: 400, statusText: 'Bad Request' });
    }
}

This script is work

https://myworkers.workers.dev/website/telegram.org

https://myworkers.workers.dev/website/telegram.org

, but the websites a loaded incorrect, css, images not load. Next, I found this template:

async function handleRequest(request) {
    const url = new URL(request.url)
    if (url.hostname in ORIGINS) {
      const target = ORIGINS[url.hostname]
      url.hostname = target
      return fetch(url.toString(), request)
    }
    return fetch(request)
  }
  addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
  })
  
  const ORIGINS = {
    'myworkers.workers.dev': 'telegram.org'
  }

async function handleRequest(request) {
    const url = new URL(request.url)
    if (url.hostname in ORIGINS) {
      const target = ORIGINS[url.hostname]
      url.hostname = target
      return fetch(url.toString(), request)
    }
    return fetch(request)
  }
  addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
  })
  
  const ORIGINS = {
    'myworkers.workers.dev': 'telegram.org'
  }

This script fully loads the site, it supports styles and images, but not supports arbitrary URL, he generate access only for website from

const ORIGINS

const ORIGINS

code block. 😦 Please help me, how I can change the first or second template to combine their functionality in order to load sites correctly and support arbitrary URLs?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Proxy websites with arbitrary links and support style