/**

* @file validate.js

* @description This file contains the code to validate the VTT data.

*/

import DOMPurify from 'dompurify';

/** PRE-SANITIZED FUNCTIONS

* Some of the VTT attributes need to be transformed before being sanitized by DOMPurify.

* @namespace preProcessing

*/

var preProcessing = {

/**

* Transforms tags with class names separated by dots into tags with a class attribute containing space-separated class names.

* @memberof preProcessing

* @param {string} vttContent - The content of the VTT.

* @returns {string} - The VTT content with processed tags.

*/

transformCSSClasses: function (vttContent) {

// This function should only be passed one cue at a time.

// Throw an error if the string checked is more than 1000 characters.

if ( vttContent.length > 1000 ) {

throw new Error( "Input too long" );

}

return vttContent.replace(

/<(v|c|b|i|u|lang|ruby)\.([\w.]+)([^>]*)>/g,

function (_, tag, cssClasses, otherAttrs) {

var classAttr = cssClasses.replace(/\./g, " ");

return `<${tag} class="${classAttr}"${otherAttrs}>`;

}

);

},

/**

* Transforms <lang> tags by adding a lang attribute with the language code.

* @memberof preProcessing

* @param {string} content - The content with processed CSS classes.

* @returns {string} - The content with <lang> tags transformed.

*/

transformLangTags: function (content) {

return content.replace(

/<lang\s+([\w-]+)([^>]*)>/g,

function (_, langCode, otherAttrs) {

return '<lang lang="' + langCode + '"' + otherAttrs + ">";

}

);

},

/**

* Transforms <v> tags by extracting any non-attribute text as a `title` attribute,

* retains existing attributes (except class), and preserves the class attribute if present.

* Example: <v John class="foo" data-x="y"> becomes <v title="John" data-x="y" class="foo">

*

* @function

* @memberof preProcessing

* @param {string} content - The string content containing <v> tags to process.

* @returns {string} The content with <v> tags transformed to include a title attribute and preserved attributes.

*/

transformVTags: function (content) {

return content.replace(/<v\s+([^>]*?)>/g, function (_, tagAttributes) {

var classMatch = tagAttributes.match(/class="([^"]*)"/);

var classAttr = classMatch ? classMatch[0] : "";

var nonClassAttributes = tagAttributes

.replace(/class="[^"]*"/, "")

.trim()

.split(/\s+/);

var attributes = [];

var titleParts = [];

// Iterate over each token of the tag content

nonClassAttributes.forEach(function (token) {

if (token.indexOf("=") !== -1) {

attributes.push(token);

} else {

titleParts.push(token);

}

});

var title = titleParts.join(" ");

var newTag = "<v";

if (title) {

newTag += ' title="' + title + '"';

}

if (attributes.length > 0) {

newTag += " " + attributes.join(" ");

}

if (classAttr) {

newTag += " " + classAttr;

}

newTag += ">";

return newTag;

});

},

};

/** POST-SANITIZED FUNCTIONS

* After sanitizing the VTT data, some tags need to be transformed back to their original form.

* @namespace postProcessing

*/

var postProcessing = {

/**

* Post-processes <c> tags by converting class attributes to dot-separated class names.

* @memberof postProcessing

* @param {string} vttContent - The VTT content to be processed.

* @returns {string} - The VTT content with processed <c> tags.

*/

postprocessCTag: function (vttContent) {

return vttContent.replace(

/<c class="([\w\s]+)">/g,

function (_, classNames) {

var classes = classNames.replace(/ /g, ".");

return "<c." + classes + ">";

}

);

},

/**

* * Post-processes <v> tags by converting class attributes, no matter where found in the attribute order, to dot-separated class names.

* For example, <v class="foo bar" title="John"> becomes <v.foo.bar title="John">.

* Removes the class attribute and appends other attributes after the class names.

*

* @function

* @memberof postProcessing

* @param {string} vttContent - The VTT content to be processed.

* @returns {string} - The VTT content with processed <v> tags.

*/

postprocessVTag: function (vttContent) {

return vttContent.replace(

/<v([^>]*)class="([\w\s]+)"([^>]*)>/g,

function (_, beforeClass, classNames, afterClass) {

var classes = classNames.trim().split(/\s+/).join(".");

// Rebuild the tag: <v.{classes}{other attributes}>

// Remove class="..." from attributes

var attrs = (beforeClass + afterClass)

.replace(/\s*class="[\w\s]+"/, "")

.trim();

return "<v." + classes + (attrs ? " " + attrs : "") + ">";

}

);

},

/**

* Post-processes <lang> tags by removing the lang attribute and placing the language code directly in the tag.

* @memberof postProcessing

* @param {string} vttContent - The VTT content to be processed.

* @returns {string} - The VTT content with processed <lang> tags.

*/

postprocessLangTag: function (vttContent) {

return vttContent.replace(

/<lang lang="([\w-]+)"([^>]*)>/g,

function (_, langCode, otherAttrs) {

return "<lang " + langCode + otherAttrs + ">";

}

);

},

};

/**

* Preprocesses, sanitizes and post-processes VTT content as well as other utility functions.

* @namespace validate

*/

var validate = {

/**

* Sets up the VTT content before sanitizing by transforming tags.

* This way DOM purify will process the tags correctly.

* @memberof validate

* @param {string} vttContent - The original content of the VTT.

* @returns {string} - The VTT content for the next and final step of preprocessing.

*/

preProcessVttContent: function (vttContent) {

var processedCSS = preProcessing.transformCSSClasses(vttContent);

var processedLang = preProcessing.transformLangTags(processedCSS);

var processedVTags = preProcessing.transformVTags(processedLang);

return processedVTags;

},

/**

* Post-processes the sanitized VTT data by converting class attributes to dot-separated class names and other transformations.

* @memberof validate

* @param {string} sanitizedVttContent - The sanitized VTT content to be post-processed.

* @param {string} originalVttContent - The original VTT content before sanitization.

* @returns {string} - The post-processed VTT content.

*/

postProcessVttContent: function (sanitizedVttContent, originalVttContent) {

var processedCTags = postProcessing.postprocessCTag(sanitizedVttContent);

var processedVTags = postProcessing.postprocessVTag(processedCTags);

var processedLangTags = postProcessing.postprocessLangTag(processedVTags);

var arrowReplaced = processedLangTags.replace(/--&gt;/g, "-->");

var timestampTagReplaced = arrowReplaced.replace(/&lt;([\d:.]+)&gt;/g, '<$1>');

var finalContent = timestampTagReplaced.replace(

/<\/v>/g,

function (match, offset) {

return originalVttContent.indexOf(match, offset) !== -1 ? match : "";

}

);

return finalContent;

},

/**

* Sanitizes the VTT data by removing unwanted tags and attributes, and then post-processes it.

* @memberof validate

* @param {string} vttContent - The VTT content to be sanitized and post-processed.

* @returns {string} - The fully processed VTT content.

*/

sanitizeVttContent: function (vttContent) {

if (vttContent === null || vttContent === undefined) {

return "";

}

var preSanitizedVttContent = validate.preProcessVttContent(vttContent);

var config = {

ALLOWED_TAGS: ["b", "i", "u", "v", "c", "lang", "ruby", "rt", "rp"],

ALLOWED_ATTR: ["title", "class", "lang"],

KEEP_CONTENT: true,

};

var sanitizedVttContent = DOMPurify.sanitize(

preSanitizedVttContent,

config

);

return validate.postProcessVttContent(sanitizedVttContent, vttContent);

},

// Utility validation functions

isProtocolSafe: function (url) {

//creates a new URL object for analysis to check if the protocol is http or https

//returns true if there is a match false otherwise

try {

const parsedUrl = new URL(url, window.location.origin); // Resolve relative URLs

return ["http:", "https:"].includes(parsedUrl.protocol); // Allow only HTTP and HTTPS

} catch (e) {

return false; // Invalid URL

}

},

};

// End of validate.js

export default validate;