首页 > 解决方案 > 为什么内容安全策略不起作用?

问题描述

我收到以下错误:

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.

在我的故障项目中。这是我第一次尝试连接到MongoDB 数据库

在对错误进行了一些研究之后,我想我终于开始了解什么是内容安全策略以及它如何防止 XSS,但是我仍然在如何在我的项目中实现允许站点方面遇到问题。

MDN 文章中,我找到了实现这一点的语法:Content-Security-Policy: <policy-directive>; <policy-directive>但不确定它属于哪里,放在什么文件中。

我做了一些更多的挖掘,并在这篇 stackoverflow 文章中找到了一个 html 实现。

在对其进行了一些修改并清除了与省略samesite属性有关的另一个错误之后,我终于找到了我认为应该起作用的一行<meta http-equiv="Content-Security-Policy" content="default-src 'https://cdn.amplitude.com/libs/' 'unsafe-inline'" samesite="none">:然而,事实并非如此。

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));

它没有通过freecodecamp 上的这个测试。很可能是由于上面列出的错误,数据库没有连接。

标签: javascriptnode.jsexpresscontent-security-policyglitch-framework

解决方案


推荐阅读