3

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

3
  • It doesn't looks like an error from this code. Maybe the getter are evaluated and something else gets triggered or maybe this is not related to you code. It it a community?
    – manjit5190
    Sep 14, 2020 at 21:09
  • @manjit5190 Hi manjit, there are no getters in the js and it isn't a community.. The lwc is on an opportunity record page. Sep 15, 2020 at 10:36
  • You can try the tips on CSP suggested by this video (youtu.be/mXNayq60zpo?si=-cXEj3avkRg6tahv&t=100)
    – compski
    Sep 15, 2023 at 2:19

2 Answers 2

0

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

0

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();
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .