AWS S3 JavaScript SDK with Lightning Web Component issue Resource violated directive 'connect-src 'self'

Question

Well I am not able to figure out whats went wrong in this code. I want to list all available documents from my bucket on a button click. I am calling this listS3Objects method but throwing CSP14312: Resource violated directive 'connect-src 'self' https://api.bluetail.salesforce.com https://staging.bluetail.salesforce.com https://preprod.bluetail.salesforce.com https://*.s3.amazonaws.com https://*.ap15.visual.force.com https://*.salesforce.com https://avijitg-dev-ed--c.ap15.content.force.com *.ap15.visual.force.com https://ap15.salesforce.com' in Content-Security-Policy: https://avijit-s3-test-bucket2.s3.eu-west-1.amazonaws.com/. Resource will be blocked. error though I have added all above sites in CSP Trusted Sites.

Any help?

/* eslint-disable no-console */
    import { LightningElement } from "lwc";
    import { loadScript } from "lightning/platformResourceLoader";
    import AWS_SDK from "@salesforce/resourceUrl/AWSSDK";

    export default class Fileupload_aws_s3bucket extends LightningElement {
      bucketName = "BUCKET__NAME";
      accessKeyId = "ACCESS__KEY";
      secretAccessKey = "SECRET__KEY";
      region = "eu-west-1";
      s3;
      awsSdkInitialized = false;

      renderedCallback() {
        if (this.awsSdkInitialized) {
          return;
        }
        this.awsSdkInitialized = true;
        console.log("AWS_SDK -> " + AWS_SDK);
        Promise.all([loadScript(this, AWS_SDK)])
          .then(() => {
            this.awsSdkInitialize();
          })
          .catch(error => {
            console.log("error -> " + error);
          });
      }

      awsSdkInitialize() {
        const AWS = window.AWS;
        //console.log("AWS -> " + JSON.stringify(AWS));
        AWS.config.update({
          accessKeyId: this.accessKeyId,
          secretAccessKey: this.secretAccessKey
        });

        AWS.config.region = this.region;

        this.s3 = new AWS.S3({
          params: { Bucket: this.bucketName }
        });
      }

      listS3Objects() {
      console.log("AWS -> " + JSON.stringify(this.s3));
        this.s3.listObjects(function(err, data) {
          if (err) {
            console.log("Error", err);
          } else {
            console.log("Success", data);
          }
        });
      }
    }

Answer 1

I was able to get it all working without any modification to code and adding below CSP to the org.

Go to Setup > Security > CSP Trusted Sites and create a below entry

NOTE : CSP is cached so try to clear the browser cache and hard reload before testing new CSP setting