Subresource Integrity (#247)

layout/_partials/head/head.njk

@@ -38,19 +38,19 @@
 
 {{ next_font() }}
 
-<link rel="stylesheet" href="{{ theme.vendors.fontawesome }}">
+{{ next_vendors('fontawesome') }}
 
 {%- if theme.motion.enable %}
-  <link rel="stylesheet" href="{{ theme.vendors.animate_css }}">
+  {{ next_vendors('animate_css') }}
 {%- endif %}
 
 {%- if theme.fancybox %}
-  <link rel="stylesheet" href="{{ theme.vendors.fancybox_css }}">
+  {{ next_vendors('fancybox_css') }}
 {%- endif %}
 
 {%- if theme.nprogress.enable %}
-  <link rel="stylesheet" href="{{ theme.vendors.nprogress_css }}">
-  <script src="{{ theme.vendors.nprogress_js }}"></script>
+  {{ next_vendors('nprogress_css') }}
+  {{ next_vendors('nprogress_js') }}
 {%- endif %}
 
 {{ next_data('main', next_config()) }}

layout/_scripts/vendors.njk

@@ -1,7 +1,7 @@
 {%- if theme.canvas_ribbon.enable %}
-  <script size="{{ theme.canvas_ribbon.size }}" alpha="{{ theme.canvas_ribbon.alpha }}" zIndex="{{ theme.canvas_ribbon.zIndex }}" src="{{ theme.vendors.canvas_ribbon }}"></script>
+  <script size="{{ theme.canvas_ribbon.size }}" alpha="{{ theme.canvas_ribbon.alpha }}" zIndex="{{ theme.canvas_ribbon.zIndex }}" src="{{ theme.vendors.canvas_ribbon.url }}"></script>
 {%- endif %}
 
 {%- for name in js_vendors() %}
-  <script src="{{ url_for(theme.vendors[name]) }}"></script>
+  {{ next_vendors(name) }}
 {%- endfor %}

layout/_third-party/comments/disqusjs.njk

@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="{{ theme.vendors.disqusjs_css }}">
+{{ next_vendors('disqusjs_css') }}
 
 {{ next_data('disqusjs', theme.disqusjs, {
   js: theme.vendors.disqusjs_js

layout/_third-party/comments/gitalk.njk

@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="{{ theme.vendors.gitalk_css }}">
+{{ next_vendors('gitalk_css') }}
 
 {{ next_data('gitalk', theme.gitalk, {
   js: theme.vendors.gitalk_js,

layout/_third-party/math/katex.njk

@@ -1,6 +1,6 @@
-<link rel="stylesheet" href="{{ theme.vendors.katex }}">
+{{ next_vendors('katex') }}
 {%- if theme.math.katex.copy_tex %}
-  <link rel="stylesheet" href="{{ theme.vendors.copy_tex_css }}">
+  {{ next_vendors('copy_tex_css') }}
   {{ next_data('katex', {
     copy_tex_js: theme.vendors.copy_tex_js
   }) }}

layout/_third-party/quicklink.njk

@@ -1,5 +1,5 @@
 {%- if theme.quicklink.enable %}
-  <script src="{{ theme.vendors.quicklink }}"></script>
+  {{ next_vendors('quicklink') }}
   {{ next_data('quicklink', page.quicklink, {
     url: url | replace(r/index\.html$/, '')
   }) }}

layout/_third-party/search/algolia-search.njk

@@ -1,4 +1,4 @@
-<script src="{{ theme.vendors.algolia_search }}"></script>
-<script src="{{ theme.vendors.instant_search }}"></script>
+{{ next_vendors('algolia_search') }}
+{{ next_vendors('instant_search') }}
 
 {{- next_js('third-party/search/algolia-search.js') }}

layout/_third-party/statistics/firestore.njk

@@ -1,6 +1,6 @@
 {%- if theme.firestore.enable %}
-  <script src="{{ theme.vendors.firebase_app }}"></script>
-  <script src="{{ theme.vendors.firebase_firestore }}"></script>
+  {{ next_vendors('firebase_app') }}
+  {{ next_vendors('firebase_firestore') }}
   {{ next_data('firestore', theme.firestore) }}
   {{ next_js('third-party/statistics/firestore.js') }}
 {%- endif %}

scripts/events/lib/vendors.js

@@ -19,7 +19,9 @@ module.exports = hexo => {
   }
   for (const [key, value] of Object.entries(dependencies)) {
     if (vendors[key]) {
-      vendors[key] = url_for.call(hexo, vendors[key]);
+      vendors[key] = {
+        url: url_for.call(hexo, vendors[key])
+      };
       continue;
     }
     const { name, version, file, alias, unavailable } = value;
@@ -32,6 +34,9 @@ module.exports = hexo => {
     let { plugins = 'jsdelivr' } = vendors;
     if (plugins === 'cdnjs' && unavailable && unavailable.includes('cdnjs')) plugins = 'jsdelivr';
     if (plugins === 'local' && typeof internal === 'undefined') plugins = 'jsdelivr';
-    vendors[key] = links[plugins] || links.jsdelivr;
+    vendors[key] = {
+      url      : links[plugins] || links.jsdelivr,
+      integrity: value.integrity
+    };
   }
 };

scripts/helpers/engine.js

@@ -29,6 +29,17 @@ hexo.extend.helper.register('next_js', function(file, pjax = false) {
   return `<script ${pjax ? 'data-pjax ' : ''}src="${src}"></script>`;
 });
 
+hexo.extend.helper.register('next_vendors', function(name) {
+  const { url, integrity } = this.theme.vendors[name];
+  const type = url.endsWith('css') ? 'css' : 'js';
+  if (type === 'css') {
+    if (integrity) return `<link rel="stylesheet" href="${url}" integrity="${integrity}" crossorigin="anonymous">`;
+    return `<link rel="stylesheet" href="${url}">`;
+  }
+  if (integrity) return `<script src="${url}" integrity="${integrity}" crossorigin="anonymous"></script>`;
+  return `<script src="${url}"></script>`;
+});
+
 hexo.extend.helper.register('next_data', function(name, ...data) {
   const { escape_html } = this;
   const json = data.length === 1 ? data[0] : Object.assign({}, ...data);

source/js/utils.js

@@ -337,9 +337,9 @@ NexT.utils = {
     }
   },
 
-  getScript: function(url, options = {}, legacyCondition) {
+  getScript: function(src, options = {}, legacyCondition) {
     if (typeof options === 'function') {
-      return this.getScript(url, {
+      return this.getScript(src, {
         condition: legacyCondition
       }).then(options);
     }
@@ -373,7 +373,16 @@ NexT.utils = {
         script.onload = resolve;
         script.onerror = reject;
 
+        if (typeof src === 'object') {
+          const { url, integrity } = src;
           script.src = url;
+          if (integrity) {
+            script.integrity = integrity;
+            script.crossOrigin = 'anonymous';
+          }
+        } else {
+          script.src = src;
+        }
         (parentNode || document.head).appendChild(script);
       }
     });