Skip to content

Commit

Permalink
fix: remove IE8 url parsing workaround (videojs#7334)
Browse files Browse the repository at this point in the history
  • Loading branch information
@gkatsev @jcilliers
gkatsev authored and jcilliers committed Dec 17, 2021
1 parent 8ec61bb commit a6bf0db
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 71 deletions.
89 changes: 46 additions & 43 deletions src/js/utils/url.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,45 +33,33 @@ import window from 'global/window';
/**
* Resolve and parse the elements of a URL.
*
* @param {String} url
* The url to parse
* @function
* @param {String} url
* The url to parse
*
* @return {url:URLObject}
* An object of url details
* @return {url:URLObject}
* An object of url details
*/
export const parseUrl = function(url) {
// This entire method can be replace with URL once we are able to drop IE11

const props = ['protocol', 'hostname', 'port', 'pathname', 'search', 'hash', 'host'];

// add the url to an anchor and let the browser parse the URL
let a = document.createElement('a');
const a = document.createElement('a');

a.href = url;

// IE8 (and 9?) Fix
// ie8 doesn't parse the URL correctly until the anchor is actually
// added to the body, and an innerHTML is needed to trigger the parsing
const addToBody = (a.host === '' && a.protocol !== 'file:');
let div;

if (addToBody) {
div = document.createElement('div');
div.innerHTML = `<a href="${url}"></a>`;
a = div.firstChild;
// prevent the div from affecting layout
div.setAttribute('style', 'display:none; position:absolute;');
document.body.appendChild(div);
}

// Copy the specific URL properties to a new object
// This is also needed for IE8 because the anchor loses its
// This is also needed for IE because the anchor loses its
// properties when it's removed from the dom
const details = {};

for (let i = 0; i < props.length; i++) {
details[props[i]] = a[props[i]];
}

// IE9 adds the port to the host property unlike everyone else. If
// IE adds the port to the host property unlike everyone else. If
// a port identifier is added for standard ports, strip it.
if (details.protocol === 'http:') {
details.host = details.host.replace(/:80$/, '');
Expand All @@ -81,24 +69,29 @@ export const parseUrl = function(url) {
details.host = details.host.replace(/:443$/, '');
}

if (addToBody) {
document.body.removeChild(div);
if (!details.protocol) {
details.protocol = window.location.protocol;
}

/* istanbul ignore if */
if (!details.host) {
details.host = window.location.host;
}

return details;
};

/**
* Get absolute version of relative URL. Used to tell flash correct URL.
* Get absolute version of relative URL. Used to tell Flash the correct URL.
*
* @function
* @param {string} url
* URL to make absolute
*
* @param {string} url
* URL to make absolute
* @return {string}
* Absolute URL
*
* @return {string}
* Absolute URL
*
* @see http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue
* @see http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue
*/
export const getAbsoluteURL = function(url) {
// Check if absolute URL
Expand All @@ -117,16 +110,17 @@ export const getAbsoluteURL = function(url) {
* Returns the extension of the passed file name. It will return an empty string
* if passed an invalid path.
*
* @param {string} path
* The fileName path like '/path/to/file.mp4'
* @function
* @param {string} path
* The fileName path like '/path/to/file.mp4'
*
* @returns {string}
* The extension in lower case or an empty string if no
* extension could be found.
* @return {string}
* The extension in lower case or an empty string if no
* extension could be found.
*/
export const getFileExtension = function(path) {
if (typeof path === 'string') {
const splitPathRe = /^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]+?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/i;
const splitPathRe = /^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]+?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/;
const pathParts = splitPathRe.exec(path);

if (pathParts) {
Expand All @@ -140,14 +134,23 @@ export const getFileExtension = function(path) {
/**
* Returns whether the url passed is a cross domain request or not.
*
* @param {string} url
* The url to check.
* @function
* @param {string} url
* The url to check.
*
* @param {Object} [winLoc]
* the domain to check the url against, defaults to window.location
*
* @param {string} [winLoc.protocol]
* The window location protocol defaults to window.location.protocol
*
* @param {string} [winLoc.host]
* The window location host defaults to window.location.host
*
* @return {boolean}
* Whether it is a cross domain request or not.
* @return {boolean}
* Whether it is a cross domain request or not.
*/
export const isCrossOrigin = function(url) {
const winLoc = window.location;
export const isCrossOrigin = function(url, winLoc = window.location) {
const urlInfo = parseUrl(url);

// IE8 protocol relative urls will return ':' for protocol
Expand Down
49 changes: 21 additions & 28 deletions test/unit/utils/url.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,12 @@
import document from 'global/document';
import window from 'global/window';
import * as Url from '../../../src/js/utils/url.js';
import proxyquireify from 'proxyquireify';
const proxyquire = proxyquireify(require);

QUnit.module('url');
QUnit.test('should parse the details of a url correctly', function(assert) {
assert.equal(Url.parseUrl('#').protocol,
window.location.protocol,
'parsed relative url protocol');
assert.equal(Url.parseUrl('#').protocol, window.location.protocol, 'parsed relative url protocol');
assert.equal(Url.parseUrl('#').host, window.location.host, 'parsed relative url host');
assert.equal(Url.parseUrl('#foo').hash, '#foo', 'parsed relative url hash');

assert.equal(Url.parseUrl('http://example.com').protocol, 'http:', 'parsed example url protocol');
assert.equal(Url.parseUrl('http://example.com').hostname, 'example.com', 'parsed example url hostname');
Expand Down Expand Up @@ -73,28 +70,24 @@ QUnit.test('should get the file extension of the passed path', function(assert)

// isCrossOrigin tests
QUnit.test('isCrossOrigin can identify cross origin urls', function(assert) {
const win = {
location: {}
};
const Url_ = proxyquire('../../../src/js/utils/url.js', {
'global/window': win
});

win.location.protocol = window.location.protocol;
win.location.host = window.location.host;
assert.ok(!Url_.isCrossOrigin(`http://${win.location.host}/example.vtt`), 'http://google.com from http://google.com is not cross origin');
assert.ok(Url_.isCrossOrigin(`https://${win.location.host}/example.vtt`), 'https://google.com from http://google.com is cross origin');
assert.ok(!Url_.isCrossOrigin(`//${win.location.host}/example.vtt`), '//google.com from http://google.com is not cross origin');
assert.ok(Url_.isCrossOrigin('http://example.com/example.vtt'), 'http://example.com from http://google.com is cross origin');
assert.ok(Url_.isCrossOrigin('https://example.com/example.vtt'), 'https://example.com from http://google.com is cross origin');
assert.ok(Url_.isCrossOrigin('//example.com/example.vtt'), '//example.com from http://google.com is cross origin');

assert.ok(!Url.isCrossOrigin(`http://${window.location.host}/example.vtt`), 'http://google.com from http://google.com is not cross origin');
assert.ok(Url.isCrossOrigin(`https://${window.location.host}/example.vtt`), 'https://google.com from http://google.com is cross origin');
assert.ok(!Url.isCrossOrigin(`//${window.location.host}/example.vtt`), '//google.com from http://google.com is not cross origin');
assert.ok(Url.isCrossOrigin('http://example.com/example.vtt'), 'http://example.com from http://google.com is cross origin');
assert.ok(Url.isCrossOrigin('https://example.com/example.vtt'), 'https://example.com from http://google.com is cross origin');
assert.ok(Url.isCrossOrigin('//example.com/example.vtt'), '//example.com from http://google.com is cross origin');
// we cannot test that relative urls work on https, though
assert.ok(!Url_.isCrossOrigin('example.vtt'), 'relative url is not cross origin');

win.location.protocol = 'https:';
win.location.host = 'google.com';
assert.ok(Url_.isCrossOrigin('http://google.com/example.vtt'), 'http://google.com from https://google.com is cross origin');
assert.ok(Url_.isCrossOrigin('http://example.com/example.vtt'), 'http://example.com from https://google.com is cross origin');
assert.ok(Url_.isCrossOrigin('https://example.com/example.vtt'), 'https://example.com from https://google.com is cross origin');
assert.ok(Url_.isCrossOrigin('//example.com/example.vtt'), '//example.com from https://google.com is cross origin');
assert.ok(!Url.isCrossOrigin('example.vtt'), 'relative url is not cross origin');

const location = {
protocol: 'https:',
host: 'google.com'
};

assert.ok(!Url.isCrossOrigin('https://google.com/example.vtt', location), 'http://google.com from https://google.com is not cross origin');
assert.ok(Url.isCrossOrigin('http://google.com/example.vtt', location), 'http://google.com from https://google.com is cross origin');
assert.ok(Url.isCrossOrigin('http://example.com/example.vtt', location), 'http://example.com from https://google.com is cross origin');
assert.ok(Url.isCrossOrigin('https://example.com/example.vtt', location), 'https://example.com from https://google.com is cross origin');
assert.ok(Url.isCrossOrigin('//example.com/example.vtt', location), '//example.com from https://google.com is cross origin');
});

0 comments on commit a6bf0db

Please sign in to comment.