2

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

2
  • 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

2 Answers 2

1

I am having the same problem. Just posted about it on Trailblazer and in the lwc github. I have no events bound at all (no JS in the component at all) and you still get this error when you click to a step. It's because they left a "javascript:void" behind in their code.

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

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.