Add support for subresource integrity (#506)

CHANGELOG.md

@@ -8,6 +8,11 @@
 ## [Unreleased]
 Changes since the last non-beta release.
 
+
+### Added
+
+- Support for subresource integrity. [PR 570](https://github.com/shakacode/shakapacker/pull/570) by [panagiotisplytas](https://github.com/panagiotisplytas)
+
 ### Fixed
 
 - Remove duplicate word in comment from generated `shakapacker.yml` config [PR 572](https://github.com/shakacode/shakapacker/pull/572) by [G-Rath](https://github.com/g-rath).

docs/subresource_integrity.md

@@ -0,0 +1,54 @@
+# Subresource integrity
+It's a cryptographic hash that helps browsers check that the served js or css file has not been tampered in any way.
+
+[MDN - Subresource Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)
+
+## Important notes
+- If you somehow modify the file after the hash was generated, it will automatically be considered as tampered, and the browser will not allow it to be executed.
+- Enabling subresource integrity generation, will change the structure of `manifest.json`. Keep that in mind if you utilize this file in any other custom implementation.
+
+Before:
+```json
+{
+  "application.js": "/path_to_asset"
+}
+```
+
+After:
+```json
+{
+  "application.js": {
+    "src": "/path_to_asset",
+    "integrity": "<sha256-hash> <sha384-hash> <sha512-hash>"
+  }
+}
+```
+
+## Possible CORS issues
+Enabling subresource integrity for an asset, actually enforces CORS checks on that resource too. Which means that
+if you haven't set that up properly beforehand, it will probably lead to CORS errors with cached assets.
+
+[MDN - How browsers handle Subresource Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity#how_browsers_handle_subresource_integrity)
+
+## Configuration
+
+By default, this setting is disabled, to ensure backwards compatibility, and let developers adapt at their own pace.
+This may change in the future, as it is a very nice security feature, and it should be enabled by default.
+
+To enable it, just add this in `shakapacker.yml`
+```yml
+  integrity:
+    enabled: true    
+```
+
+For further customization, you can also utilize the options `hash_functions` that control the functions used to generate 
+integrity hashes. And `cross_origin` that sets the cross-origin loading attribute.
+
+```yml
+  integrity:
+    enabled: true
+    hash_functions: ["sha256", "sha384", "sha512"]
+    cross_origin: "anonymous" # or "use-credentials"
+```
+
+This will utilize under the hood webpack-subresource-integrity plugin and will modify `manifest.json` to include integrity hashes.

lib/install/config/shakapacker.yml

@@ -55,6 +55,16 @@ default: &default
   # SHAKAPACKER_ASSET_HOST will override both configurations.
   # asset_host: custom-path
 
+  # Utilizing webpack-subresource-integrity plugin, will generate integrity hashes for all entries in manifest.json
+  # https://github.com/waysact/webpack-subresource-integrity/tree/main/webpack-subresource-integrity
+  integrity:
+    enabled: false
+    # Which cryptographic function(s) to use, for generating the integrity hash(es). Default sha-384. Other possible values sha256, sha512
+    hash_functions: ["sha384"]
+    # Default "anonymous". Other possible value "use-credentials"
+    # https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity#cross-origin_resource_sharing_and_subresource_integrity
+    cross_origin: "anonymous"
+
 development:
   <<: *default
   compile: true

lib/shakapacker/configuration.rb

@@ -99,6 +99,14 @@ def asset_host
     )
   end
 
+  def integrity
+    integrity_configuration = fetch(:integrity)
+
+    return integrity_configuration if integrity_configuration.is_a?(Hash)
+
+    defaults[:integrity].merge({ enabled: integrity_configuration })
+  end
+
   private
     def data
       @data ||= load

lib/shakapacker/helper.rb

@@ -109,11 +109,11 @@ def javascript_pack_tag(*names, defer: true, async: false, **options)
     @javascript_pack_tag_loaded = true
 
     capture do
-      concat javascript_include_tag(*async, **options.dup.tap { |o| o[:async] = true })
+      render_tags(async, :javascript, **options.dup.tap { |o| o[:async] = true })
       concat "\n" if async.any? && deferred.any?
-      concat javascript_include_tag(*deferred, **options.dup.tap { |o| o[:defer] = true })
+      render_tags(deferred, :javascript, **options.dup.tap { |o| o[:defer] = true })
       concat "\n" if sync.any? && deferred.any?
-      concat javascript_include_tag(*sync, **options)
+      render_tags(sync, :javascript, options)
     end
   end
 
@@ -166,7 +166,9 @@ def stylesheet_pack_tag(*names, **options)
 
     @stylesheet_pack_tag_loaded = true
 
-    stylesheet_link_tag(*(requested_packs | appended_packs), **options)
+    capture do
+      render_tags(requested_packs | appended_packs, :stylesheet, options)
+    end
   end
 
   def append_stylesheet_pack_tag(*names)
@@ -238,4 +240,38 @@ def resolve_path_to_image(name, **options)
     rescue
       path_to_asset(current_shakapacker_instance.manifest.lookup!(name), options)
     end
+
+    def lookup_integrity(source)
+      (source.respond_to?(:dig) && source.dig("integrity")) || nil
+    end
+
+    def lookup_source(source)
+      (source.respond_to?(:dig) && source.dig("src")) || source
+    end
+
+    # Handles rendering javascript and stylesheet tags with integrity, if that's enabled.
+    def render_tags(sources, type, options)
+      return unless sources.present? || type.present?
+
+      sources.each.with_index do |source, index|
+        tag_source = lookup_source(source)
+
+        if current_shakapacker_instance.config.integrity[:enabled]
+          integrity = lookup_integrity(source)
+
+          if integrity.present?
+            options[:integrity] = integrity
+            options[:crossorigin] = current_shakapacker_instance.config.integrity[:cross_origin]
+          end
+        end
+
+        if type == :javascript
+          concat javascript_include_tag(tag_source, **options)
+        else
+          concat stylesheet_link_tag(tag_source, **options)
+        end
+
+        concat "\n" unless index == sources.size - 1
+      end
+    end
 end

lib/shakapacker/manifest.rb

@@ -67,7 +67,12 @@ def data
     end
 
     def find(name)
-      data[name.to_s].presence
+      return nil unless data[name.to_s].present?
+
+      return data[name.to_s] unless data[name.to_s].respond_to?(:dig)
+
+      # Try to return src, if that fails, (ex. entrypoints object) return the whole object.
+      data[name.to_s].dig("src") || data[name.to_s]
     end
 
     def full_pack_name(name, pack_type)

package.json

@@ -46,6 +46,7 @@
     "thenify": "^3.3.1",
     "webpack": "5.93.0",
     "webpack-assets-manifest": "^5.0.6",
+    "webpack-subresource-integrity": "^5.1.0",
     "webpack-merge": "^5.8.0"
   },
   "peerDependencies": {
@@ -60,6 +61,7 @@
     "terser-webpack-plugin": "^5.3.1",
     "webpack": "^5.76.0",
     "webpack-assets-manifest": "^5.0.6 || ^6.0.0",
+    "webpack-subresource-integrity": "^5.1.0",
     "webpack-cli": "^4.9.2 || ^5.0.0 || ^6.0.0",
     "webpack-dev-server": "^4.9.0 || ^5.0.0",
     "webpack-merge": "^5.8.0 || ^6.0.0"
@@ -70,6 +72,9 @@
     },
     "@types/webpack": {
       "optional": true
+    },
+    "webpack-subresource-integrity": {
+      "optional": true
     }
   },
   "packageManager": "[email protected]",

package/config.js

@@ -51,4 +51,17 @@ if (config.manifest_path) {
   config.manifestPath = resolve(config.outputPath, "manifest.json")
 }
 
+if (typeof config.integrity === "boolean") {
+  config.integrity = {
+    enabled: config.integrity,
+    hash_functions: ["sha384"],
+    cross_origin: "anonymous"
+  }
+} else {
+  // Ensure no duplicate hash functions exist in the returned config object
+  config.integrity.hash_functions = [
+    ...new Set(config.integrity.hash_functions)
+  ]
+}
+
 module.exports = config

package/environments/base.js

@@ -86,7 +86,9 @@ const getPlugins = () => {
       writeToDisk: true,
       output: config.manifestPath,
       entrypointsUseAssets: true,
-      publicPath: config.publicPathWithoutCDN
+      publicPath: config.publicPathWithoutCDN,
+      integrity: config.integrity.enabled,
+      integrityHashes: config.integrity.hash_functions
     })
   ]
 
@@ -105,6 +107,22 @@ const getPlugins = () => {
     )
   }
 
+  if (
+    moduleExists("webpack-subresource-integrity") &&
+    config.integrity.enabled
+  ) {
+    const {
+      SubresourceIntegrityPlugin
+    } = require("webpack-subresource-integrity")
+
+    plugins.push(
+      new SubresourceIntegrityPlugin({
+        hashFuncNames: config.integrity.hash_functions,
+        enabled: isProduction
+      })
+    )
+  }
+
   return plugins
 }
 
@@ -121,7 +139,12 @@ module.exports = {
     // https://webpack.js.org/configuration/output/#outputhotupdatechunkfilename
     hotUpdateChunkFilename: "js/[id].[fullhash].hot-update.js",
     path: config.outputPath,
-    publicPath: config.publicPath
+    publicPath: config.publicPath,
+
+    // This is required for SRI to work.
+    crossOriginLoading: config.integrity.enabled
+      ? config.integrity.cross_origin
+      : false
   },
   entry: getEntryObject(),
   resolve: {

spec/dummy/package.json

@@ -30,6 +30,7 @@
     "typescript": "^4.7.3",
     "webpack": "^5.76.0",
     "webpack-assets-manifest": "^5.1.0",
+    "webpack-subresource-integrity": "^5.1.0",
     "webpack-cli": "^4.9.2",
     "webpack-merge": "^5.8.0",
     "webpack-sources": "^3.2.3"

spec/dummy/yarn.lock

@@ -4325,6 +4325,11 @@ type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+typed-assert@^1.0.8:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/typed-assert/-/typed-assert-1.0.9.tgz#8af9d4f93432c4970ec717e3006f33f135b06213"
+  integrity sha512-KNNZtayBCtmnNmbo5mG47p1XsCyrx6iVqomjcZnec/1Y5GGARaxPs6r49RnSPeUP3YjNYiU9sQHAtY4BBvnZwg==
+
 typescript@^4.7.3:
   version "4.9.5"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
@@ -4518,6 +4523,13 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
+webpack-subresource-integrity@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/webpack-subresource-integrity/-/webpack-subresource-integrity-5.1.0.tgz#8b7606b033c6ccac14e684267cb7fb1f5c2a132a"
+  integrity sha512-sacXoX+xd8r4WKsy9MvH/q/vBtEHr86cpImXwyg74pFIpERKt6FmB8cXpeuh0ZLgclOlHI4Wcll7+R5L02xk9Q==
+  dependencies:
+    typed-assert "^1.0.8"
+
 webpack@^5.76.0:
   version "5.99.6"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.99.6.tgz#0d6ba7ce1d3609c977f193d2634d54e5cf36379d"

spec/shakapacker/configuration_spec.rb

@@ -181,6 +181,54 @@
         is_expected.to be true
       end
     end
+
+    describe "#integrity" do
+      it "contains the key :enabled" do
+        expect(config.integrity).to have_key(:enabled)
+      end
+
+      it "contains the key :hash_functions" do
+        expect(config.integrity).to have_key(:hash_functions)
+      end
+
+      it "contains the key :cross_origin" do
+        expect(config.integrity).to have_key(:cross_origin)
+      end
+
+      it "is by default disabled" do
+        expect(config.integrity[:enabled]).to be false
+      end
+
+      it "returns default cross_origin configuration" do
+        expect(config.integrity[:cross_origin]).to eq "anonymous"
+      end
+
+      it "returns default hash_functions" do
+        expect(config.integrity[:hash_functions]).to eq ["sha384"]
+      end
+    end
+  end
+
+  context "with shakapacker config file containing integrity" do
+    let(:config) do
+      Shakapacker::Configuration.new(
+        root_path: ROOT_PATH,
+        config_path: Pathname.new(File.expand_path("./test_app/config/shakapacker_integrity.yml", __dir__)),
+        env: "production"
+      )
+    end
+
+    it "has integrity enabled" do
+      expect(config.integrity[:enabled]).to be true
+    end
+
+    it "has all hash functions set" do
+      expect(config.integrity[:hash_functions]).to eq ["sha256", "sha384", "sha512"]
+    end
+
+    it "has cross_origin set to use-credentials" do
+      expect(config.integrity[:cross_origin]).to eq "use-credentials"
+    end
   end
 
   context "with shakapacker config file containing public_output_path entry" do
@@ -373,5 +421,4 @@
       end
     end
   end
-
 end