Consider setting crossorigin in loadScript

[alecmocatta]

loadScript is used to load recorder.js, surveys.js, exception-autocapture.js and toolbar.js:

posthog-js/src/utils/index.ts

Lines 462 to 487 in fd0f19e

	export function loadScript(scriptUrlToLoad: string, callback: (error?: string | Event, event?: Event) => void): void {
	const addScript = () => {
	if (!document) {
	return callback('document not found')
	}
	const scriptTag = document.createElement('script')
	scriptTag.type = 'text/javascript'
	scriptTag.src = scriptUrlToLoad
	scriptTag.onload = (event) => callback(undefined, event)
	scriptTag.onerror = (error) => callback(error)
	const scripts = document.querySelectorAll('body > script')
	if (scripts.length > 0) {
	scripts[0].parentNode?.insertBefore(scriptTag, scripts[0])
	} else {
	// In exceptional situations this call might load before the DOM is fully ready.
	document.body.appendChild(scriptTag)
	}
	}
	if (document?.body) {
	addScript()
	} else {
	document?.addEventListener('DOMContentLoaded', addScript)
	}
	}

Adding scriptTag.crossOrigin = "" here might be worthwhile. But I know little about this stuff so I'll just share what led me to it.

In our app we log all uncaught exceptions i.e. those triggering the window error or unhandledrejection events. We recently started getting error events that just contained the message Script error.. These are the only errors we've seen without a stacktrace. Fortunately we were able to reproduce locally and tracked it down to rrweb-io/rrweb#1444.

I believe the errors are opaque due to cross-origin security restrictions. Per MDN per https://stackoverflow.com/questions/41069330/with-script-crossorigin-anonymous-why-is-a-script-blocked-by-cors-policy/71829749#71829749:

When an error occurs in a script, loaded from a different origin, the details of the error are not reported to prevent leaking information (see bug 363897). Instead the error reported is "Script error." This behavior can be overridden in some browsers using the crossorigin attribute on <script> and having the server send the appropriate CORS HTTP response headers.

See also https://stackoverflow.com/questions/5913978/cryptic-script-error-reported-in-javascript-in-chrome-and-firefox/7778424#7778424.

It would great to get a useful error when rrweb or other dependencies of PostHog throw an exception, so we can narrow down for example whether it's our app (high priority) or product analytics (low). Access-Control-Allow-Origin: * is already sent in the HTTP responses so I think all that's needed is adding .crossOrigin = "" to loadScript above, as well as the JS snippet.

I don't know if there are any downsides, feel free to close if this isn't workable. From a quick search it looks like it might also solve #976.