Merge pull request #49 from inikulin/fl-2529

FL-2529 Don't escape entities in HTML and CSS content
cloudflare · Sep 17, 2018 · 4bbf1f9 · 4bbf1f9
2 parents 5a29178 + 4b727d4
commit 4bbf1f9
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 19 deletions.
diff --git a/lib/plugins/parse5-flatten-external-style.js b/lib/plugins/parse5-flatten-external-style.js
@@ -23,12 +23,13 @@ module.exports = (rewriter, opts) =>
       attrs: [],
       selfClosing: false
     });
-    rewriter.emitText({
-      text: await collapseCSS.external({
+    // NOTE: use emitRaw here to not escape HTML entities in content.
+    rewriter.emitRaw(
+      await collapseCSS.external({
         fetch: opts.fetch,
         resourceLocation: resolve(opts.resourceLocation, href.value)
       })
-    });
+    );
     rewriter.emitEndTag({
       tagName: 'style'
     });

diff --git a/lib/plugins/parse5-flatten-inline-style.js b/lib/plugins/parse5-flatten-inline-style.js
@@ -23,9 +23,8 @@ module.exports = (rewriter, opts) => {
       resourceLocation: opts.resourceLocation
     });
 
-    rewriter.emitText({
-      text: content
-    });
+    // NOTE: use emitRaw here to not escape HTML entities in content.
+    rewriter.emitRaw(content);
 
     return true;
   });

diff --git a/lib/plugins/parse5-flatten-script.js b/lib/plugins/parse5-flatten-script.js
@@ -49,7 +49,9 @@ module.exports = (rewriter, opts) => {
 
     // Emit modified start tag and the contents (but not end tag since it's already in the HTML).
     rewriter.emitStartTag(tag);
-    rewriter.emitText({text: content});
+
+    // NOTE: use emitRaw here to not escape HTML entities in content.
+    rewriter.emitRaw(content);
 
     return true;
   });
@@ -63,9 +65,8 @@ module.exports = (rewriter, opts) => {
       resourceLocation: '<script>'
     });
 
-    rewriter.emitText({
-      text: content
-    });
+    // NOTE: use emitRaw here to not escape HTML entities in content.
+    rewriter.emitRaw(content);
 
     return true;
   });

diff --git a/lib/utils/parse5-async-rewriter.js b/lib/utils/parse5-async-rewriter.js
@@ -61,7 +61,8 @@ for (const methodName of [
   'emitStartTag',
   'emitEndTag',
   'emitDoctype',
-  'emitText'
+  'emitText',
+  'emitRaw'
 ]) {
   Rewriter.prototype[methodName] = function(...args) {
     this._rewriter[methodName](...args);

diff --git a/test/plugins/parse5-flatten-script.js b/test/plugins/parse5-flatten-script.js
@@ -15,8 +15,8 @@ async function test(input, expected, opts) {
 describe('posthtml-flatten-script', () => {
   it('should flatten inline JavaScript', () => {
     return test(
-      '<script>alert("foo" + "bar");</script>',
-      '<script>alert("foobar");</script>',
+      '<script>alert("foo" + "bar"); var a = c < b;</script>',
+      '<script>alert("foobar");var a=c<b;</script>',
       {
         fetch() {
           assert(false, 'unexpected resource resolution');
@@ -50,11 +50,11 @@ describe('posthtml-flatten-script', () => {
   it('should flatten external JavaScript', () => {
     return test(
       '<script src="app.js"></script>',
-      '<script>alert("foobar");</script>',
+      '<script>alert("foobar");var a=c<b;</script>',
       {
         async fetch(url) {
           assert(url === 'https://example.com/app.js');
-          return {body: Buffer.from('alert("foo" + "bar");')};
+          return {body: Buffer.from('alert("foo" + "bar"); var a = c < b;')};
         },
         resourceLocation: 'https://example.com/'
       }

diff --git a/test/plugins/parse5-flatten-style.js b/test/plugins/parse5-flatten-style.js
@@ -19,8 +19,8 @@ async function test(input, expected, opts) {
 describe('posthtml-flatten-style', () => {
   it('should flatten inline style', () => {
     return test(
-      '<style>body { background: url(gif.gif); }</style>',
-      '<style>body{background:url(data:image/gif;base64,R0lGODlhAQABAAAAADs=)}</style>',
+      '<style>body > .test { background: url(gif.gif); }</style>',
+      '<style>body>.test{background:url(data:image/gif;base64,R0lGODlhAQABAAAAADs=)}</style>',
       {
         async fetch(url) {
           assert(url === 'https://example.com/gif.gif');
@@ -64,13 +64,13 @@ describe('posthtml-flatten-style', () => {
   it('should flatten resources in external stylesheets', () => {
     return test(
       '<link rel="stylesheet" href="/static/css/app.css">',
-      '<style>body,html{background:url(data:image/gif;base64,R0lGODlhAQABAAAAADs=)}</style>',
+      '<style>body>.test{background:url(data:image/gif;base64,R0lGODlhAQABAAAAADs=)}</style>',
       {
         async fetch(url) {
           switch (url) {
             case 'https://example.com/static/css/app.css':
               return {
-                body: Buffer.from('html, body { background: url(gif.gif) }')
+                body: Buffer.from('body > .test { background: url(gif.gif) }')
               };
 
             case 'https://example.com/static/css/gif.gif':