Add allowedDomains check for RemoteAsset theme checker

Enhances developer experience by validating the remote assets (scripts,
stylesheets) are loaded not only from Shopify CDNs but now approved
domains. This prevents potential performance risks and incorrect errors
from loading resources from untrusted sources, forcing developers to go
and enable a source if it's _required_

The implementation includes:
- Schema property for configuring allowedDomains
- Domain validation against configured allow list
- Test coverage for both allowed and non-allowed domains

Reverted minor changeset to patch bump

Fixed prettier issues

Refactor domain list from global to parameter

Changes domain validation to accept allowedDomains as a parameter
instead of mutating a global array. This improves code clarity and
testability by making data flow explicit.

The change reduces side effets by:
- Removing relince on shared mutable state
- Making dpendencies clear through function signatures
- Enabling better unit testing of domain validation logic

Added file formatting

Author: zacariec

.changeset/spicy-pumas-sing.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme-check-common': patch
+---
+
+Add RemoteAsset allowedDomains check to validate CDN and approved domain usage for better performance and developer experience

packages/theme-check-common/src/checks/remote-asset/index.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { runLiquidCheck, highlightedOffenses } from '../../test';
+import { runLiquidCheck, highlightedOffenses, check, MockTheme } from '../../test';
 import { RemoteAsset } from './index';
 
 describe('Module: RemoteAsset', () => {
@@ -209,4 +209,54 @@ describe('Module: RemoteAsset', () => {
     const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
     expect(highlights).to.be.empty;
   });
+
+  it('should report an offense if url is not listed in allowedDomains', async () => {
+    const themeFiles: MockTheme = {
+      'layout/theme.liquid': `
+        <script src="https://domain.com" defer></script>
+      `,
+    };
+
+    const offenses = await check(
+      themeFiles,
+      [RemoteAsset],
+      {},
+      {
+        RemoteAsset: {
+          enabled: true,
+          allowedDomains: ['someotherdomain.com'],
+        },
+      },
+    );
+
+    expect(offenses).to.have.length(1);
+  });
+
+  it('should not report an offense if url is listed in allowedDomains', async () => {
+    const themeFiles: MockTheme = {
+      'layout/theme.liquid': `
+        <script src="https://domain.com" defer></script>
+      `,
+    };
+
+    const offenses = await check(
+      themeFiles,
+      [RemoteAsset],
+      {},
+      {
+        RemoteAsset: {
+          enabled: true,
+          allowedDomains: [
+            'domain.com',
+            'https://domain.com',
+            'http://domain.com',
+            'https://www.domain.com',
+            'www.domain.com',
+          ],
+        },
+      },
+    );
+
+    expect(offenses).to.be.empty;
+  });
 });

packages/theme-check-common/src/checks/remote-asset/index.ts

@@ -12,6 +12,7 @@ import {
   SourceCodeType,
   LiquidCheckDefinition,
   LiquidHtmlNode,
+  SchemaProp,
 } from '../../types';
 import { isAttr, isValuedHtmlAttribute, isNodeOfType, ValuedHtmlAttribute } from '../utils';
 import { last } from '../../utils';
@@ -42,15 +43,18 @@ function isLiquidVariable(node: LiquidHtmlNode | string): node is LiquidVariable
   return typeof node !== 'string' && node.type === NodeTypes.LiquidVariable;
 }
 
-function isUrlHostedbyShopify(url: string): boolean {
+function isUrlHostedbyShopify(url: string, allowedDomains: string[] = []): boolean {
   const urlObj = new URL(url);
-  return SHOPIFY_CDN_DOMAINS.includes(urlObj.hostname);
+  return [...SHOPIFY_CDN_DOMAINS, ...allowedDomains].includes(urlObj.hostname);
 }
 
-function valueIsDefinitelyNotShopifyHosted(attr: ValuedHtmlAttribute): boolean {
+function valueIsDefinitelyNotShopifyHosted(
+  attr: ValuedHtmlAttribute,
+  allowedDomains: string[] = [],
+): boolean {
   return attr.value.some((node) => {
     if (node.type === NodeTypes.TextNode && /^(https?:)?\/\//.test(node.value)) {
-      if (!isUrlHostedbyShopify(node.value)) {
+      if (!isUrlHostedbyShopify(node.value, allowedDomains)) {
         return true;
       }
     }
@@ -60,7 +64,7 @@ function valueIsDefinitelyNotShopifyHosted(attr: ValuedHtmlAttribute): boolean {
       if (isLiquidVariable(variable)) {
         const expression = variable.expression;
         if (expression.type === NodeTypes.String && /^https?:\/\//.test(expression.value)) {
-          if (!isUrlHostedbyShopify(expression.value)) {
+          if (!isUrlHostedbyShopify(expression.value, allowedDomains)) {
             return true;
           }
         }
@@ -96,7 +100,11 @@ function valueIsShopifyHosted(attr: ValuedHtmlAttribute): boolean {
   });
 }
 
-export const RemoteAsset: LiquidCheckDefinition = {
+const schema = {
+  allowedDomains: SchemaProp.array(SchemaProp.string()).optional(),
+};
+
+export const RemoteAsset: LiquidCheckDefinition<typeof schema> = {
   meta: {
     code: 'RemoteAsset',
     aliases: ['AssetUrlFilters'],
@@ -108,11 +116,13 @@ export const RemoteAsset: LiquidCheckDefinition = {
     },
     type: SourceCodeType.LiquidHtml,
     severity: Severity.WARNING,
-    schema: {},
+    schema,
     targets: [],
   },
 
   create(context) {
+    const allowedDomains = context.settings.allowedDomains || [];
+
     function checkHtmlNode(node: HtmlVoidElement | HtmlRawNode) {
       if (!RESOURCE_TAGS.includes(node.name)) return;
 
@@ -124,11 +134,14 @@ export const RemoteAsset: LiquidCheckDefinition = {
 
       const isShopifyUrl = urlAttribute.value
         .filter((node): node is TextNode => node.type === NodeTypes.TextNode)
-        .some((textNode) => isUrlHostedbyShopify(textNode.value));
+        .some((textNode) => isUrlHostedbyShopify(textNode.value, allowedDomains));
 
       if (isShopifyUrl) return;
 
-      const hasDefinitelyARemoteAssetUrl = valueIsDefinitelyNotShopifyHosted(urlAttribute);
+      const hasDefinitelyARemoteAssetUrl = valueIsDefinitelyNotShopifyHosted(
+        urlAttribute,
+        allowedDomains,
+      );
       if (hasDefinitelyARemoteAssetUrl) {
         context.report({
           message: 'Asset should be served by the Shopify CDN for better performance.',
@@ -167,7 +180,10 @@ export const RemoteAsset: LiquidCheckDefinition = {
       if (hasAsset) return;
 
       const urlNode = parentNode.expression;
-      if (urlNode.type === NodeTypes.String && !isUrlHostedbyShopify(urlNode.value)) {
+      if (
+        urlNode.type === NodeTypes.String &&
+        !isUrlHostedbyShopify(urlNode.value, allowedDomains)
+      ) {
         context.report({
           message: 'Asset should be served by the Shopify CDN for better performance.',
           startIndex: urlNode.position.start,