how to protect location.href from cross site scripting in javascript?

This code should work only in firefox since Proxy isn't implemented in all browsers

What you can do is to replace the original location object with a proxied one where you add some logic to your proxy to check for allowed value for location. this will not protect against the direct modification of the original object (location) but if you use only the proxied object in your code you should be fine.

// suppose we are in example.com
let validator = {
   set: function(obj, prop, val) {
     if (prop === 'href') {
       if(typeof val != 'string'){
         throw new TypeError('href must be string.');
       }
       if (!val.startsWith("https://example.com/")) {
         throw new Error('XSS');
       }
     }
    obj[prop] = val;
    return true;
   },
   get: function(obj, prop){
    return prop in obj?
        obj[prop] :
        null;
   }
};
let proxiedLocation = new Proxy(location, validator);
console.log(proxiedLocation.href);// work same as location.href
proxiedLocation.href = "https://example.com/page1";// work fine
proxiedLocation.href = "https://example.net/page1";// cause exception

The Cross-site Scripting occurs when the user can put data in the webpage or get session data for example.

HOW PROTECT

You never allow inject code in your webpage. So, if you have a form, check it in the server and parse it before print in your page.

You shouldn't allow that the page content is changed by the href. You always escape the data before!.

Read this answer about location.href: https://stackoverflow.com/a/24089350/2389232

SAMPLE:

You have a iframe what changes with a GET variable:

sample.tld/index.jsp?iframe=none.jsp

I can inject a script to your iframe so you should protect it with escape characters:

// Escape the characters in the server and send it to the client.
// So the variable GET iframe will be valid