Knowledge Base (Posts about web)

owntracks with reverse proxy

bgstack15 — Mon, 29 Dec 2025 14:07:00 GMT

I recently improved my owntracks deployment to put the frontends behind a reverse proxy! It took me some time to research, because I got distracted with websockets and CORS rabbit trails.

What ended up working was the following process.

Add these values to the config.js.

window.owntracks.config = {
    api: {
        baseUrl: "https://storage3.ipa.example.com/owntracks-map/",
    },
    router: {
        basePath: "/owntracks-map",
    },
};

Add to the Apache httpd reverse proxy virtual host(s) these configs. I bet some of this is redundant.

ProxyPreserveHost On
ProxyPass        /owntracks-map  http://server4.ipa.example.com:8085 upgrade=websocket
ProxyPassReverse /owntracks-map  http://server4.ipa.example.com:8085/ upgrade=websocket
ProxyPass        /owntracks-internal  http://server4.ipa.example.com:8083 upgrade=websocket
ProxyPassReverse /owntracks-internal  http://server4.ipa.example.com:8083/ upgrade=websocket
<Location "/owntracks-internal/ws">
   RequestHeader append X-Forwarded-Prefix "/owntracks"
   RequestHeader append X-Script-Name "/owntracks"
</Location>
<Location "/owntracks-internal">
   RequestHeader append X-Forwarded-Prefix "/owntracks"
   RequestHeader append X-Script-Name "/owntracks"
</Location>
<Location "/owntracks-internal/view/">
   RequestHeader append X-Forwarded-Prefix "/owntracks"
   RequestHeader append X-Script-Name "/owntracks"
</Location>
<Location "/owntracks-internal/static/">
   RequestHeader append X-Forwarded-Prefix "/owntracks"
   RequestHeader append X-Script-Name "/owntracks"
</Location>
<Location "/owntracks-map/ws">
   ProxyPass        http://server4.ipa.example.com:8085/ retry=3 connectiontimeout=5 timeout=8 upgrade=websocket
   ProxyPassReverse http://server4.ipa.example.com:8085/
   RequestHeader append X-Forwarded-Prefix "/owntracks-map/ws"
   RequestHeader append X-Script-Name "/owntracks-map/ws"
</Location> 
<Location "/owntracks-map/">
   ProxyPass        http://server4.ipa.example.com:8085/ retry=3 connectiontimeout=5 timeout=8 upgrade=websocket
   ProxyPassReverse http://server4.ipa.example.com:8085/
   RequestHeader append X-Forwarded-Prefix "/owntracks-map"
   RequestHeader append X-Script-Name "/owntracks-map"
</Location>

Please note that this /owntracks-internal is not the path used by the owntracks android clients. It is for the web view of the app with different authentication, and not the per-device auth used by owntracks.

And then the directory listing for these frontend paths is as follows.

<li><a href="/owntracks-map/">/owntracks-map/</a> Location tracking (<a href="/owntracks-internal/">bare app</a>)</li>

References

Sticking the frontend behind a virtual path frontend/docs/config.md at main · owntracks/frontend
Second part of reverse proxy frontend/docs/config.md at main · owntracks/frontend

Redirect http to https in html (well, javascript)

bgstack15 — Fri, 28 Mar 2025 13:28:00 GMT

I wanted to redirect an http page to https, without changing virtual hostname. And I was able to find this on the Internet.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
<script>
<!-- from https://stackoverflow.com/questions/4954768/automatic-redirection-to-https/4954784#4954784 -->
var loc = window.location.href+'';
if (loc.indexOf('http://')==0){
    window.location.href = loc.replace('http://','https://');
}
</script>
<footer>
</footer>
</html>

So as long as you reach this index.html, it will then redirect you to the webapp hosted only on the TLS-enabled virtual host.

New image helper

bgstack15 — Sun, 27 Aug 2023 15:58:45 GMT

Because I love reinventing the wheel, here is my way-too-simple photo gallery web page generator.

	`#!/bin/sh`
	`# Startdate: 2023-07-13-5 16:48`
	`# Purpose: make simple html gallery of images and directories`
	`# Reference: tapestry-helper.sh`
	`# Usage:`
	`# Ensure no spaces in the filenames.`
	`# Improve:`
	`# add ".." links to any child directories.`
	`INDIR=/mnt/public/www/gallery/2013-01-picasa-partial-dump`
	`HTML_HEAD="${INDIR}/.header.html"`
	`HTML_FOOT="${INDIR}/.footer.html"`
	`DIRECTORY_ICON="/gallery/2013-01-picasa-partial-dump/folder.svg"`

	`THUMBNAIL_SIZE=300`
	`USE_THUMBNAILS=1`
	`if test -n "${USE_THUMBNAILS}" && test "${USE_THUMBNAILS}" = 1 ;`
	`then`
	`mkdir -p "${INDIR}/.thumbnails"`
	`fi`
	`# use MAKE_THUMBNAILS=1 to actually run convert, which slows the process down. You disable MAKE_THUMBNAILS when just regenerating the html`
	`test -z "${MAKE_THUMBNAILS}" && MAKE_THUMBNAILS=0`

	`cd "${INDIR}"`
	`# now that there are no spaces we can just do this`
	`# begin dir loop`
	`for word in $( find "${INDIR}" -mindepth 0 -type d ! -name '.thumbnails' ) ;`
	`do`
	`(`
	`cd "${word}"`
	`shortword="$( basename "${word}" )"`
	`mkdir -p ./.thumbnails`
	`rm -f ./index.html`
	`exec 3>&1`
	`exec 1>> ./index.html`
	`eval "cat <<EOF`
	`$( cat "${HTML_HEAD}" )`
	`EOF`
	`"`
	`# make a .. link if not the parent directory`
	`if ! test "${word}" = "${INDIR}" ; then`
	`echo "<div class=\"item\"><a href=\"..\"><img src=\"${DIRECTORY_ICON}\" class=\"thumb\">..</a></div>"`
	`fi`
	`tds="$( find . -mindepth 1 -maxdepth 1 -type d ! -name '.thumbnails' ! -name '.*' )"`
	`for td in ${tds} ; do`
	`td_basename="$( basename "${td}" )"`
	`#echo "<a href=\"${td}\"><img src=\"${DIRECTORY_ICON}\" class=\"thumb\">${td}</a>"`
	`echo "<div class=\"item\"><a href=\"${td}\"><img src=\"${DIRECTORY_ICON}\" class=\"thumb\">${td_basename}</a></div>"`
	`done`
	`tfs="$( find . -mindepth 1 -maxdepth 1 ! -type d ! -name '.ini' ! -name '..ini' ! -name '..swp' ! -name '.sh' ! -name '.html' ! -name '.db' ! -name 'folder.svg' ! -name '.' ! -name '.css' -printf '%T@ %P\n' \| sort -n \| awk '{print $NF}' )"`
	`for tf in ${tfs} ;`
	`do`
	`tf_in="${word}/${tf}"`
	`tf_thumb_web="${tf}"`
	`if test -n "${USE_THUMBNAILS}" && test "${USE_THUMBNAILS}" = 1 ;`
	`then`
	`tf_thumb="${word%%/}/.thumbnails/${tf%%.???}.jpg"`
	`tf_thumb_web=".thumbnails/${tf%%.???}.jpg"`
	`test "${MAKE_THUMBNAILS}" = "1" && convert -filter Lanczos -resize "${THUMBNAIL_SIZE}x${THUMBNAIL_SIZE}" "${word}/${tf}" "${tf_thumb}"`
	`fi`
	`echo "<a href=\"${tf}\"><img src=\"${tf_thumb_web}\" class=\"thumb\"></a>"`
	`done`
	`cat "${HTML_FOOT}"`
	`exec 1>&3`
	`)`
	`done # end dir loop`

My .header.html and .footer.html files are very basic.

<html>
<!-- started 2023-07-13 -->
<link rel="stylesheet" href="/gallery/2013-01-picasa-partial-dump/simple.css">
<head>
<title>${shortword}</title>
</head>
<body>

And footer just closes the html tags.

</body>
</html>

And the css.

.thumb {
   max-width: 300px;
   max-height: 300px;
}

div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 120px;
}
/*
img {
    width: 100px;
    height: 100px;
    background-color: grey;
}
*/
div.item img {
   max-width: 220px;
   max-height: 220px;
}
.caption {
    display: block;
}

I just grabbed a random folder.svg from one of the GNOME Icon themes.

Scraping Pharaoh walkthroughs

bgstack15 — Tue, 21 Mar 2023 12:52:53 GMT

Every so often I intend to play through the old Pharaoh computer game: no Cleopatra! I have the original disc and don't need some mangled version.

But I don't get very far before I lose interest in the game. Sometimes I don't even get all the way to Giza and the big, famous pyramids. So I need guidance to play the game, and for that I use the classic walkthroughs on Heavengames.

Just in case this site ever disappears, I cloned the pages locally for myself.

wget --limit-rate=50k -E -k -r -N -p -l 7 https://pharaoh.heavengames.com/walkthroughs/ --reject-regex '.*caesar3.*|.*archives.*|.*strategy.*|.*downloads.*|.*faqs.*|.*buildings.*|.*links.*|.*comps/|.*egypt/|.*interviews/|.*gallery/|.*sitemap/|.*lympis/|.*\<e3/|.*cgi-bin/.*newsfiles/'

I built that exclusion regex after a bunch of trial-and-error. I only wanted the sources necessary to display the ~21 level walkthroughs with images and css.

disabling webrtc temporarily

bgstack15 — Fri, 17 Mar 2023 12:43:42 GMT

To facilitate a proxy setting to prevent IP address leakage, disable WebRTC with about:config setting:

media.peerconnection.enabled = false

You can check with https://whoer.net

ssh_config: new option in Devuan, March 2023

bgstack15 — Sun, 05 Mar 2023 13:54:19 GMT

From the apt-listchanges message for this month:

openssh (1:9.2p1-1) unstable; urgency=medium

  OpenSSH 9.2 includes a number of changes that may affect existing
  configurations:

   * ssh(1): add a new EnableEscapeCommandline ssh_config(5) option that
     controls whether the client-side ~C escape sequence that provides a
     command-line is available. Among other things, the ~C command-line
     could be used to add additional port-forwards at runtime.

     This option defaults to "no", disabling the ~C command-line that was
     previously enabled by default. Turning off the command-line allows
     platforms that support sandboxing of the ssh(1) client (currently only
     OpenBSD) to use a stricter default sandbox policy.

 -- Colin Watson <cjwatson@debian.org>  Wed, 08 Feb 2023 10:36:06 +0000

So I had to run this on all Devuan systems, to keep my ssh client command-line enabled.

sudo updateval -a -v /etc/ssh/ssh_config '^\s*EnableEscapeCommandline.*' 'EnableEscapeCommandline yes'

Where updateval is from my bgscripts-core package.

socks proxy command

bgstack15 — Wed, 01 Mar 2023 14:29:10 GMT

Run this command.

ssh -D 8880 ${USER}@proxyserver -n -f -N

Set socks proxy in browser settings.

Wikipedia: use usable layout

bgstack15 — Wed, 01 Feb 2023 13:45:30 GMT

Wikipedia updated its layout, and it now makes less sense than before. To use the sensible design it has been for over a decade, you can add this url parameter: ?useskin=vector.

Alternatively, you can use the Firefox extension Classic mode for Wikipedia, or just suck it up and press the multiple buttons it takes to widen the new layout, but that still hides the table of contents. The old view is the only way to get that classic TOC object.

Reference

How to restore Wikipedia's old design - gHacks Tech News
Classic mode for Wikipedia Firefox extension

Record outbound clicks on web page with small redirect project

bgstack15 — Sat, 03 Dec 2022 13:47:43 GMT

I have built a new project which I call outbound. I designed it to redirect users to any outbound links on my blog or elsewhere on my site. This project requires modifying an outbound link to visit a configured location, e.g., /outbound/https://start.duckduckgo.com/.

As a minimal effort to reduce pointless traffic, a link will only redirect if the referer is in a whitelist configured by the admin.

The idea is to log to regular web server logs (apache, nginx, etc.) redirects. The admin can just view all http response 307 visits for path /outbound/.

To build a link, the page author needs to include the protocol after the prefix, so /outbound/https://start.duckduckgo.com/ is good, but /outbound/start.duckduckgo.com/ makes the link invalid.

I plan on using links like this in the future, so I can get some insights into what outbound links my audience uses, that is, if I have an audience.

For testing purposes, here are some outbound links in different formats, for testing my CMS (Nikola):

start.duckduckgo.com regular [text](/outbound/http://example.com) format works
https://web.emhmki.org/ inline html <a href="/outbound/https://web.emhmki.org/">https://web.emhmki.org/</a> works.

My mute notification for Fluxbox and volumeicon

bgstack15 — Sun, 18 Sep 2022 12:42:53 GMT

I use fluxbox, with volumeicon-alsa, and notification-daemon. I could use the bog-standard notifications that volumeicon provides, but the little icons in the notification are really small. So I wrote my own.

In ~/.fluxbox/keys, I react to the volume mute button:

#121 :Exec amixer sset Master,0 toggle
121 :Exec /usr/local/bin/audio-toggle.sh

Instead of just toggling the mute with fluxbox, I call my special script at /usr/local/bin/audio-toggle.sh.

	`#!/bin/sh`
	`# Startdate: 2022-09-12`
	`# For fluxbox`
	`# handle the audio being muted and send cute notification`
	`tmpfile=/run/user/${UID}/audio-toggle-notify-id`
	`AUDIO="muted"`
	`ICON=/usr/share/icons/Adwaita/64x64/status/audio-volume-muted-symbolic.symbolic.png`
	`amixer sset Master,0 toggle 2>&1 \| grep -iqE '\[on\]' 2>/dev/null && {`
	`AUDIO="unmuted"`
	`ICON=/usr/share/icons/Adwaita/64x64/status/audio-volume-high-symbolic.symbolic.png`
	`}`
	`nid="$( cat "${tmpfile}" 1>/dev/null 2>&1 )"`
	`notify-send --transient --expire-time 2000 ${nid:+--replace-id=${nid} }--icon "${ICON}" "Audio ${AUDIO}" --print-id \| tee "${tmpfile}" 1>/dev/null 2>&1`

I wanted the size 64 icons so I could see them! Also, I wanted the black icons because my default theme in notification-daemon is apparently the nice, boring gray that hides white icons.