LWC CSP script-src self error

Question

I've been having this issue for the last 2 days or so. I have an lwc with its corresponding controller. the lwc contains a lightning-progress-indicator with a path type and has a onclick={setSelectedStage} function.

    setSelectedStage (event) {
      this.selectedStage = event.target.value
      // this.buttonIconLabelValue(event.target.value)
    }

And the html

<lightning-progress-indicator current-step={completedStage} type="path" variant="brand" class="slds-size_10-of-12">
  <template if:true={stageValues} for:each={displayValues} for:item="stage">
    <lightning-progress-step label={stage.label} value={stage.value} key={stage.id} data-position={stage.position} onclick={setSelectedStage}></lightning-progress-step>
  </template>
</lightning-progress-indicator>

The Problem

Everytime I click on a stage of the path I get the error

Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-18ed307f-7b15-cdb6-34e7-1a8ed53bfc30' chrome-extension: 'unsafe-inline' 'unsafe-eval' *.canary.lwc.dev *.cs108.visual.force.com https://ssl.gstatic.com/accessibility/". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

Can someone please help? I've searched other similar questions on the topic of CSP but nothing seems to help.

Thanks

Answer 1

I've also faced case with problem with similar error. But for me, source of issue was using of fetch method in JS. Adding endpoint to CSP Trusted Sites and Remote Site Settings may be a solution of similar problems, as it was in my case. See additional info: Configure Remote Site Settings, Adding Remote Site Settings, Create CSP Trusted Sites to Access Third-Party APIs

Answer 2

I ran into a similar issue (doing this from within a modal).

My fix was to use event.preventDefault();. So your method would look something like:

setSelectedStage (event) {
  this.selectedStage = event.target.value;
  event.preventDefault();
}