anyone have made CSP strict-dynamic working on nuxt?
i've successfully added CSP headers to the page (nonce is genereated in nuxtServerInit and injected to cspScriptSrcHashes array into 'render:route' hook (and i can see it into rendered page CSP within teh browser);
the problem is that no nonce is added to scripts genereted by nuxt and its components;
i tried to set "nonce" prop in vuex store root, i also checked that csp is enabled in nuxt.config but nothing is working
the same thing is about hashes ('sha256' value in render.csp.hashAlgorithm)
on what i'm wrong?
thank you
Related
I had a requirement in a project of mine using NUXT JS to add CSP for a particular page only. The CSP headers that we provide should also be dyanamic. I looked through various articles which mentioned implementing CSP using the nuxt.config.js file for the entire NUXT application. Also if I change the values in the CSP property I need to restart the server each time (Also not sure about how to implement that). Is the above requirement possible to implement in NUXT..?
I have a single page (SPA) application written in Vue.
Now I need a separate page that should be available without being signed in.
To me it seems like a need to enable multi page app (MPA). I see in the documentation (https://cli.vuejs.org/config/#pages) that I need to set this up in vue.config.js. But I the documentation is unclear to me. Do I need to edit/rerun the Vue CLI setup? Or do some webpack changes. Just adding a new page entry with corresponding files does not work (webpack does not insert anything in html-file).
From SPA View, i would likely go like this
Inside /views folder
- HomePage.vue (no auth)
- Login.vue
- /users/ subfolder (auth needed)
- DashBoard.vue
- About.vue
etc
Then define the routes (paths,components,etc.) with requiresAuth as auth-check, redirects back to the route with HomePage.vuecomponent then.
and SPA mostly comes with MPA Challenges such as SEO, SSR concerns. The routing roughly the same to Vue/Nuxt.
Im trying to use workbox to save in cache some stuff for my project, I have already made it to save all my js and css files, fonts, etc, there's one thing missing and that is my project's content that is stored in my pc, Im using axios to fetch my database data, workbox seems to ignore the requests sent from axios, I have made a test and changed one axios request to "fetch" and it worked, it was successfully cached, theres any way to make it work using axios?
This is my code:
importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.0/workbox-sw.js");
workbox.routing.registerRoute(
new RegExp('http://localhost/Odr/connections/'),
workbox.strategies.cacheFirst(),
);
There's nothing specific about axios that should prevent its requests from being intercepted by Workbox, or in general, from triggering the fetch handler inside of a service worker. XMLHttpRequests made from client pages do result in the fetch handler being fired.
I would recommend using a debug build of Workbox (which is the default if you're developing on http://localhost) and then opening the JavaScript console when you attempt your axios request. There are debugging messages that should shed light on Workbox's routing logic, including whether a particular request triggering a route or not.
I'm new to CSP and my goal is to enable the simplest possible CSP header.
Based on reading the spec and MDN docs I thought my app should work but unfortunately no luck on Chrome Canary v70.
I setup a minimal repo to reproduce. Can you see where I've gone wrong?
Turns out I was misunderstanding the details a bit. I'll post my solution here in case it helps someone else in the same boat.
My goal is to serve a React SPA with CSP enabled. The app happens to use Material-UI, which uses JSS, which injects inline styles - which of course are blocked by default with CSP.
Because it's a static SPA for the frontend and modifying HTTP headers is out of scope of the SPA, I instead generate a nonce on the web server. The nonce gets injected into the CSP HTTP Header and also in the index.html tag consistent with what JSS expects.
The upside is CSP is protecting the SPA, and we don't have to use unsafe-inline escape hatch. The downside, but a small one, is that index.html is dynamic now and can't be cached. But seeing as the file is already tiny (<1kb) the benefits of CSP seem worth that tradeoff.
When I try to load vue-typeahead in my browser it says 'you need to provide a http client.' How exactly do I do this?
I am using webpack (the default configuration that comes with laravel 5.5). I have copied the usage example verbatim from here, https://github.com/pespantelis/vue-typeahead, and placed it in its own file, typeahead.vue.
I have then added the file as a vue component as follows:
Vue.component('typeahead', require('./components/admin/shared/typeahead.vue'));
The webpack bundling works fine (npm run dev), and I can see that the component loads in my browser, but when I type a few characters and trigger the http request, I get the error message.
Axios is loaded as part of bootstrapping my Vue instance, but presumably it needs to be passed to the vue-typeahead somehow?
The docs are not very clear.
But look in the samples directory: You have to set the $http property on the Vue prototype.
You have to use a http client that provides an interface compatible with the axios package
https://github.com/pespantelis/vue-typeahead/blob/master/demo/main.js
Looks like the source only uses get(url, params), so if you want to roll your own http client instead of using axios it’s not a ton of work.