@shopify/shop-minis-react 0.4.15 → 0.4.16

package/eslint/rules/validate-manifest.cjs

@@ -31,8 +31,8 @@ const hookPermissionsMap = {
   useImagePicker: ['CAMERA'],
 }
 
-// Extract domain from URL (returns domain in CSP format)
-function extractDomain(url) {
+// Extract domain and path from URL (returns {hostname, pathname} for CSP matching)
+function extractDomainAndPath(url) {
   if (!url || typeof url !== 'string') return null
 
   try {
@@ -48,25 +48,65 @@ function extractDomain(url) {
 
     // Parse URL
     const urlObj = new URL(url)
-    return urlObj.hostname
+    return {
+      hostname: urlObj.hostname,
+      pathname: urlObj.pathname,
+    }
   } catch (err) {
     // If URL parsing fails, might be a relative path
     return null
   }
 }
 
-// Check if domain matches a pattern (supports wildcards)
-function domainMatchesPattern(domain, pattern) {
+// Check if a URL matches a trusted_domain pattern
+// Supports: wildcards (*.example.com), paths with CSP semantics
+// CSP path matching: path with trailing slash matches directory, without matches exact or prefix
+function urlMatchesPattern(urlInfo, pattern) {
   if (pattern === '*') return true
-  if (pattern === domain) return true
 
-  // Handle wildcard subdomains (*.example.com)
-  if (pattern.startsWith('*.')) {
-    const basePattern = pattern.slice(2)
-    return domain === basePattern || domain.endsWith(`.${basePattern}`)
+  // Parse the pattern to extract hostname and optional path
+  let patternHostname = pattern
+  let patternPath = null
+
+  // Check if pattern contains a path (has / after the domain)
+  const slashIndex = pattern.indexOf('/')
+  if (slashIndex !== -1) {
+    patternHostname = pattern.slice(0, slashIndex)
+    patternPath = pattern.slice(slashIndex)
+  }
+
+  // First check hostname match
+  let hostnameMatches = false
+
+  if (patternHostname === urlInfo.hostname) {
+    hostnameMatches = true
+  } else if (patternHostname.startsWith('*.')) {
+    // Handle wildcard subdomains (*.example.com)
+    const basePattern = patternHostname.slice(2)
+    hostnameMatches =
+      urlInfo.hostname === basePattern ||
+      urlInfo.hostname.endsWith(`.${basePattern}`)
   }
 
-  return false
+  if (!hostnameMatches) {
+    return false
+  }
+
+  // If no path in pattern, hostname match is sufficient
+  if (!patternPath) {
+    return true
+  }
+
+  // CSP path matching semantics:
+  // - Path ending with / matches that directory and everything under it (prefix match)
+  // - Path without trailing / matches exact path only
+  if (patternPath.endsWith('/')) {
+    // Directory match: URL path must start with pattern path
+    return urlInfo.pathname.startsWith(patternPath)
+  } else {
+    // Exact match only
+    return urlInfo.pathname === patternPath
+  }
 }
 
 module.exports = {
@@ -308,10 +348,11 @@ module.exports = {
         // Check for fetch() calls
         if (node.callee.name === 'fetch' && firstArg.type === 'Literal') {
           const url = firstArg.value
-          const domain = extractDomain(url)
-          if (domain) {
+          const urlInfo = extractDomainAndPath(url)
+          if (urlInfo) {
             requiredDomains.add({
-              domain,
+              urlInfo,
+              url,
               reason: 'fetch() call',
               node,
             })
@@ -326,10 +367,11 @@ module.exports = {
           node.arguments[1].type === 'Literal'
         ) {
           const url = node.arguments[1].value
-          const domain = extractDomain(url)
-          if (domain) {
+          const urlInfo = extractDomainAndPath(url)
+          if (urlInfo) {
             requiredDomains.add({
-              domain,
+              urlInfo,
+              url,
               reason: 'XMLHttpRequest.open() call',
               node,
             })
@@ -340,11 +382,12 @@ module.exports = {
         if (node.callee.name === 'WebSocket' && firstArg.type === 'Literal') {
           const url = firstArg.value
           // WebSocket URLs use ws:// or wss://
-          const domain = url.replace(/^wss?:\/\//, 'https://')
-          const extracted = extractDomain(domain)
-          if (extracted) {
+          const normalizedUrl = url.replace(/^wss?:\/\//, 'https://')
+          const urlInfo = extractDomainAndPath(normalizedUrl)
+          if (urlInfo) {
             requiredDomains.add({
-              domain: extracted,
+              urlInfo,
+              url,
               reason: 'WebSocket connection',
               node,
             })
@@ -354,10 +397,11 @@ module.exports = {
         // Check for EventSource
         if (node.callee.name === 'EventSource' && firstArg.type === 'Literal') {
           const url = firstArg.value
-          const domain = extractDomain(url)
-          if (domain) {
+          const urlInfo = extractDomainAndPath(url)
+          if (urlInfo) {
             requiredDomains.add({
-              domain,
+              urlInfo,
+              url,
               reason: 'EventSource connection',
               node,
             })
@@ -371,10 +415,11 @@ module.exports = {
           firstArg.type === 'Literal'
         ) {
           const url = firstArg.value
-          const domain = extractDomain(url)
-          if (domain) {
+          const urlInfo = extractDomainAndPath(url)
+          if (urlInfo) {
             requiredDomains.add({
-              domain,
+              urlInfo,
+              url,
               reason: 'navigator.sendBeacon() call',
               node,
             })
@@ -389,10 +434,11 @@ module.exports = {
           firstArg.type === 'Literal'
         ) {
           const url = firstArg.value
-          const domain = extractDomain(url)
-          if (domain) {
+          const urlInfo = extractDomainAndPath(url)
+          if (urlInfo) {
             requiredDomains.add({
-              domain,
+              urlInfo,
+              url,
               reason: 'window.open() call',
               node,
             })
@@ -499,9 +545,9 @@ module.exports = {
 
         const attrName = node.name.name
         const url = node.value.value
-        const domain = extractDomain(url)
+        const urlInfo = extractDomainAndPath(url)
 
-        if (!domain) {
+        if (!urlInfo) {
           return
         }
 
@@ -522,7 +568,8 @@ module.exports = {
           ]
           if (supportedElements.includes(elementName)) {
             requiredDomains.add({
-              domain,
+              urlInfo,
+              url,
               reason: `<${elementName}> src attribute`,
               node,
             })
@@ -531,7 +578,8 @@ module.exports = {
         // poster attribute (video)
         else if (attrName === 'poster') {
           requiredDomains.add({
-            domain,
+            urlInfo,
+            url,
             reason: `<${elementName}> poster attribute`,
             node,
           })
@@ -539,7 +587,8 @@ module.exports = {
         // data attribute (object)
         else if (attrName === 'data') {
           requiredDomains.add({
-            domain,
+            urlInfo,
+            url,
             reason: `<${elementName}> data attribute`,
             node,
           })
@@ -547,7 +596,8 @@ module.exports = {
         // action attribute (form)
         else if (attrName === 'action') {
           requiredDomains.add({
-            domain,
+            urlInfo,
+            url,
             reason: `<${elementName}> action attribute`,
             node,
           })
@@ -692,26 +742,26 @@ module.exports = {
         })
 
         // Check trusted domains
-        requiredDomains.forEach(({domain, reason, node}) => {
+        requiredDomains.forEach(({urlInfo, url, reason, node}) => {
           if (!manifest) {
             issues.push({
               messageId: 'manifestNotFound',
-              data: {reason, domain},
+              data: {reason, domain: urlInfo.hostname},
             })
             return
           }
 
           const trustedDomains = manifest.trusted_domains || []
 
-          // Check if domain is trusted (supports wildcards)
+          // Check if URL is trusted (supports wildcards and paths)
           const isTrusted = trustedDomains.some(pattern =>
-            domainMatchesPattern(domain, pattern)
+            urlMatchesPattern(urlInfo, pattern)
           )
 
           if (!isTrusted) {
             issues.push({
               type: 'domain',
-              domain,
+              domain: urlInfo.hostname,
               reason,
               node,
             })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.4.15",
+  "version": "0.4.16",
   "sideEffects": false,
   "type": "module",
   "engines": {