Giter VIP home page Giter VIP logo

repflare's Introduction

REPflare

A lightweight Cloudflare Worker to replace text and inject styles and scripts in any web page.

Introduction

REPflare is born as a "spinoff" of CORSflare, a lightweight reverse proxy written in JavaScript that can be used to bypass most common CORS (Cross-Origin Resource Sharing)restrictions: for additional info about it, read here.

In a nutshell, REPflare is a Cloudflare Worker that allows to perform text replacements and script injections in any webpage, as long as the originating website is server through the Cloudflare CDN.

Wait a minute... what's a Cloudflare Worker?

Cloudflare Workers are serverless execution environments that allow developers to create entirely new applications or augment existing ones without configuring or maintaining infrastructure. A Cloudflare Worker can be set up to work in two ways:

  • Stand-alone, meaning that it will serve first-hand content or content fetched from third-party sources (inside or outside Cloudflare). CORSflare is a good example of stand-alone worker, since it can proxy every website.
  • Route-based, meaning that it will intercept a route (or a route mask) of one of our Cloudflare-served domains and perform some post-processing tasks between the web server's HTTP response and the client. REPflare is a good example of route-based worker, since is meant to perform text replacement and script injection only for the domains that the person who uses it has registered on Cloudflare (and that are served through the Cloudflare CDN).

How to install

To setup REPflare as a Cloudflare Worker, follow these steps:

  • Download the latest REPflare version from the REPflare GitHub page: you'll only need the REPflare.js JavaScript file.
  • Login to Cloudflare. If you don't have an account, create one: it's free and the basic plan will arguably be enough for most common scenarios, as it will grant 100.000 requests per day.
  • Navigate to the Workers section using the top-level menu.
  • Create a new worker. If it's the first time you do that, you'll also be asked to choose a subdomain, such as domainName.workers.dev. The subdomain name will be appended to the worker's name to form the worker's FQDN, such as workerName.domainName.workers.dev.
  • Paste the REPflare.js source code within the worker code.
  • Setup the REPflare configuration settings by following the instructions in the code comment sections (or see below).
  • Add one or more ROUTES to Cloudflare and assign them to the REPflare worker: for example, if you want to perform text replacements and script injections on all the web pages of the www.yourdomain.com domain, you'll have to add (and assign) the www.yourdomain.com/* route.

For additional details about Cloudflare Workers, Workers routes and how to properly set them, take a look at the following official guides:

Configuration Settings

REPflare's configuration settings can be set via some JavaScript constants & variables placed at the beginning of the source code. The best way to do that is to read the code comments. However, here's a quick breakdown of the most relevant options:

  • textReplacement_useRegex: set this to TRUE to allow RegExp usage within the text replacement rules, FALSE otherwise.
  • textReplacement_caseInsensitive: set this to TRUE to perform the replacement in a case-insensitive way, FALSE otherwise.
  • textReplacementRules: a JSON object containing the text replacement rules (see below for details).
  • scriptInjectionRules: a JSON object containing the script injection rules (see below for details).

Text Replacement Rules

The textReplacementRules object can be used to configure the text replacement rules that will be applied to the web server's HTTP response before serving the webpage back to the user.

You can use this feature for a number of tasks, such as:

  • "fix" non-standard internal URLs and/or local paths within the upstream's returned contents (html pages, css, js, internal links, custom fonts, and so on)
  • alter the response content in various ways (change a logo, modify the page title, replace a word or a link, and so on).

Each rule must be defined in the following way:

'<source_string>' : '<replacement_string>'

HINT: text replacement rules are processed from top to bottom: put the most specific rules before the generic ones.

Script Injection Rules

The scriptInjectionRules object can be used to inject <script>, <style> and/or any other HTML element (or raw content) to the web server's HTTP response before serving the webpage back to the user.

You can use this feature for a number of tasks, such as:

  • add additional scripts and/or styles to the webpage (including those pointing to external/third party websites).
  • add additional content to the webpage (such as a banner, a emergency alert, a cookie policy modal dialog, and so on)

Each rule must be defined in the following way:

'<content_to_inject>' : <position>

The rightmost position parameter must be a number from 0 to 3 that will determine where the content will be injected. The position parameter can have the following values:

  • 0: at the beginning of element ( first child of )
  • 1: at the end of element ( right before )
  • 2: at the beginning of element ( first child of )
  • 3: at the end of element ( right before )

HINT: script injection rules are processed from top to bottom.

Useful References

Credits

REPflare is strongly based upon the CORSflare project (MIT license).

repflare's People

Contributors

darkseal avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

repflare's Issues

Fonts not correctly loaded if Worker enabled on Wordpress site

Even without any string replacement, if I enable the Worker on Cloudflare, it breaks the Wordpress/Elementor website.
The errors in the browser console are :

  • Failed to decode downloaded font: < URL >
    (38 lines like : Failed to decode downloaded font: https://site.com/wp-content/themes/my-listing/assets/fonts/GlacialIndifference/Bold.otf)
  • OTS parsing error: incorrect entrySelector for table directory
  • OTS parsing error: Size of decompressed WOFF 2.0 is less than compressed size
  • OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
  • OTS parsing error: incorrect file size in WOFF header
    The errors are supposed to happen at /index:1

The website works well without the Worker.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.