Content security violation with node/angular application

user_10179663 0
Viewed 324

Basically i had a fully working website written in node/express/angular/javascript. I have returned to the project a few months later and i can't even display any page of the application when i run it on node js locally. I keep receiving cannot get "{webpage}" and when i go into the console it comes up with a ton of different content security violations which i have never seen before.

enter image description here

I tried reinstalling all dependencies and i have had no luck. I decided to create a new project and just use the basic essentials of my larger projects code to see if i could get it working and still no luck.

The code i used for the basic problem was as follows:

Index.js (server)

var express = require("express");
var bodyParser = require('body-parser');
var app = express();
var http = require('http');

// app is currently a empty file where my angular code will go
app.use(express.static("public"));

// app = Angular 
app.use(function(err,req,res,next){
    console.log(err);
    res.send({error: err});
})



// *** Server Connection *** //
var server = http.createServer(app).listen(4000, function(){

    console.log("Connected to DB");


});

HTML page:

<!DOCTYPE html>
<html lang="en" ng-app="holidayManagementSystem" >
   <head>

      <meta charset="UTF-8">
      <title>Homepage</title>
      <script src="/angular.js" type="text/javascript"></script>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>

      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

   </head>
   <body>





   </body>
</html>
content-security-policy angular express node.js html
1 Answers

Somebody has placed Content-Security-Policy HTTP headers on the web pages of your application.

Read this: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

Take a look in the Network tab of your browser devtools where you can see the HTTP headers on your html pages. Does your application use an nginx reverse proxy server? If so it's possible that's where those headers are inserted.

If you didn't put those headers there yourself, maybe they were added by a zealous infosec person who needs to work on their communication skills.

All browsers attempt to fetch /favicon.ico whenever they fetch a web page. They use it in browser tabs and in shortcuts. No harm is done if it's missing. If you want one put it in your server where the URL https://app.example.com/favicon.ico will retrieve it.

You can also use the serve-favicon express middleware to deliver it.

If you're not sure how to make a .ico file you should look it up.

user_2056080
Related