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}" />

Controller.js calls loadQualtrics:

doInit : function(component, event, helper) {
    try {
        helper.loadQualtrics(component, event, helper);
    } catch (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) {

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?

  • Did you ever get this figured out? I'm experiencing the same problem. From what I can tell and from what I've researched, Salesforce is blocking access to the global namespace so you're not able to access the QSI object (which exists globally) from within the Aura component. I'm not sure of a way around it. – Eric Jan 17 '20 at 18:53
  • 1
    @Eric I didn't get it figured out completely. Had to add an event listener in the community head to wait for the object to load. But had to set a timeout because doInit would load before the QSI object was ready. ({ 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

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.

  • Oleh -- I tried that and Locker is appending data-locker-src to the script: <script data-locker-src="/core/resources/assets/myJsFile.js" type="text/javascript"></script> – Matt Smith Aug 20 '19 at 13:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.