What steps can I take to resolve the CSP errors I am experiencing?

I am currently working with NextJs@12 and I am attempting to set up CSP for my application. Unfortunately, I keep encountering errors in my console and I cannot figure out where I am going wrong. Below is the current policy that I have in my next.config file.

  {
    key: "Content-Security-Policy",
    value: "default-src 'self' cdn.jsdelivr.net; script-src 'self' https://cdn.jsdelivr.net/npm/@shoelace-style/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98ebf0f7fdf4f9fbfdd8aab6a8b6a8b5fafdecf9b6acAf">[email protected]</a>/dist/chunks/chunk.HAL7R4WT.js https://embed.tawk.to/_s/v4/app/61adcafd0e1/js/twk-chunk-vendors.js https://js.paystack.co/v1/inline.js https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtm.js 'unsafe-inline' 'unsafe-eval'; connect-src 'self' https://eljsuiwhwbb5lp5lmre5eifzuu.appsync-api.us-east-1.amazonaws.com https://embed.tawk.to https://va.tawk.to https://vitals.vercel-insights.com https://vsb75.tawk.to https://vsb89.tawk.to https://www.google-analytics.com wss://eljsuiWhwbb5lp5lmre5eifzuu.appsync-realtime-api.us-East-1.amazonAws.com wss://vsb75.tawk.to wss://vsb89.tawk.to; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://embed.tawk.to https://fonts.googleapis.com; img-src 'self' data: https://embed.tawk.to https://res.cloudinary.com https://tawk.link https://www.google-analytics.com;",
  },

So far, I have been encountering this error: https://i.stack.imgur.com/G940Y.png

If anyone could provide assistance in resolving this issue, it would be greatly appreciated. I have been troubleshooting this all day.

javascriptcssnext.jshttp-headerscontent-security-policy

Answer №1

Typically, hosts are the only sources specified in CSP, not the entire URL. Assuming you are using HTTPS, there is no need to mention that specifically, but remember to include 'wss' in your policy. Here's a revised version for you to try:

default-src 'self' cdn.jsdelivr.net; script-src 'self' cdn.jsdelivr.net embed.tawk.to js.paystack.co www.google-analytics.com www.googletagmanager.com 'unsafe-inline' 'unsafe-eval'; connect-src 'self' eljsuiwhwbb5lp5lmre5eifzuu.appsync-api.us-east-1.amazonaws.com embed.tawk.to va.tawk.to vitals.vercel-insights.com vsb75.tawk.to vsb89.tawk.to www.google-analytics.com wss://eljsuiwhwbb5lp5lmre5eifzuu.appsync-realtime-api.us-east-1.amazonaws.com wss://vsb75.tawk.to wss://vsb89.tawk.to; style-src 'self' 'unsafe-inline' cdn.jsdelivr.net embed.tawk.to fonts.googleapis.com; img-src 'self' data: embed.tawk.to res.cloudinary.com tawk.link www.google-analytics.com;"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Understanding the repetition of the X axis in Recharts for ReactJS

I am facing an issue where the X axis on my graph is repeating three times for each month of the year. I have tried adding my data, but the duplication persists. Can anyone provide insight on how to correct this error? What am I doing wrong? Below is a mi ...

javascriptreactjsrecharts

Increase value continuously when button is pressed down using Material UI

I am looking for a way to continuously increment a value while holding down a button. I have already managed to make it increment on click, but now I want to keep it increasing as long as the button is held down. How can this be achieved using material u ...

javascriptreactjsmaterial-ui

The hexagons configuration for tsParticles is experiencing technical difficulties

I'm struggling to implement the tsParticles library (specifically using react-tsparticles) in combination with the latest version of Next.js. However, when I try to use the particle.json file and bind it to the <Particles/> component, the partic ...

javascriptreactjsnext.jsparticlesparticles.js

What could be causing the div to not respond to ngAnimate?

Recently, I encountered an issue with adding animations to a list of <div>'s in my webapp. After incorporating ngAnimate into the app.js file and including ng-animate="'animate'" in the <div>, I was disappointed to find that the ...

javascripthtmlcssangularjs

What is the correct way to display or hide a button based on my specific situation?

Creating a 'show more' button for my app has presented me with a challenge. I am using a directive to handle actions when the user clicks on the read more button: (function(window, angular) { var app = angular.module('myApp'); ...

javascripthtmlangularjs

Open a fresh window using Javascript and add new content inside

After creating a script that opens a window and writes content when the button is clicked once, I noticed that clicking the button again causes the window to gain focus instead of rewriting the content. Does anyone have any ideas on how to fix this issue ...

javascriptwindow

Tips and tricks for personalizing the leaflet Lopup component using vue js

Seeking guidance on customizing the design of the LPopup component in leafletjs. I found a helpful guide at: After inspecting the Lpopup in the dev tools, I tried adding CSS styles to the 'leaflet-popup-content-wrapper' selector (please refer to ...

javascriptvue.jsleafletpopup

How to share information between ES6 classes?

Recently, I decided to create a node/express app just for fun. One of the components I built is an ES6 class called 'TwitterClient.es6' that interfaces with the Twitter API to fetch data. Now, in my 'server.es6', which handles the route ...

javascriptnode.js

The animation feature on the slideshow is dysfunctional

For this Vue component, I attempted to create a slideshow. The process is as follows: 1) Creating an array of all image sources to be included (array: pictures) 2) Initializing a variable(Count) to 0, starting from the beginning. 3) Adding v-bind:src=" ...

javascripthtmlcssanimationvue.js

Experimenting with a Vercel preview application through the use of Cypress testing

Is there a way to automatically retrieve the URL of a preview app on Vercel when a pull request is made in a Next.js project deployed via GitHub? I am looking to use Cypress for testing purposes on this deployed app, but I'm struggling to find a metho ...

next.jsgithub-actionscypressvercel

Creating a Timeless Banner with the Magic of `background:url()`

I have a banner placed within a div tag that displays my banner image. I am trying to create a fading effect when transitioning to the next image, but I am struggling to achieve this. I attempted to use jQuery fadeIn(), however, it did not work as expected ...

javascriptjquerycss

Implementation of Gallows Game

SITUATION Recently, I took on the challenge of creating a "HANGMAN" game using JavaScript and HTML exclusively for client-side machines. The logical part of the implementation is complete, but I am facing a hurdle when it comes to enhancing the aesthetics ...

javascript

Is there a more efficient method for implementing server side rendering in a Next.js application?

Currently, I am implementing server-side rendering in my Next.js application. This specific component is responsible for returning HTML content. I'm wondering if there are more efficient methods available? import Feature from 'components/home/Fea ...

javascriptnext.jstypescript-typings

Understanding the proper way to enclose JSX components and exhibit JSON based on user input

I'm currently working on a university administration website using React that needs to support multiple languages. I have successfully built the Login page, which you can see here: https://i.stack.imgur.com/cIiaU.png Now, my next task is to allow us ...

javascriptjsonreactjsjsxbabeljs

I have exhausted all options trying to filter a 2D array in JavaScript

The 2D array provided is formatted as follows : [[ONE,1],[QUARTER,0.25],[QUARTER,0.25]] The desired output should be : [[ONE,1],[QUARTER,0.5]] An attempt was made using array.IndexOf but did not yield the expected result ONE,1,QUARTER,0.25,QUARTER,0.2 ...

javascriptarraysfilterduplicates

Filtering content with a sliding effect using CSS and JavaScript

I'm currently developing a jQuery mobile app that requires filtering posts on a specific page. I have already added the posts and designed the filter. Take a look at how it appears below: I am working on animating the filter so that when the user se ...

javascriptjqueryhtmlcssanimation

Having trouble with getting Express to automatically redirect to the main page upon user login

Currently, I am working on setting up a user login section. Despite the user_router successfully sending a JSON response, I am facing an issue with getting Express to send a new HTML page back to the client. The initial page offered is login.html, which co ...

javascriptnode.jsexpresshttprequest

Discovering a particular string within a jQuery array object: Tips and tricks

One thing that is confusing me is the jQuery array object. To explain further: I have two arrays, one called brandsLink and the other called floorLink. When a user clicks on a link, I am saving the brand name in a variable called brandName, and then checki ...

javascriptjqueryhtmlcss

Combining the powers of Javascript and Drupal can create

My current setup includes an "open video" button and a form that triggers an ajax call to render files with the corresponding buttons when users click on handouts or videos. I have encountered a problem: Whenever I click on "open the video" after renderi ...

javascriptjquerydrupalonclickdrupal-7

Extracting the call from REST API in JSON format

Working with a third-party database using a REST API, I encountered an error response (as expected). Here is the code snippet: transaction.commit(function(err) { if (err){ var par = JSON.parse(err); \\ leading to error: SyntaxError: Unexpecte ...

javascriptjson