Locker Service Blocking Access to Third-Party Object

Question

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?

Answer 1

You can try to set Script Security Level of your Community Builder to Allow Inline Scripts and Script Access to Whitelisted Third-party Hosts

Content Security Policy Restrictions in Communities Strict CSP tightens CSP to mitigate the risk of cross-site scripting attacks by disallowing the unsafe-inline and unsafe-eval keywords for inline scripts (script-src). Ensure that your code and the third-party libraries that you use adhere to these rules by removing all calls using eval() or inline JavaScript code execution. Consider updating your third-party libraries to modern versions that don’t depend on unsafe-inline or unsafe-eval.