Add support for subresource integrity (#506)

Author: panagiotisplytas

docs/subresource_integrity.md

@@ -0,0 +1,54 @@
+# Subresource integrity
+It's a hash that helps browsers check that the served js or css file has not been tampered in any way.
+
+More: 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.
+
+More: 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_loading: "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,10 @@ def asset_host
     )
   end
 
+  def integrity
+    fetch(:integrity)
+  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] || "anonymous"
+          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"

package/environments/base.js

@@ -11,6 +11,11 @@ const rules = require("../rules")
 const config = require("../config")
 const { isProduction } = require("../env")
 const { moduleExists } = require("../utils/helpers")
+const {
+  isIntegrityEnabled,
+  hashFunctions,
+  crossOrigin
+} = require("../utils/integrityHelpers")
 
 const getFilesInDirectory = (dir, includeNested) => {
   if (!existsSync(dir)) {
@@ -86,7 +91,9 @@ const getPlugins = () => {
       writeToDisk: true,
       output: config.manifestPath,
       entrypointsUseAssets: true,
-      publicPath: config.publicPathWithoutCDN
+      publicPath: config.publicPathWithoutCDN,
+      integrity: isIntegrityEnabled(),
+      integrityHashes: hashFunctions()
     })
   ]
 
@@ -105,6 +112,19 @@ const getPlugins = () => {
     )
   }
 
+  if (moduleExists("webpack-subresource-integrity") && isIntegrityEnabled()) {
+    const {
+      SubresourceIntegrityPlugin
+    } = require("webpack-subresource-integrity")
+
+    plugins.push(
+      new SubresourceIntegrityPlugin({
+        hashFuncNames: hashFunctions(),
+        enabled: isProduction
+      })
+    )
+  }
+
   return plugins
 }
 
@@ -121,7 +141,10 @@ 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: isIntegrityEnabled() ? crossOrigin() : false
   },
   entry: getEntryObject(),
   resolve: {

package/utils/integrityHelpers.js

@@ -0,0 +1,100 @@
+const { existsSync, readFileSync } = require("fs")
+const { load } = require("js-yaml")
+const configPath = require("./configPath")
+const { railsEnv } = require("../env")
+
+/**
+ * Loads and retrieves the environment-specific configuration object.
+ *
+ * @returns {object | null} The configuration object for the current railsEnv,
+ * or null if the file/key doesn't exist or an error occurs.
+ */
+const loadAndCacheConfig = () => {
+  if (!existsSync(configPath)) {
+    /* eslint no-console:0 */
+    console.warn(
+      `Warning: Configuration file not found at ${configPath}. Using default integrity settings.`
+    )
+    return null
+  }
+
+  try {
+    const fileContent = readFileSync(configPath, "utf8")
+    const appYmlObject = load(fileContent)
+
+    const envConfig = appYmlObject[railsEnv]
+
+    if (!envConfig) {
+      console.warn(
+        `Warning: Environment key "${railsEnv}" not found in ${configPath}. Using default integrity settings.`
+      )
+      return null
+    }
+
+    return envConfig
+  } catch (error) {
+    console.error(
+      `Error reading or parsing config file ${configPath}: ${error}. Using default integrity settings.`
+    )
+    return null
+  }
+}
+
+const envAppConfig = loadAndCacheConfig()
+
+/**
+ * Checks if integrity is enabled in the configuration.
+ * Defaults to false if config is missing, the key is not found, or the setting is not specified.
+ * @returns {boolean} True if integrity is enabled, false otherwise.
+ */
+const isIntegrityEnabled = () => {
+  if (
+    envAppConfig &&
+    envAppConfig.integrity &&
+    typeof envAppConfig.integrity.enabled !== "undefined"
+  ) {
+    return !!envAppConfig.integrity.enabled
+  }
+
+  return false
+}
+
+/**
+ * Gets the list of hash functions specified in the configuration.
+ * Defaults to ['sha384'] if config is missing, the key is not found, or the setting is not specified.
+ * @returns {string[]} An array of hash function names.
+ */
+const hashFunctions = () => {
+  if (
+    envAppConfig &&
+    envAppConfig.integrity &&
+    envAppConfig.integrity.hash_functions != null
+  ) {
+    return envAppConfig.integrity.hash_functions
+  }
+
+  return ["sha384"]
+}
+
+/**
+ * Gets the cross-origin attribute value specified in the configuration.
+ * Defaults to 'anonymous' if config is missing, the key is not found, or the setting is not specified.
+ * @returns {string} The cross-origin attribute value.
+ */
+const crossOrigin = () => {
+  if (
+    envAppConfig &&
+    envAppConfig.integrity &&
+    envAppConfig.integrity.cross_origin != null
+  ) {
+    return envAppConfig.integrity.cross_origin
+  }
+
+  return "anonymous"
+}
+
+module.exports = {
+  isIntegrityEnabled,
+  hashFunctions,
+  crossOrigin
+}

yarn.lock

@@ -4457,6 +4457,11 @@ typed-array-length@^1.0.7:
     possible-typed-array-names "^1.0.0"
     reflect.getprototypeof "^1.0.6"
 
+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==
+
 unbox-primitive@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.1.0.tgz#8d9d2c9edeea8460c7f35033a88867944934d1e2"
@@ -4551,6 +4556,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"
+
 [email protected]:
   version "5.93.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.93.0.tgz#2e89ec7035579bdfba9760d26c63ac5c3462a5e5"