Getting ready for HTTPS & HTTP/2

YellowLabTools · Apr 6, 2018 · b972422 · b972422
1 parent 52ded23
commit b972422
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@ Analyzes a webpage and detects **performance** or **front-end code quality** iss
     <tr>
         <td width="70%">
             The <b>online tool</b> (recommended): 
-            <a href="http://yellowlab.tools" target="_blank">http://yellowlab.tools</a>
+            <a href="https://yellowlab.tools" target="_blank">https://yellowlab.tools</a>
         </td>
         <td width="30%">
             <img src="./doc/img/YLT-animated.gif"></img>

diff --git a/front/src/js/controllers/dashboardCtrl.js b/front/src/js/controllers/dashboardCtrl.js
@@ -41,11 +41,11 @@ dashboardCtrl.controller('DashboardCtrl', ['$scope', '$rootScope', '$routeParams
     };
 
     $scope.shareOnTwitter = function(message) {
-        openSocialPopup('https://twitter.com/intent/tweet?text=' + encodeURIComponent(message + 'http://yellowlab.tools'));
+        openSocialPopup('https://twitter.com/intent/tweet?text=' + encodeURIComponent(message + 'https://yellowlab.tools'));
     };
 
     $scope.shareOnLinkedin = function(message) {
-        openSocialPopup('https://www.linkedin.com/shareArticle?mini=true&url=http://yellowlab.tools&title=' + encodeURIComponent(message) + '&summary=' + encodeURIComponent('YellowLabTools is a free online tool that analyzes performance and front-end quality of a webpage.'));
+        openSocialPopup('https://www.linkedin.com/shareArticle?mini=true&url=https://yellowlab.tools&title=' + encodeURIComponent(message) + '&summary=' + encodeURIComponent('YellowLabTools is a free online tool that analyzes performance and front-end quality of a webpage.'));
     };
 
     function openSocialPopup(url) {

diff --git a/front/src/js/directives/offendersDirectives.js b/front/src/js/directives/offendersDirectives.js
@@ -924,4 +924,15 @@
         };
     });
 
+    // Proxify an HTTP image to HTTPS if hosted on HTTPS
+    // Uses a great free open-source external service: https://images.weserv.nl
+    offendersDirectives.filter('https', function() {
+        return function(url) {
+            if (url && url.indexOf('http://') === 0 && window.location.protocol === 'https:') {
+                return 'https://images.weserv.nl/?url=' + encodeURIComponent(url.substr(7));
+            }
+            return url;
+        };
+    });
+
 })();
diff --git a/front/src/main.html b/front/src/main.html
@@ -18,10 +18,10 @@
     <link rel="stylesheet" type="text/css" href="css/about.css">
     <!-- endbuild -->
 
-    <link rel="preconnect" href="//www.google-analytics.com">
-    <link rel="dns-prefetch" href="//www.google-analytics.com">
-    <link rel="preconnect" href="//ghbtns.com">
-    <link rel="dns-prefetch" href="//ghbtns.com">
+    <link rel="preconnect" href="https://www.google-analytics.com">
+    <link rel="dns-prefetch" href="https://www.google-analytics.com">
+    <link rel="preconnect" href="https://ghbtns.com">
+    <link rel="dns-prefetch" href="https://ghbtns.com">
     <link rel="preconnect" href="https://api.github.com">
     <link rel="dns-prefetch" href="https://api.github.com">
 

diff --git a/front/src/views/rule.html b/front/src/views/rule.html
@@ -133,7 +133,7 @@ <h3 ng-if="rule.offendersObj.count >= 0"><ng-pluralize count="rule.offendersObj.
                     </div>
 
                     <div ng-if="policyName === 'lazyLoadableImagesBelowTheFold' || policyName === 'hiddenImages'">
-                        <img ng-src="{{offender}}" class="smallPreview checker"></img>
+                        <img ng-src="{{offender | https}}" class="smallPreview checker"></img>
                         <url-link url="offender" max-length="100"></url-link>
                     </div>
 
@@ -267,7 +267,7 @@ <h3 ng-if="rule.value > 0">{{rule.value | bytes}} could be saved on <ng-pluraliz
             <div ng-repeat="image in rule.offendersObj.list.images | orderBy:'-gain'">
                 <div>
                     Current file: <url-link url="image.url" max-length="50"></url-link>
-                    <div><a href="{{image.url}}" target="_blank"><img ng-src="{{image.url}}" class="checker" /></a></div>
+                    <div><a href="{{image.url}}" target="_blank"><img ng-src="{{image.url | https}}" class="checker" /></a></div>
                 </div>
                 <div>
                     <p ng-if="!image.afterCompression">Current weight: {{image.original | bytes}}</p>
@@ -364,7 +364,7 @@ <h3><ng-pluralize count="requests.length" when="{'0': 'small ' + type + ' file',
                     <div>Weight (bytes)</div>
                 </div>
                 <div ng-repeat="request in requests track by $index">
-                    <div ng-if="type == 'image'"><img ng-src="{{request.url}}" class="smallPreview checker" /></div>
+                    <div ng-if="type == 'image'"><img ng-src="{{request.url | https}}" class="smallPreview checker" /></div>
                     <div><url-link url="request.url" max-length="100"></url-link></div>
                     <div>{{request.size}}</div>
                 </div>

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "author": {
     "name": "Gaël Métais",
     "email": "gael@gaelmetais.com",
-    "url": "http://www.gaelmetais.com"
+    "url": "https://www.gaelmetais.com"
   },
   "repository": {
     "type": "git",