I'm running into a scenario where I can't tell if Locker is preventing accessing an API call from a third-party script that's been whitelisted.
I'm using Qualtrics survey tool to poll users on our Salesforce Community site. Qualtrics provides a <script>
to their API that I've added to the Community head which generates the survey pop-up when the page loads. I've whitelisted https://*.qualtrics.com
under CSP Trusted Sites.
Because we're building single-page apps in Salesforce Lightning, the Qualtrics documentation suggests manually loading the JavaScript API by calling the Qualtrics QSI
object.
My component calls doInit
:
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
<aura:handler name="init" action="{!c.doInit}" value="{!this}" />
</aura:component>
Controller.js calls loadQualtrics
:
doInit : function(component, event, helper) {
try {
helper.loadQualtrics(component, event, helper);
} catch (e) {
console.error(e);
}
}
My Helper.js is using an eventListener on loadQualtrics
to determine when the QSI
object is ready...
loadQualtrics: function(component, event, helper) {
window.addEventListener("qsi_js_loaded", helper.interceptLoaded(component, event, helper), false);
}
...and if QSI
is ready, the interceptLoaded
function in Helper.js runs the methods in the QSI
object:
interceptLoaded : function(component, event, helper) {
QSI.API.unload();
QSI.API.load();
QSI.API.run();
}
When I run this in my scratch org I get ReferenceError: QSI is not defined
. If I create a static HTML page on my dekstop with the Qualtrics <script>
in the head and add some basic functions in plain JavaScript, I can access the QSI
object. Is Locker service preventing me from accessing?
({ loadQualtricsAPI : function(component, event, helper) { setTimeout(function() { console.log("loadQualtricsAPI event..."); let siteIntercept = new Event("loadSiteIntercept"); window.dispatchEvent(siteIntercept); console.log("loadQualtricsAPI event complete"); }, 3000); }
– Matt Smith Jan 21 '20 at 15:59