Why is the content-security-policy not working?

Question

I am getting the following error:

analytics.min.js:9 Refused to load the script 'https://cdn.amplitude.com/libs/amplitude-5.2.2-min.gz.js' because it violates the following Content Security Policy directive: "script-src 'self'

      https://apis.google.com
      https://cdnjs.cloudflare.com
      https://cdn.segment.com
      https://ajax.googleapis.com
      https://*.woopra.com
      [...]

      http://www.luckyorange.com https://ssl.luckyorange.com https://d10lpsik1i8c69.cloudfront.net". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

in my glitch project. It's my first attempt at connecting to a MongoDB database

After doing some research on the error, I think I'm finally beginning to understand what content security policy is and how it prevents XSS, but I was still having problems with how to implement allowing the site in my project.

From the MDN article I found the syntax to implement this: Content-Security-Policy: <policy-directive>; <policy-directive> but wasn't sure where this belonged, what file to put it in.

I did some more digging and found an html implementation in this stackoverflow article.

After some tinkering with it and clearing another error assiated with the omission of the samesite attribute I finally got to a line that I think should be working: <meta http-equiv="Content-Security-Policy" content="default-src 'https://cdn.amplitude.com/libs/' 'unsafe-inline'" samesite="none">; however, it is not.

index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome to HyperDev!</title>
    <meta name="" content="A cool thing made with HyperDev">
    <link rel="shortcut icon" href="https://cdn.hyperdev.com/us-east-1%3A52a203ff-088b-420f-81be-45bf559d01b1%2Ffavicon.ico" type="image/x-icon"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Security-Policy" content="default-src 'https://cdn.amplitude.com/libs/' 'unsafe-inline'" samesite="none">
    <style>
      body {
        background-color: #ddd;
        color: #333;
        font-family: sans-serif;
        text-align: center;
      }
    </style>
  </head>
</html>

package.json:

{
  "name": "fcc-mongo-mongoose-challenges",
  "version": "0.0.1",
  "description": "A boilerplate project",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.16.4",
    "body-parser": "^1.19.0",
    "mongoose": "^5.7.4",
    "mongodb": "^3.3.2"
  },
  "engines": {
    "node": "4.4.5"
  },
  "repository": {
    "type": "git",
    "url": "https://hyperdev.com/#!/project/welcome-project"
  }
}

myApp.js:

const mongoose = require('mongoose');
mongoose.connect(process.env.MONGO_URI, {useNewUrlParser: true, useUnifiedTopology: true})
.catch(e=>console.log(e));

It is not passing this test on freecodecamp. Most likely due to the error listed above, the database is not connecting.

OK, looking at the source at https://glitch.com/edit/#!/bald-casquette?path=README.md:1:0, I see the policy is actually being set by a meta element in the document itself. So you need to edit the document source and change the value of the `script-src` directive in that meta element — you need to add `https://cdn.amplitude.com` to that value (the value already contains `https://apis.google.com https://cdnjs.cloudflare.com https://cdn.segment.com https://ajax.googleapis.com` etc — sideshowbarker, Oct 12 '19 at 01:15
@sideshowbarker yeah I can see that now when I inspect the document, but I don't know where it's coming from. I've done a search on each of the files in the program and couldn't anything referencing those websites. There's only 7 files in the project.I Is it possible that it's something that glitch adds automatically to all projects? — Tara, Oct 12 '19 at 01:23
Yeah I guess it’s something that Glitch adds on its own in the edit view. But does it actually affect the behavior of the live app? I mean, if I go to https://bald-casquette.glitch.me/ and inspect the document, I don’t see any errors. (I only see the errors in the edit view.) — sideshowbarker, Oct 12 '19 at 02:04
@sideshowbarker it's preventing the database from connecting from what I can see. Towards the bottom of my original question is a link to the freecodecamp challenge I'm trying to get it to pass. — Tara, Oct 12 '19 at 02:07
So for troubleshooting purpose, I just created a new simple stub Glitch project at https://glitch.com/~flashy-warrior and when I check the devtools console there, I see the same *Refused to load the script `'https://cdn.amplitude.com/libs/amplitude-5.2.2-min.gz.js'`* error getting logged there. So I think pretty much all Glitch projects have that error — which means it seems unlikely it’s causing the database-connection problem you’re having. So, what makes you conclude the database isn’t connecting? Are you seeing a specific error message about that? — sideshowbarker, Oct 12 '19 at 02:22
@sideshowbarker, lol I guess I've been barking up the wrong tree for the past two days then :/ thanks for your help! I'm on mobile right now, but when I have access to a computer again I'll upvote your comments — Tara, Oct 12 '19 at 02:24
As far as the actual problem, it seems like you might be missing the step *Store your mLab database URI in the private .env file as MONGO_URI* from https://learn.freecodecamp.org/apis-and-microservices/mongodb-and-mongoose/install-and-set-up-mongoose/ instructions? — sideshowbarker, Oct 12 '19 at 02:48
@sideshowbarker... Thanks for looking into that, but it's there. The contents of the .env file are hidden from other users besides the owner of the account (it's used to store sensitive information, in this case the password for the database which is part of the URI) — Tara, Oct 12 '19 at 03:38

Why is the content-security-policy not working?

0 Answers0