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;
    },
  };
}