javascriptxss

Is there a way to prevent a client side JS injection into my website?


I have my website, which a extension injects some JavaScript into my website. I found that I could delete the functions and variables (That are injected in JS) before my website loads.
However, I was wondering if there was a way to prevent the injecting JS on my website in the first place. I am using GitHub pages.

I have tried resetting the DOM tree, but I kept getting errors that I could not do this, I don't have the error message right now, but I'll get it soon. (Sorry about that)

flushFile = document.createElement("script");
    flushFile.setAttribute("src", "flush.js");
    document.head.appendChild(flushFile); //Loads flush.js into the DOM tree, overwriting all functions and variables of the filter agent, in browser memory to null

I am aware that most XSS attacks are on server side, but I am not worrying about that (for now). I just need to fix something like client side. If I disable all JS, yes that defeats this, but my nav bar would break, and lots of other things on my website. (https://ranchodvt.github.io/Comp-V3/index.html)

Here's my code of deleting all the variables and functions:

document.addEventListener('DOMContentLoaded', () => {
    
    function timeout(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    async function NotBlockingMe() {
        await timeout(75);
        console.clear();
        console.log("=====");

        // Functions
        var getLoaderPolicy = function () { }    // no-op function;
        var loadES6 = function () { }    // no-op function;
        var isYoutube = function () { }    // no-op function;
        var checkCurrentSite = function () { }    // no-op function;
        var getHardBlockPolicy = function () { }    // no-op function;
        var hardBlock = function () { }    // no-op function;
        var stopVideo = function () { }    // no-op function;
        var updateLocation = function () { }    // no-op function;

        // Variables
        var hardBlockPolicy = null;
        var prevURL = null;

        console.log("=====");

        // re-assign
        window.isYoutube = function () { }    // no-op function
        window.loadES6 = function () { }    // no-op function
        window.checkCurrentSite = function () { }    // no-op function
        window.getHardBlockPolicy = function () { }    // no-op function
        window.hardBlock = function () { }    // no-op function
        window.stopVideo = function () { }    // no-op function
        window.updateLocation = function () { }    // no-op function
        window.initFlagScanning = function () { }    // no-op function
        window.getLoaderPolicy = function () { }    // no-op function
        window.loaderPolicy = function () { }    // no-op function

        console.log("Just incase, Functions deleted again.");

        console.log("=====");
    }
NotBlockingMe()
// Other website code...
}

Sorry that it wasn't clear, All I need is to prevent injecting the js file, or deleting the file. If I can't do that, and deleting the vars is best, then that's okay. If I forgot something obvious, or you have a question, please don't hesitate to ask.
I'm new to website design.


Solution

  • I'll havea go at helping.

    A lot of the process is just validating inputs and escaping characters

    Thats all there really is to this task, regular expressions and maintaining whitelists/blacklists of disallowed content.

    Appreciating your only trying to solve the frontend, but it is most important to do this at the api and database level as anyone can just scrape the request and bypass any frontend form validations no matter how hard you go at it.

    prehaps you're really trying to solve the issue with the site being blocked? in that case it'll be helpful to see the error reason?