Search code examples
javascripthtmlnode.jsiframecdn

All Iframe content and CDN not working anymore


My Node App seems to be blocking all CDN and iframe content, for an example, my tables are not loading the dataTables stuff (like sorting and searching), my graphs are not working either. They were all working before, last thing I modified was package updates and node update that doesn't seem to be connected to the problem. I would like to know what is possibly happening and how to solve it.

I'm sorry if the question is not so objective but I really have no ideia where to start here.


Solution

  • The Problem

    To document and help other people who may experience this same problem. Based on CBroe's comments I figured out that the problem was that I had not set a Content Security Policy (CSP), and the browser set its own policy, which blocked external resources (CDNs and Iframe contents). The error message mentioning Content Security Policy was being displayed in the browser console.

    The solution

    To solve the problem I add a middleware on server.js to set a CSP that would not block my external content.

    Example of a very permissive CSP middleware (I recommend you to use a more restrictive one):

    app.use(function(req, res, next) {
      res.setHeader(
        "Content-Security-Policy",
        "default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';"
      );
      return next();
    });