XSS attack on location map

Question

I'm working in Drupal and I have a page with an input field to search for your location. Now, it's possible to do a XSS attack and I'm trying to fix it with a sanitizer function, but it does not seem to do anything and I don't understand why. Can any of you review the code and help me out? It's for my internship and it would be great if I can fix this problem. This is my code atm, and I get a console of this: Sanitized input: alert("XSS attack!");. It looks like it works, but I still get an alert in my browser if I put this in the input field: <script>alert("XSS attack!");</script>

function sanitizeInput(input) {
        if (typeof input !== 'string') {
          return '';
        }

        // Remove any HTML tags and attributes using a regular expression
        var sanitizedInput = input.replace(/<[^>]*>?/gm, '');

        // Escape HTML entities
        sanitizedInput = sanitizedInput.replace(/[&<>"']/g, function(match) {
          return {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#39;'
          }[match];
        });

        return sanitizedInput;
      }
      
      function onPlaceChanged() {
        var place = autocomplete.getPlace();
        var input = document.getElementById('autocomplete').value;

        if (place === undefined || input === '') {
          return;
        }

        // Sanitize input to prevent XSS attacks
        var sanitizedInput = sanitizeInput(input);
        console.log('Sanitized input:', sanitizedInput);

        if (place !== undefined && place.geometry) {

          var coordinates = {
            lat: place.geometry.location.lat(),
            lng: place.geometry.location.lng()
          };

          findClosestOffice(coordinates);
        } else {
          var locationName;
          if (place !== undefined) {
            locationName = place.name;
          } else {
            locationName = input;
          }

          var geocoder = new google.maps.Geocoder();
          geocoder.geocode({
            componentRestrictions: countryRestrict,
            'address': locationName
          }, function (results, status) {
            if (status === 'OK') {
              var coordinates = {
                lat: results[0].geometry.location.lat(),
                lng: results[0].geometry.location.lng()
              };
              findClosestOffice(coordinates);
            }
          });
        }

        dataLayer.push({
          'event': 'officeSearch',
          'searchTerm': input
        });

        if (input){
          var location = input.split(', ');
          if(offices_tags.hasClass('d-none')) {
            offices_tags.removeClass('d-none');
          }
          offices_tag_label.html(location[0]);
        } else {
          offices_tag_label.html('');
        }

        return;
      } 

Answer 1

I did not use my sanitizedInput correctly. I changed the 'input' variables to 'sanitizedInput' and now it works.