Configuring CSP in NUXT

Encountering CSP blocking with my local js files. Below is my nuxt.config.js:

      unsafeInlineCompatibility: true,
      policies: {
        'default-src': ["'self'", 'delivly.com', 'localhost', '*.gstatic.com', '*.fontawesome.com'],
        'script-src': ["'unsafe-inline'", 'delivly.com', 'localhost', '*.fontawesome.com', '*.googlesyndication.com', '*.googletagmanager.com'],
        'style-src': ["'self'", "'unsafe-inline'", 'delivly.com', '*.googleapis.com', '*.fontawesome.com'],
        'connect-src': ["'self'", 'wss://delivly.com']
      },
      addMeta: true
    }

List of blocked files:

http://localhost:3010/_nuxt/runtime.js
http://localhost:3010/_nuxt/pages_index.js
http://localhost:3010/_nuxt/commons.app.js
http://localhost:3010/_nuxt/vendors.app.js
http://localhost:3010/_nuxt/app.js

If anyone has insights on the issue, please share.

Answer №1

Even though the original question may have gone unanswered, this information could be useful for a new group of individuals.

In the realm of HTTP, the localhost serves as a host-source, limited to standard ports only. When transitioning to an HTTP page, localhost will become http://localhost following the Same Origin Policy to restore the scheme. With the http:// scheme, port 80 is standard and any other ports will be restricted by CSP (with CSP3 browsers allowing port 443).

To enable various ports, use * like so:
'default-src': ['localhost:*']
or specify the specific port number:

'default-src': ['localhost:3010']

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

Creating powerful Vue event handlers with composable functions

I am currently working with Vue 2.0, ES6, and Webpack. In my project, I have a Parent component and several child components called text-input. Each text-input emits a change event that should modify a different property inside the Parent component. For i ...

Having trouble retrieving data from the payload within vuex actions

I am currently utilizing Vuex for state management. Here is my store.js file: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); export const store = new Vuex.Store({ state: { loggedIn : false }, getters: {}, mutations: ...

Nuxt.js encounters difficulties in fetching information from the Django Rest Framework API

I am currently developing a Nuxt.js/Vue frontend for my Django Rest Framework backend. Despite specifying permissions to allow non-authenticated users to read-only, I am having trouble successfully loading data from my API. Index.vue import axios from &a ...

Determine the variance in dates within the Document Object Model

I'm attempting to find the time difference between two dates. If the difference is greater than or equal to 6 hours, an image should be displayed. However, the code is not functioning properly. <img v-else-if="dateList[0] > day.date >= ...

The Card Component from Core UI fails to appear in the Print Preview feature

I'm currently experimenting with the Card Component from the Core UI framework. However, I'm facing an issue where the color of the Card component and its associated icon do not appear in the Preview when trying to print the page. I attempted to ...

The method for triggering an event upon mounting in Vuejs

I have a sidebar displayed below: <template> <section> <div class="sidebar"> <router-link v-for="(element, index) in sidebar" :key="index" :to="{ name: routes[index ...

The VUE project I'm working on seems to be having compatibility issues with the Bootstrap modal in V

I added bootstrap using npm and inserted the code from bootstrap into my project, but it's not functioning correctly. I've spent an hour trying to troubleshoot, but still no luck. Here is the code snippet: <template> <div> <! ...

Tips for showcasing the content of a variable

Extracts information from a collection: const pageTitles = { homePage: 'Main' ... } export default pageTitles When I attempt to display it like this: <div><span>{{pageTitles.homePage}}</span></div> everything funct ...

Limiting the table width in TinyMCE

Currently, I am utilizing TinyMCE within a Vue application. I've set up TinyMCE with the table_grid: false configuration, causing a dialog to appear when a table is created. This dialog allows users to specify rows, columns, width, and more. Within t ...

Develop a straightforward static webpage and set it up by installing and launching it using NPM

I am attempting to craft a straightforward HTML page that incorporates CSS/JS and utilizes npm. The objective is to construct a basic page that can be accessed by simply using "npm install" and "npm start". As an example, I will design a page with HTML, ...

Utilize data attributes in VueJS to dynamically style elements

Is there a way to utilize the data() values within the <style>..</style> section? I have experimented with different combinations (using/omitting this, with/without {{brackets}}, etc.) but haven't been successful. Interestingly, when I man ...

VUE array values not displaying flex-row properly

I've been working on creating an array of items in Vue and trying to use Tailwind CSS to make them flex-row, but I can't seem to get it right. Maybe there's something about the flex-row feature in Tailwind CSS that I'm missing. <div ...

Connect the plotly library to interact with the data in a Vue.js application through

I'm currently working on a project that involves using vue.js and the plot.ly JavaScript graph library. I am trying to figure out how to bind "pts" to the data's "TestSentences" in Vue. Below is my code snippet, thanks to everyone who has provide ...

What is the best way to include an image link in a JSON file using Nuxt.js?

I am working with nuxtjs and I have a file named data.json in the root directory. I am trying to add an image link in this JSON file, but it is not recognizing it. Here is my code: { "id": 1, "cardImg": "./assets/images/ima ...

Dynamically generate Nav List Items in Vue.js based on the paths of route children

I am attempting to create a dynamic navigation list using the routes defined in my routes.js: const routes = [ { path: '/', component: () => import('layouts/MainLayout.vue'), children: [ { ...

What is the best method for transferring updated data from the frontend to the backend without needing to store any unchanged values?

After importing a list from a database using axios and storing it in a variable called tasks, each object may resemble the following structure: tasks: [ { title: 'some text here' }, { completed: false }, ] If there are 2000 or 3000 of ...

Hydrate a SSR VUE application to some extent

We are currently working on a website that unfortunately features numerous advertisements. Our plan is to utilize VUE for building the site, implement server side rendering, and then hydrate it on the client side. The issue lies in the fact that these adv ...

Unexpected error 500 (Internal Server Error) occurred due to BadMethodCallException

Using Vue 2.0 and Laravel 5.4, I am working on creating a matching system that includes a dynamic Vue component. For example, when someone likes another person, it should immediately show that the like has been sent or if the like is mutual, it should indi ...

What is the solution for addressing the absence of an 'Access-Control-Allow-Origin' header in the requested resource while using axios?

Here is my Vue script: <script> export default { ... methods : { login() { // uri -> http://my-app.test/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="472b28202e2978222a262e2b7a332234330720 ...

Setting outline colors programmatically in Vuetify

Looking for tips on how to dynamically change the outline color of a v-text-field. My initial idea was something like this: <v-text-field v-model="value" :class="value === 0 ? greenStyle : regularStyle"/> <style> .greenS ...