i want to understand more about WebRTC security when using vpn. id like to know if it is more secure with VPN than without... or even if its recommended to use WebRTC with VPN.

i created a webrtc demo: https://chat.positive-intentions.com/#/webrtc (the corresponding code its created with: https://github.com/positive-intentions/chat/blob/staging/src/components/pages/webrtc/WebRTC.jsx)

if i generate a "WebRTC offer" then i see a bunch of information including my IP address.

if i do the same with VPN, i see that my ip address isnt in that payload.

following the information here: https://thehackernews.com/2015/02/webrtc-leaks-vpn-ip-address.html?m=1

and using the demo here: https://ipleak.net/

it seems even with vpn, the local ISP ip seems detected.

a recurring concern ive had on reddit about the security of my app is that webrtc exposes ip addresses. im investigating using the app with vpn. it seems to work like normal.

in the example details given above, i see while the local ISP IP is exposed, the personal ip address is still hidden. im sure what is exposed there is not worthless, but it could help users with privacy and security.

on the back of this investigation id like to see if i can add something like a toggle in my app called "enforce VPN" which will first check to see if you are on a vpn, and if you are, open the rest of the app.

my app is using peerjs-server as the connection broker. this is a third party i have no contractual agreement to provide me with a service. it could help to hide your IP from this service.

I was watching a youtube video explaining HTMX targets and using it to pull HTML from a URL and push the HTML into a div element.

https://htmx.org/docs/#targets

This immediately reminded me of JQuery's .load() which can pull a URL and up the HTML in an element.

$( "#result" ).load( "ajax/test.html" ); https://api.jquery.com/load/

What caught me off guard is how the speaker talked about this being an entirely new technique, pulling HTML instead of JSON from an API.

It made me realize that new developers who started after the creation of ReactJS, SPA/PWA have no concept of AJAX and the interesting ways developers used to merge the client and server.

I have no interest in going back to a JQuery dominated world... or the chaos of JS development before JQuery, but it's interesting to see that what is old is new again.

chat.positive-intentions.com

github.com/positive-intentions/chat

I'm excited to share with you an instant messaging application I've been working on that might interest you. This is a chat app designed to work within your browser, with a focus on browser-based security and decentralization.

What makes this app unique is that it doesn't rely on messaging servers to function. Instead, it works based on your browser's javascript capabilities.

Here are some features of the app:

• Encrypted messaging: Your messages are encrypted, making them more secure.
• File sharing: Easily share files using WebRTC technology and QR codes.
• Voice and video calls: Connect with others through voice and video calls.
• Shared virtual space: Explore a shared mixed-reality space.
• Image board: Browse and share images in a scrollable format.

Your security is a top priority. Here's how the app keeps you safe:

• Decentralized authentication: No central server is required for login, making it harder for anyone to gain unauthorized access.
• Unique IDs: Your ID is cryptographically random, adding an extra layer of security.
• End-to-end encryption: Your messages are encrypted from your device to the recipient's device, ensuring only you and the recipient can read them.
• Local data storage: Your data is stored only on your device, not on any external servers.
• Self-hostable: You have the option to host the app on your own server if you prefer.

A decentralized infrastructure has many unique challenges and this is a unique approach. Ive taken previous feedback and made updates. Its important to note, the app is an unstable proof-of-concept and a work-in-progress. Its important to understand at this early stage in the project, there will be breaking changes. It is not ready to replace any existing apps or services. While the app is aiming to be an encrypted and secure chat system, the project is not mature enough to have been reviewed by security professionals and should not be considered encrypted or secure. it is provided for testing/review/feedback purposes.

Looking forward to hearing your thoughts!

The live app

About the app

Even more about the app

Docs

Subreddit

I can do this manually using the following: Right-click on the video player, copy debug info, paste into text editor, and Ctrl+F for "addocid".

What is the best way to do this automatically?

By modifying an ad accelerator I found, I can reliably detect when a pre-roll ad is playing:

function handleVideoAd() {
	const video = document.querySelector('video');
	const adElement = document.querySelector('.video-ads.ytp-ad-module');
	if (video && adElement && adElement.children.length > 0) {
		alert('advertisement found!')
	}
}

function initializeAdHandling() {
	handleVideoAd();
	const observer = new MutationObserver(handleVideoAd);
	observer.observe(document.body, { childList: true, subtree: true });
}
initializeAdHandling()

If I had the video ID, I could then open the video in a new tab using something like:

window.open('https://www.youtube.com/watch?v=adVideoID');

However, I am at a bit of a loss as to how to extract the ad video ID itself.

In the browser inspector, the only places I can find the ad video ID are:

1. Within the URL for ytp-cued-thumbnail-overlay-image
2. As adVideoId within var ytInitialPlayerResponse, which itself is within <script nonce="rwc3vYf3vRLEyNQKsJOgig">, where rwc3vYf3vRLEyNQKsJOgig changes with every video.

What would be the best way to extract the advertisement video ID?

Apologies for if I'm going about this the wrong way. I am (very!) new to JavaScript, but interested in learning. Please let me know if I've broken any community rules, or committed any other sort of faux pas. Thanks! :)