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.

2 Likes
#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
#7

I am running into the same issue as well, and I got this error on chrome:

Refused to apply inline style because it violates the following Content Security Policy directive: “style-src ‘self’”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-bGiPDysKVTh/xwdIOMNVVWoiUeNKozdMxut6ZbwVOrs=’), or a nonce (‘nonce-…’) is required to enable inline execution.

The funny part is I have commented out everything helmet related or Content Security Policy but I still get this error.

Could this be a replit related issue? Any insight would be helpful

Here is a link to the project.

#8

It works for me on chrome. Try the empty cache and hard reload with chrome’s dev tools open (do this whenever the CSP, styles, scripts, etc., change). As of now you’re failing the second (the CSP) and last (did your tests pass; don’t know if they exist, no source link) tests.

#9

Thanks @jeremy.a.gray! Hard reload was the magic trick for it (I didn’t even know such thing exist before lol)

#10