Question

8

Content-Security-Policy blocks Vue.js

rated 0 times [ 11] [ 3] / answers: 1 / hits: 6941 / 3 Years ago, thu, january 7, 2021, 12:00:00

I am serving a HTML page in my node.js server with express.public() function.

and i added this into my html page:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

And Chrome gaves me a Content-Security-Policy to me.

I used this middlewares in my Node index.js

app.use(morgan('tiny'));

app.use(helmet());

app.use(cors());

app.use(express.json());

app.use(express.static("./public"));

My application headers:

Content-Security-Policy: default-src 'self';base-uri 'self';block-all-mixed-content;font-src 'self' https: data:;frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests

How can i add this script without any SecurityPolicy

SOLVED

I remove "Helmet" from my project. Helmet is blocking the all cdn and scripts other then absolute domain.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

marques

Add To Favorites

Follow

Total Points: 366

Total Questions: 108

Total Answers: 111

Location: Burundi

Member since Wed, Nov 25, 2020

4 Years ago

marques questions

1 What does useNavigate replace option do?

Wed, Jun 29, 22, 00:00, 2 Years ago

1 Next.js TypeError: Cannot read property '' of undefined when trying to console log api results

Sat, Nov 27, 21, 00:00, 3 Years ago

1 React < select>'s < option> is not working at onClick

Sat, May 8, 21, 00:00, 3 Years ago

1 Proper way to call modal dialog from another component in Angular?

Thu, Dec 24, 20, 00:00, 4 Years ago

1 ECharts how to set different symbol for different marklines in one chart

Wed, Nov 11, 20, 00:00, 4 Years ago

View All

answered 4 Years ago willieelisham · Accepted Answer

Content Security Policy is set in the html file being served or by the software serving the html (e.g Nginx, Apache).

At the moment you have: default-src 'self', this means you are telling the browser that it is only able to make requests to its own domain.

You need to add https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js to this list of domains it can access.

That would be something like:

Content-Security-Policy: default-src 'self';script-src 'self' https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js; base-uri 'self';block-all-mixed-content;font-src 'self' https: data:;frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests

So default-src: self sets the default to restrict requests to only your own domain.

script-src 'self' https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js overrides this and says specifically for scripts restricts request to only your domain and that url.

This has lots of details and examples:
https://content-security-policy.com