From d39167c6830a8cf94043df765c8c09a7ee5ecf1f Mon Sep 17 00:00:00 2001 From: Cyrus Chan Date: Wed, 20 Mar 2019 15:14:55 -0700 Subject: [PATCH 1/7] fix(client): Includes attributes like type in script tags when running in parent mode without iframe Back in #2542, a third option to run tests without iframe is implemented, mostly for lightweight browser. This fix is to include file type so files like .css would able to load properly. --- client/karma.js | 20 ++++++++++++++++++-- lib/middleware/karma.js | 5 +++-- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/client/karma.js b/client/karma.js index 97b3b62fe..3f2591089 100644 --- a/client/karma.js +++ b/client/karma.js @@ -66,8 +66,24 @@ function Karma (socket, iframe, opener, navigator, location) { } else if (url !== 'about:blank') { var loadScript = function (idx) { if (idx < window.__karma__.scriptUrls.length) { - var ele = document.createElement('script') - ele.src = window.__karma__.scriptUrls[idx] + var parser = new DOMParser() + // Browsers don't like character <> in string when assigning + // stringify json into a variable, so we replace them with escape + // hex + var string = window.__karma__.scriptUrls[idx] + .replace(/\\x3C/g, '<') + .replace(/\\x3E/g, '>') + var doc = parser.parseFromString(string, 'text/html') + var ele = doc.head.firstChild || doc.body.firstChild + // script elements created by DomParser is marked as unexecutable, + // create a new script element manually and copy necessary properties + // so it is executable + if (ele.tagName && ele.tagName.toLowerCase() === 'script') { + var tmp = ele + ele = document.createElement('script') + ele.src = tmp.src + ele.crossOrigin = tmp.crossorigin + } ele.onload = function () { loadScript(idx + 1) } diff --git a/lib/middleware/karma.js b/lib/middleware/karma.js index 358e29ab7..479525aa3 100644 --- a/lib/middleware/karma.js +++ b/lib/middleware/karma.js @@ -192,8 +192,6 @@ function createKarmaMiddleware ( } } - scriptUrls.push(filePath) - if (fileType === 'css') { scriptTags.push(``) } else if (fileType === 'dom') { @@ -206,6 +204,9 @@ function createKarmaMiddleware ( scriptTags.push(``) } } + for (const script of scriptTags) { + scriptUrls.push(script.replace(//g, '\\x3E')) + } const mappings = data.includes('%MAPPINGS%') ? files.served.map((file) => { const filePath = filePathToUrlPath(file.path, basePath, urlRoot, proxyPath) From cd0bf3cbb290b74e413b5d309143e4a978106ff1 Mon Sep 17 00:00:00 2001 From: Cyrus Chan Date: Wed, 20 Mar 2019 15:14:55 -0700 Subject: [PATCH 2/7] fix(client): Enable loading different file types when running in parent mode without iframe Back in #2542, a third option to run tests without iframe is implemented, mostly for lightweight browser. It only allows script element to be loaded dynamically. This fix includes file type like .css to be loaded properly. --- client/karma.js | 20 ++++++++++++++++++-- lib/middleware/karma.js | 5 +++-- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/client/karma.js b/client/karma.js index 97b3b62fe..3f2591089 100644 --- a/client/karma.js +++ b/client/karma.js @@ -66,8 +66,24 @@ function Karma (socket, iframe, opener, navigator, location) { } else if (url !== 'about:blank') { var loadScript = function (idx) { if (idx < window.__karma__.scriptUrls.length) { - var ele = document.createElement('script') - ele.src = window.__karma__.scriptUrls[idx] + var parser = new DOMParser() + // Browsers don't like character <> in string when assigning + // stringify json into a variable, so we replace them with escape + // hex + var string = window.__karma__.scriptUrls[idx] + .replace(/\\x3C/g, '<') + .replace(/\\x3E/g, '>') + var doc = parser.parseFromString(string, 'text/html') + var ele = doc.head.firstChild || doc.body.firstChild + // script elements created by DomParser is marked as unexecutable, + // create a new script element manually and copy necessary properties + // so it is executable + if (ele.tagName && ele.tagName.toLowerCase() === 'script') { + var tmp = ele + ele = document.createElement('script') + ele.src = tmp.src + ele.crossOrigin = tmp.crossorigin + } ele.onload = function () { loadScript(idx + 1) } diff --git a/lib/middleware/karma.js b/lib/middleware/karma.js index 358e29ab7..479525aa3 100644 --- a/lib/middleware/karma.js +++ b/lib/middleware/karma.js @@ -192,8 +192,6 @@ function createKarmaMiddleware ( } } - scriptUrls.push(filePath) - if (fileType === 'css') { scriptTags.push(``) } else if (fileType === 'dom') { @@ -206,6 +204,9 @@ function createKarmaMiddleware ( scriptTags.push(``) } } + for (const script of scriptTags) { + scriptUrls.push(script.replace(//g, '\\x3E')) + } const mappings = data.includes('%MAPPINGS%') ? files.served.map((file) => { const filePath = filePathToUrlPath(file.path, basePath, urlRoot, proxyPath) From 5fd685ab863db676aa4ccc55e285bb37cda812b7 Mon Sep 17 00:00:00 2001 From: Cyrus Chan Date: Fri, 22 Mar 2019 14:31:13 -0700 Subject: [PATCH 3/7] fix(client): Update comments on escaping character with special roles in HTML --- client/karma.js | 6 ++---- lib/middleware/karma.js | 2 ++ 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/karma.js b/client/karma.js index 3f2591089..c3060f543 100644 --- a/client/karma.js +++ b/client/karma.js @@ -67,15 +67,13 @@ function Karma (socket, iframe, opener, navigator, location) { var loadScript = function (idx) { if (idx < window.__karma__.scriptUrls.length) { var parser = new DOMParser() - // Browsers don't like character <> in string when assigning - // stringify json into a variable, so we replace them with escape - // hex + // Revert escaped characters with special roles in HTML before parsing var string = window.__karma__.scriptUrls[idx] .replace(/\\x3C/g, '<') .replace(/\\x3E/g, '>') var doc = parser.parseFromString(string, 'text/html') var ele = doc.head.firstChild || doc.body.firstChild - // script elements created by DomParser is marked as unexecutable, + // script elements created by DomParser are marked as unexecutable, // create a new script element manually and copy necessary properties // so it is executable if (ele.tagName && ele.tagName.toLowerCase() === 'script') { diff --git a/lib/middleware/karma.js b/lib/middleware/karma.js index 479525aa3..d97d2902b 100644 --- a/lib/middleware/karma.js +++ b/lib/middleware/karma.js @@ -205,6 +205,8 @@ function createKarmaMiddleware ( } } for (const script of scriptTags) { + // Escape characters with special roles (tags) in HTML. Open angle brackets are parsed as tags + // immediately, even if it is within double quotations, in browsers scriptUrls.push(script.replace(//g, '\\x3E')) } From cddb93c5891fc3f916f9a6e8ed332ff723bc580e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CCyrus?= <“cyrusc@google.com”> Date: Fri, 12 Apr 2019 13:35:28 -0700 Subject: [PATCH 4/7] fix(client): Use conditions to make the require changes. Add conditions to check whether it is serving client_with_context.html to construct the scriptUrl Fixes #3289 --- client/karma.js | 3 ++- lib/middleware/karma.js | 18 +++++++++++++----- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/client/karma.js b/client/karma.js index c3060f543..773d17811 100644 --- a/client/karma.js +++ b/client/karma.js @@ -62,7 +62,8 @@ function Karma (socket, iframe, opener, navigator, location) { childWindow.close() } childWindow = opener(url) - // run context on parent element and dynamically loading scripts + // run context on parent element (client_with_context) + // using window.__karma__.scriptUrls to get the html element strings and load them dynamically } else if (url !== 'about:blank') { var loadScript = function (idx) { if (idx < window.__karma__.scriptUrls.length) { diff --git a/lib/middleware/karma.js b/lib/middleware/karma.js index d97d2902b..4d1d1b514 100644 --- a/lib/middleware/karma.js +++ b/lib/middleware/karma.js @@ -175,7 +175,6 @@ function createKarmaMiddleware ( common.setNoCacheHeaders(response) const scriptTags = [] - const scriptUrls = [] for (const file of files.included) { let filePath = file.path const fileType = file.type || path.extname(filePath).substring(1) @@ -204,10 +203,19 @@ function createKarmaMiddleware ( scriptTags.push(``) } } - for (const script of scriptTags) { - // Escape characters with special roles (tags) in HTML. Open angle brackets are parsed as tags - // immediately, even if it is within double quotations, in browsers - scriptUrls.push(script.replace(//g, '\\x3E')) + + const scriptUrls = [] + // For client_with_context, html elements are not added directly through an iframe. + // Instead, scriptTags is stored to window.__karma__.scriptUrls first. Later, the + // client will read window.__karma__.scriptUrls and dynamically add them to the DOM + // using DOMParser. + if (requestUrl === '/client_with_context.html') { + for (const script of scriptTags) { + scriptUrls.push( + // Escape characters with special roles (tags) in HTML. Open angle brackets are parsed as tags + // immediately, even if it is within double quotations in browsers + script.replace(//g, '\\x3E')) + } } const mappings = data.includes('%MAPPINGS%') ? files.served.map((file) => { From 43d9629f8e3753bb49332123703967a36cfc79eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CCyrus?= Date: Fri, 12 Apr 2019 14:02:44 -0700 Subject: [PATCH 5/7] fix(client): Fix CLA Fixes #3289 --- lib/middleware/karma.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/middleware/karma.js b/lib/middleware/karma.js index 4d1d1b514..862638e6b 100644 --- a/lib/middleware/karma.js +++ b/lib/middleware/karma.js @@ -207,8 +207,7 @@ function createKarmaMiddleware ( const scriptUrls = [] // For client_with_context, html elements are not added directly through an iframe. // Instead, scriptTags is stored to window.__karma__.scriptUrls first. Later, the - // client will read window.__karma__.scriptUrls and dynamically add them to the DOM - // using DOMParser. + // client will read window.__karma__.scriptUrls and dynamically add them to the DOM using DOMParser. if (requestUrl === '/client_with_context.html') { for (const script of scriptTags) { scriptUrls.push( From 905e464fe6ead192434461560b2b63ae7bb01a65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CCyrus?= Date: Fri, 12 Apr 2019 14:25:57 -0700 Subject: [PATCH 6/7] fix(client): Fix CLA second try! Fixes #3289 --- lib/middleware/karma.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/middleware/karma.js b/lib/middleware/karma.js index 862638e6b..4d1d1b514 100644 --- a/lib/middleware/karma.js +++ b/lib/middleware/karma.js @@ -207,7 +207,8 @@ function createKarmaMiddleware ( const scriptUrls = [] // For client_with_context, html elements are not added directly through an iframe. // Instead, scriptTags is stored to window.__karma__.scriptUrls first. Later, the - // client will read window.__karma__.scriptUrls and dynamically add them to the DOM using DOMParser. + // client will read window.__karma__.scriptUrls and dynamically add them to the DOM + // using DOMParser. if (requestUrl === '/client_with_context.html') { for (const script of scriptTags) { scriptUrls.push( From e87e3495f4934937bbd2356caa68bd3c6ad7fa78 Mon Sep 17 00:00:00 2001 From: Cyrus Date: Fri, 12 Apr 2019 15:03:05 -0700 Subject: [PATCH 7/7] fix(client): Fix typo Fixes #3289 --- client/karma.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/karma.js b/client/karma.js index 773d17811..c7f646963 100644 --- a/client/karma.js +++ b/client/karma.js @@ -81,7 +81,7 @@ function Karma (socket, iframe, opener, navigator, location) { var tmp = ele ele = document.createElement('script') ele.src = tmp.src - ele.crossOrigin = tmp.crossorigin + ele.crossOrigin = tmp.crossOrigin } ele.onload = function () { loadScript(idx + 1)