fix(urls): prefix relative urls with base href

cloudflare · Jun 18, 2017 · a8f3600 · a8f3600
1 parent 40c6aa4
commit a8f3600
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 4 deletions.
diff --git a/index.js b/index.js
@@ -36,12 +36,24 @@ module.exports = function netjet(options) {
     }
 
     function insertLinkArray(entries) {
+      var baseTag;
       entries.forEach(function (entry) {
-        var url = entry[0];
-        var asType = entry[1];
-
-        appendHeader('Link', '<' + encodeRFC5987(unescape(url)) + '>; rel=preload; as=' + asType);
+        if (entry[1] === 'base') {
+          baseTag = entry;
+        }
       });
+
+      entries
+        .filter(function (entry) {
+          return entry[1] !== 'base';
+        })
+        .forEach(function (entry) {
+          var url = entry[0];
+          var asType = entry[1];
+          var addBaseHref = baseTag !== undefined && !(new RegExp('^([a-z]+://|/)', 'i')).test(url);
+
+          appendHeader('Link', '<' + (addBaseHref ? baseTag[0] : '') + encodeRFC5987(unescape(url)) + '>; rel=preload; as=' + asType);
+        });
     }
 
     function processBody(body) {

diff --git a/posthtml-preload.js b/posthtml-preload.js
@@ -4,6 +4,13 @@ module.exports = function (options, foundEntries) {
   return function (tree) {
     var matchers = [];
 
+    matchers.push({
+      tag: 'base',
+      attrs: {
+        href: true
+      }
+    });
+
     if (options.images) {
       matchers.push({
         tag: 'img',
@@ -34,6 +41,9 @@ module.exports = function (options, foundEntries) {
     if (matchers.length) {
       tree.match(matchers, function (node) {
         switch (node.tag) {
+          case 'base':
+            foundEntries.push([node.attrs.href, 'base']);
+            break;
           case 'img':
             foundEntries.push([node.attrs.src, 'image']);
             break;

diff --git a/test/preload.js b/test/preload.js
@@ -38,6 +38,24 @@ describe('preload', function () {
       });
     });
 
+    describe('should include base href', function () {
+      before(function () {
+        this.server = createServer({
+          images: true,
+          scripts: false,
+          styles: false
+        });
+      });
+
+      it('should include for all affected URLs', function (done) {
+        request(this.server)
+          .get('/base-href/all')
+          .expect('Content-Type', 'text/html; charset=utf-8')
+          .expect('Link', '</images/craig-david.jpg>; rel=preload; as=image, </craig-david.jpg>; rel=preload; as=image, <//cdnjs.com/jquery.js>; rel=preload; as=image, <http://cdnjs.com/jquery.js>; rel=preload; as=image, <https://cdnjs.com/jquery.js>; rel=preload; as=image')
+          .expect(200, done);
+      });
+    });
+
     describe('should parse out images', function () {
       before(function () {
         this.server = createServer({
@@ -409,6 +427,15 @@ function createServer(options) {
     }
   });
 
+  router.route('/base-href/all', {
+    GET: function (req, res) {
+      res.statusCode = 200;
+      res.setHeader('Content-Type', 'text/html; charset=utf-8');
+      res.write('<base href="/"><img src="images/craig-david.jpg" /><img src="/craig-david.jpg" /><img src="//cdnjs.com/jquery.js" /><img src="http://cdnjs.com/jquery.js" /><img src="https://cdnjs.com/jquery.js" />');
+      res.end();
+    }
+  });
+
   router.on(404, function (req, res) {
     res.statusCode = 404;
     res.setHeader('Content-Type', 'text/html; charset=utf-8');