Reddit network security FU

reddit-security-bypass.js

// ==UserScript==
// @name        Reddit network security FU
// @namespace   Violentmonkey Scripts
// @match       https://www.reddit.com/r/*
// @match       https://reddit.com/r/*
// @grant       none
// @version     1.0.1
// @author      Michal Svatos (svatos.dev)
// @description Bypassing the Reddit "network security" by offering an alternative frontend view.
// ==/UserScript==

// --- Settings
const modalIcon = '✋'
const modalText = 'Before you turn off the VPN, please try opening it using the button below.'
const modalButton = 'Open in Redlib'
const redlibInstance = 'https://l.opnxng.com/'
// ------------

const returnFixedUrl = (currentUrl, redlibUrl) => {
    const newUrl = currentUrl.replace('https://www.reddit.com/', redlibUrl)

    return newUrl
}

const mainDiv = document.querySelector('body > div')
mainDiv.style.cssText = `position: relative;`

const blurMe = document.querySelector('body > div > div:last-child')
blurMe.style.cssText = `
  opacity: .25;
  filter: blur(2px);
  pointer-events: none;
`

const modalWrapper = document.createElement('dialog')
modalWrapper.setAttribute('open', '')
const modalWrapperIcon = document.createElement('div')
const modalWrapperIconContent = document.createTextNode(modalIcon)
modalWrapperIcon.style.cssText = `font-size: 3rem;`

modalWrapperIcon.append(modalWrapperIconContent)


const modalWrapperText = document.createTextNode(modalText)
modalWrapper.style.cssText = `
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  padding: 1rem;
  border-radius: var(--radius-md);
  background-color: var(--color-global-white);
  color: var(--color-global-black);
  box-shadow: 0 10px 100px 0px var(--color-a-default);
  z-index: 1;
`

const button = document.createElement('a')
const buttonText = document.createTextNode(modalButton)
button.setAttribute('href', returnFixedUrl(location.href, redlibInstance))
button.style.cssText = `
  position: relative;
  padding: .75rem 1.5rem;
  background-color: var(--color-a-default);
  color: var(--color-banner-brand-text);
  border-radius: 100vmax;
  margin-top: 1rem;
`

const closeButton = document.createElement('button')
const closeButtonText = document.createTextNode('❌')
closeButton.append(closeButtonText)
closeButton.style.cssText = `
  apperance: none;
  border: 0;
  padding: .5rem;
  position: absolute;
  inset: .5rem .5rem auto auto;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background-color: transparent;
`

const closeModal = (modal, blurredDiv) => {
  modalWrapper.removeAttribute('open')
  modalWrapper.style.cssText = ``
  blurMe.style.cssText = ``
}

closeButton.onclick = () => closeModal(modalWrapper, blurMe)

button.onmouseover = () => {
  button.style.backgroundColor = 'var(--color-action-primary)'
  button.style.textDecoration = 'none'
}

button.onmouseout = () => {
  button.style.backgroundColor = 'var(--color-a-default)'
}

button.append(buttonText)

modalWrapper.append(modalWrapperIcon)
modalWrapper.append(modalWrapperText)
modalWrapper.append(button)
modalWrapper.append(closeButton)
mainDiv.prepend(modalWrapper)

Screenshot