Stock price checker | Content Security Policy disables button

JavaScript
#1

I have noticed that my Content security Policy blocks the functionality of the “Get Price” button (and the other one aswell) and I am not exactly sure why.

To be precise, when I click the button, instead of sending a get request to ‘/api/stock-prices…’ it just adds /?stock=GOOG to the link in the browser. (of course only if GOOG was entered)

If I remove my Content Security Policy, everything works fine.

My CSP:

app.use(helmet.contentSecurityPolicy({
directives: {
  defaultSrc: ["'self'"],
  scriptSrc: ["'self'"],
  styleSrc: ["'self'"]
}}))

Pretty sure, that I need to add some information, but I don’t really know what.

I appreciate your help!

Edit: Removing ‘defaultSrc’ and following the advice of jeremy.a.gray I was able to solve the issue.

1 Like
#2

This looks like a problem loading the jquery file; depending on how you are loading it (locally or from CDN) will dictate how you change the CSP. I just posted an answer to a similar question, but basically, unless you are serving the jquery locally on your node dev server, you will have to add the jquery domain to your scriptSrc to load it.

Check the network part of the dev console in your browser to see if jquery is not loading or post a link to the project on repl.it if this doesn’t help.

I’m good at being wrong on CSP stuff, though; I’ve had lots of practice.

1 Like
#3

Thanks for the answer, I am currently trying to figure out what the red code in the console is trying to tell me, and in fact there was an issue with jquery not loading.
I have added the link from the console to the scriptSrc as follows:

...
scriptSrc: ["'self'", 'https://code.jquery.com/jquery-2.2.1.min.js'],
...

(I have also tried surrounding it with double quotes) but unfortunately it still fails. (I am passing the test though)

Here’s a link to my repl.it.

The console also says something about refusal to execute inline scripts and how a possible solution to that is the creation of a hash. might that be something that helps/adds practice to using bcrypt hashes? Could that solve the button issue?

Thanks for your answer!

#4

I have

scriptSrc: ["'self'", "localhost", "*.jquery.com", "'unsafe-inline'"],

This lets self and localhost have scripts (should be the same really), allows loading from *.jquery.com, and the unsafe-inline covers JS in script tags, which is what your console is complaining about. I include jquery as

<script src="https://code.jquery.com/jquery-2.2.1.min.js"
        integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
        crossorigin="anonymous"></script>

You can also use hashes or nonces on your own inline scripts or CSS to avoid unsafe-inline, but to me that is so unwieldy it’s just easier to use separate files and allow it via the scriptSrc or styleSrc (otherwise you have to hash/nonce the inline CSS or JS everytime it’s changed).

I used the unsafe-inline only because this wasn’t going to be deployed and I was too lazy to pull the AJAX stuff in index.html into a separate script file. So you should have several warnings or errors about inline styles and scripts unless you allow unsafe-inline in scriptSrc and styleSrc.

1 Like
#5

Thanks for the help!

I did this and it didn’t work at first, but after removing the ‘defaultSrc’ directive everything works fine now. I am not quite sure why that is, so I’ll do a little research, but any answers to why this might be are also greatly appreciated!

#6

Probably the best CSP information is at MDN, followed by the issues list for helmet on github. There were recently issues around default-src being discussed that resulted in a new version of helmet, so that may be helpful.

1 Like