Filtering out any inappropriate characters from the XML data before processing it with the XMLSerializer function

Question

Filtering out any inappropriate characters from the XML data before processing it with the XMLSerializer function

I am currently working on a solution to store user-input in an XML document using client-side JavaScript and then transmit it to the server for persistence.

One specific issue that I encountered was when a user input text containing an STX character (0x2), which caused problems with serialization. The XMLSerializer did not escape the STX character properly, resulting in invalid XML output. It is possible that the .attr() call should have handled the escaping, but regardless, incorrect XML was generated.

I have noticed inconsistencies with the output of XMLSerializer() in the browser, as it does not consistently produce well-formed XML that would satisfy even the browser's DOMParser().

A concrete example illustrating the problem with encoding the STX character can be seen below:

> doc = $.parseXML('<?xml version="1.0" encoding="utf-8" ?>\n<elem></elem>');
    #document
> $(doc).find("elem").attr("someattr", String.fromCharCode(0x2));
    [ <elem someattr=""></elem> ]
> serializedDoc = new XMLSerializer().serializeToString(doc);
    "<?xml version="1.0" encoding="utf-8"?><elem someattr=""/></elem>"
> $.parseXML(serializedDoc);
    Error: Invalid XML: <?xml version="1.0" encoding="utf-8"?><elem someattr=""/></elem>

I need guidance on how to create an XML document in the browser, where parameters are determined by user input, ensuring that it will always be well-formed with proper escaping. Note that support for IE8 or IE7 is not required.

(While I do validate the XML on the server side, if the browser sends a document that is not well-formed, the server can only reject it, which is not ideal for the user).

javascript xml xmlserializer well-formed

Answer 1

Answer №1

Introducing a helpful function called sanitizeStringForXML(). This function can be utilized to clean strings before usage or alternatively, there is a derivative function named removeInvalidCharacters(xmlNode). By passing a DOM tree to this function, it will automatically sanitize attributes and textNodes to ensure safe storage.

var stringWithSTX = "Bad" + String.fromCharCode(2) + "News";
var xmlNode = $("<myelem/>").attr("badattr", stringWithSTX);

var serializer = new XMLSerializer();
var invalidXML = serializer.serializeToString(xmlNode);

// Time to cleanse the data:
removeInvalidCharacters(xmlNode);
var validXML = serializer.serializeToString(xmlNode);

This approach was crafted based on a list of characters outlined in the non-restricted characters section of a Wikipedia article. Nevertheless, the supplementary planes necessitate 5-hex-digit unicode characters which are not currently supported by Javascript regex. As a temporary measure, these characters are simply removed by the function (don't worry, you're not missing much...):

// WARNING: Unicode characters in supplementary planes (0x10000 and higher) 
// will be excluded by this function. Explore what you might miss out on (like emojis and hieroglyphics) at:
// http://en.wikipedia.org/wiki/Plane_(Unicode)#Supplementary_Multilingual_Plane
var NOT_SAFE_IN_XML_1_0 = /[^\x09\x0A\x0D\x20-\xFF\x85\xA0-\uD7FF\uE000-\uFDCF\uFDE0-\uFFFD]/gm;
function sanitizeStringForXML(theString) {
    "use strict";
    return theString.replace(NOT_SAFE_IN_XML_1_0, '');
}

function removeInvalidCharacters(node) {
    "use strict";

    if (node.attributes) {
        for (var i = 0; i < node.attributes.length; i++) {
            var attribute = node.attributes[i];
            if (attribute.nodeValue) {
                attribute.nodeValue = sanitizeStringForXML(attribute.nodeValue);
            }
        }
    }
    if (node.childNodes) {
        for (var i = 0; i < node.childNodes.length; i++) {
            var childNode = node.childNodes[i];
            if (childNode.nodeType == 1 /* ELEMENT_NODE */) {
                removeInvalidCharacters(childNode);
            } else if (childNode.nodeType == 3 /* TEXT_NODE */) {
                if (childNode.nodeValue) {
                    childNode.nodeValue = sanitizeStringForXML(childNode.nodeValue);
                }
            }
        }
    }
}

Please note that this process exclusively targets nodeValues within attributes and textNodes for character sanitization. It does not extend to checking tag names, attribute names, comments, etc.

Answer 2

Introducing a helpful function called sanitizeStringForXML(). This function can be utilized to clean strings before usage or alternatively, there is a derivative function named removeInvalidCharacters(xmlNode). By passing a DOM tree to this function, it will automatically sanitize attributes and textNodes to ensure safe storage.

var stringWithSTX = "Bad" + String.fromCharCode(2) + "News";
var xmlNode = $("<myelem/>").attr("badattr", stringWithSTX);

var serializer = new XMLSerializer();
var invalidXML = serializer.serializeToString(xmlNode);

// Time to cleanse the data:
removeInvalidCharacters(xmlNode);
var validXML = serializer.serializeToString(xmlNode);

This approach was crafted based on a list of characters outlined in the non-restricted characters section of a Wikipedia article. Nevertheless, the supplementary planes necessitate 5-hex-digit unicode characters which are not currently supported by Javascript regex. As a temporary measure, these characters are simply removed by the function (don't worry, you're not missing much...):

// WARNING: Unicode characters in supplementary planes (0x10000 and higher) 
// will be excluded by this function. Explore what you might miss out on (like emojis and hieroglyphics) at:
// http://en.wikipedia.org/wiki/Plane_(Unicode)#Supplementary_Multilingual_Plane
var NOT_SAFE_IN_XML_1_0 = /[^\x09\x0A\x0D\x20-\xFF\x85\xA0-\uD7FF\uE000-\uFDCF\uFDE0-\uFFFD]/gm;
function sanitizeStringForXML(theString) {
    "use strict";
    return theString.replace(NOT_SAFE_IN_XML_1_0, '');
}

function removeInvalidCharacters(node) {
    "use strict";

    if (node.attributes) {
        for (var i = 0; i < node.attributes.length; i++) {
            var attribute = node.attributes[i];
            if (attribute.nodeValue) {
                attribute.nodeValue = sanitizeStringForXML(attribute.nodeValue);
            }
        }
    }
    if (node.childNodes) {
        for (var i = 0; i < node.childNodes.length; i++) {
            var childNode = node.childNodes[i];
            if (childNode.nodeType == 1 /* ELEMENT_NODE */) {
                removeInvalidCharacters(childNode);
            } else if (childNode.nodeType == 3 /* TEXT_NODE */) {
                if (childNode.nodeValue) {
                    childNode.nodeValue = sanitizeStringForXML(childNode.nodeValue);
                }
            }
        }
    }
}

Please note that this process exclusively targets nodeValues within attributes and textNodes for character sanitization. It does not extend to checking tag names, attribute names, comments, etc.

Answer 3

Answer №2

Take a look at this helpful resource: https://gist.github.com/john-smith/c546279992abdeef636da2218c3444fe,

This gist provides a great example of how to use the following code snippet:

const cleanedXml = removeInvalidXMLCharacters(INPUT_XML_STRING, true);

Answer 4

Take a look at this helpful resource: https://gist.github.com/john-smith/c546279992abdeef636da2218c3444fe,

This gist provides a great example of how to use the following code snippet:

const cleanedXml = removeInvalidXMLCharacters(INPUT_XML_STRING, true);

Filtering out any inappropriate characters from the XML data before processing it with the XMLSerializer function

Answer №1

Answer №2

Similar questions

Nested loop combining Callback and Promise with two API requests

Guide to comparing 2 arrays and determining the quantity of identical elements

What is the best way to show the associated ul tag?

Utilize a while loop in JavaScript to trigger a message when a variable dips below zero

Adjust the button's background hue upon clicking (on a Wix platform)

Here's a guide on using a button to toggle the display of password value in Angular, allowing users to easily hide

Navigating Parent Menus While Submenus are Expanded in React Using Material-UI

Is it possible to execute "green arrow" unit tests directly with Mocha in IntelliJ IDEA, even when Karma and Mocha are both installed?

Struggling to retrieve Json data through Ajax in Rails 5

Having trouble parsing XML with simplexml?

Creating Functional Tabs Using CSS and JavaScript

What are the best practices for managing mouse events in AlpineJS when working with my menu?

What is the method for obtaining receipt numbers in sequential order, such as the format AB0810001?

The controller is providing a null response following an ajax Post request

Failure to properly format the correct regular expression match in JSON using JavaScript

Accessing files from various directories within my project

Alternative solution to fix navigation issue in Flex 4.5 when navigatetoURL is not functioning as intended

Modify KeyboardDatePicker to display the full name of the day and month

jQuery Refuses to Perform Animation

Inconsistency with Mobile Viewport Problem