How to add crossOrigin attribute to script tags generated by <Scripts /> ?

[myamaak]

I'm looking for the correct way to add a crossOrigin attribute to all the <script> tags generated by my TanStack Start application.

When serving JS assets from a different origin (e.g., a CDN), browsers mask the details of any errors thrown from those scripts for security reasons. This results in a generic and unhelpful "Script error." message.

The standard solution is to add crossorigin="anonymous" to the script tags. This allows the browser to expose the full error details, restoring essential debugging and error handling capabilities.

In Next.js, this is handled via a simple global configuration:

// next.config.js
module.exports = {
  crossOrigin: 'anonymous',
}

I'm trying to achieve the same result in TanStack Start.

Could you please advise on the recommended way to achieve this? Is there an existing mechanism I've missed, or would this be considered a feature request?

[schiller-manuel]

we dont have this yet. needs to be added

[myamaak]

Then do you have any workaround for this until the new feature is added? I did try something like below using vite plugin. But It didn't seem to work in tanstack start cause it's html is (obviously) generated in runtime ...

function addCrossoriginAttribute(): PluginOption {
  return {
    name: "add-crossorigin-attribute",
    transformIndexHtml(html: string) {
      const updatedHtml = html.replace(
        /<script/g,
        '<script crossorigin="anonymous"',
      );

      return updatedHtml;
    },
  };
}

[mikeflame]

@schiller-manuel's "needs to be added" was right in February. It has since landed as transformAssets on createStartHandler in #7009, first released in @tanstack/react-start 1.167.5. The current shape is in 1.168.11+: a script kind that also covers the entry <script>. Before that the per-kind key was called modulepreload and only covered <link> tags. The docs still mark the feature experimental: CDN Asset URLs.

// src/server.ts (picked up automatically, replaces the default server entry)
import { createStartHandler, defaultStreamHandler } from '@tanstack/react-start/server'
import { createServerEntry } from '@tanstack/react-start/server-entry'

const fetch = createStartHandler({
  handler: defaultStreamHandler,
  transformAssets: {
    prefix: process.env.CDN_ORIGIN || '', // '' leaves URLs unchanged and only adds the attribute
    crossOrigin: 'anonymous', // or { script: 'anonymous' } to leave stylesheets alone
  },
})

export default createServerEntry({ fetch })

This sets crossorigin="anonymous" on the entry <script type="module" src>, the <link rel="modulepreload"> tags and the manifest <link rel="stylesheet"> tags (shorthand, where it's applied). If you use a prefix, also set Vite base: ''. Otherwise lazy route chunks load from the app server during client navigation (docs).

There is also <HeadContent assetCrossOrigin="anonymous" />, but it only changes the <link> tags. <Scripts /> takes no props and renders the manifest's script attrs unchanged (bodyScripts.ts), so put the setting in transformAssets.

About the Next.js comparison. Next's chunks are classic scripts, and for classic scripts crossorigin decides whether errors are muted. Start on Vite ships type="module" (manifestBuilder.ts). The HTML spec treats module scripts differently in two ways. They are always fetched in CORS mode, and only classic scripts have "muted errors" (script crossorigin, report an exception). On a module script, anonymous and a missing attribute both give credentials mode same-origin (spec). So your own bundles won't produce "Script error." whether or not the attribute is there. If the CDN doesn't send CORS headers, they fail to load instead.

The attribute does change behaviour in two cases: stylesheets (it switches them from no-cors to cors) and Rsbuild iife output (classic scripts). If you still see "Script error.", look for classic scripts: third-party tags, or head().scripts with a cross-origin src. For the latter you can pass crossOrigin: 'anonymous' yourself.

CDN checklist. This comes from a Next.js app at work, where adding crossorigin to our CDN scripts removed about 90% of "Script error." reports.

1. The CDN must send Access-Control-Allow-Origin on both JS and CSS. Vite's dynamic-import preload helper already sets crossOrigin = '' on the links it adds, including CSS (importAnalysisBuild.ts). The simplest setup is a static * on every response. If you echo the request origin instead, also send Vary: Origin (Fetch spec).
2. Error responses need the header too. Ours returned 404s without it, so a stale chunk after a deploy showed up in the console as a "CORS error" instead of a 404. We fixed it by making the CDN add the header on 4xx/5xx responses as well (on CloudFront that's a response headers policy). We also keep previous builds' assets around for a grace period after each deploy.
3. Don't add crossorigin to third-party scripts whose CDN doesn't send Access-Control-Allow-Origin, or they will stop loading.
4. Check both a real asset and a missing one. Both should show access-control-allow-origin:

   curl -sI -H 'Origin: https://app.example.com' https://cdn.example.com/assets/main-abc123.js | grep -iE '^(HTTP|access-control-allow-origin|vary)'
   curl -sI -H 'Origin: https://app.example.com' https://cdn.example.com/assets/missing.js | grep -iE '^(HTTP|access-control-allow-origin|vary)'

5. The "Script error." reports left after all this came from browser extensions, in-app webviews and bots. Filter empty-stack "Script error." events in your error tracker.