CODEWITHSUNDEEP
javascriptcorsazure-application-insights
Nikolay
Nikolay

Reputation: 12245

azure AppInsights and third-party script CORS problem

I have application insights enabled on my app website, and then have a third-party script loaded that communicates with its own website.

The problem is that app insights instruments the global XMLHttpRequest object, and when that script tries to fetch data from its own site it gets CORS error because it's sent actually from app insights (different origin).

How can I worka round the issue? Can I tell app insights not to instrument the XMLHttpRequest? (I don't really need it)

To clarify the the problem:

<body>
...
<script>
// this instrumetns XMLHttpRequest
const appInsights = new ApplicationInsights({
  config: {
    instrumentationKey: SOM_APPINSIGHTS_INSTRUMENTATIONKEY
  }
});
</script>
</body>

// this fails because XMLHttpRequest is instrumented (CORS error)
<script><script type="text/javascript" src="https://js.hs-scripts.com/XXX.js"></script>
</body>

The Error (in the latest Chrome browser):

Access to XMLHttpRequest at 
'https://api.hubspot.com/livechat-public/v1/message/public?portalId=XXXXXXXX' 
from origin 'http://localhost:3333' has been blocked by CORS policy: 
Request header field traceparent is not allowed by Access-Control-Allow-Headers in preflight response.

(anonymous) @ InstrumentHooks.js:97       <<<<<< this is app insights code
f @ fetchWidgetData.js:78                 <<< this is third-party javascript
loadWidget @ WidgetShell.js:498
(anonymous) @ throttle.js:21
start @ WidgetShell.js:581
v @ startOnceReady.js:55
I @ startOnceReady.js:96
(anonymous) @ startOnceReady.js:111
captureErrors @ ErrorLogger.js:119
b @ startOnceReady.js:110
(anonymous) @ start.js:18
s @ bootstrap:19
(anonymous) @ bootstrap:97
(anonymous) @ conversations-embed.js:1

Upvotes: 2

Views: 2631

Answers (1)

Nikolay
Nikolay

Reputation: 12245

Got the solution here

Basically the problem was caused by traceparent header sent by app insights. There is an option to disable that for specific third-party sites in app insights config, the correlationHeaderExcludedDomains option did the trick:

const insights = new ApplicationInsights({
  config: {
    instrumentationKey: ...
    correlationHeaderExcludedDomains: ['js.hs-scripts.com', 'api.hubspot.com'],

Upvotes: 4

Related Questions