所以我为我的网络应用程序实现了CSP,它在Chrome中运行得非常好.nonce执行所有内联脚本; 那些没有它的人没有被执行.

但是在Safari中,这是我在控制台中看到的消息:

内容安全策略指令'script-src'的源列表包含无效源:''nonce-fbe23fb21d40c38e8df7c0a16357dd3ec4be86ca233cb41206ac5f897cf9a103''.它会被忽略.

标题:

Content-Security-Policy script-src 'nonce-cb28e5c8a2b833169bb8d1fa686f659fed9b3bf8ea52b86916bcaf20a04b3209' 'self'

没有内联脚本被执行,即使是nonce.

我在远程服务器中托管的Laravel 5.1中创建了一个REST api.现在,我'试图从其他网站(我在本地)使用该API.

在Laravel中,我设置了发送CORS头所需的行.我还使用Postman测试了API,一切似乎都没问题!

在前端

然后,在网站上我使用ajax发送了POST请求,代码如下:

var url="http://xxx.xxx.xxx.xxx/apiLocation";
var data=$("#my-form").serialize();
    $.ajax({
                    type: "POST",
                    url: url,
                    data: data,
                    headers: { 'token': 'someAPItoken that I need to send'},
                    success: function(data) {
                        console.log(data);
                    },
                    dataType: "json",
                }); 

买然后我在控制台中收到此错误:

XMLHttpRequest无法加载http://xxx.xxx.xxx.xxx/apiLocation.对预检请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头.原产地" :HTTP //本地主机,因此"是不允许访问.

在后端

在API中我设置了这个(使用Laravel Middleware来设置标题):

return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

所以,我很困惑究竟问题出在哪里.

1. 在服务器？但那么为什么Postman工作正常呢？
2. 是在Ajax调用？那么,我应该添加什么？

我正在尝试向API发送GET请求,但是当我在代码中添加自定义标头时,会发生奇怪的事情.某处,请求方法在到达Web服务器时更改为OPTIONS.

但是当我在没有标题的情况下执行相同操作时,它将是GET类型.当我使用应用程序postman(API开发工具)时,请求工作正常!

请求代码:

    let token = this.generateClientToken(privateKey, message);

    let myheaders = {
      "appID": appID,
      "authorizationkey": token
    }

    fetch('http://localhost:8080/api/app/postman', {
      method: "GET",
      // body: JSON.stringify(''),
      headers: myheaders
    }).then(function(response) {
      console.log(response.status);     //=> number 100–599
      console.log(response.statusText); //=> String
      console.log(response.headers);    //=> Headers
      console.log(response.url);        //=> String

      return response.text()
    }, function(error) {
      console.log(error.message); //=> String
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

服务器日志输出(带标头):

worker_1  | 172.18.0.4 -  17/Mar/2017:15:47:44 +0000 "OPTIONS /index.php" 403
web_1     | 172.18.0.1 - - [17/Mar/2017:15:47:44 +0000] "OPTIONS /api/app/postman HTTP/1.1" 403 5 "-" "Mozilla/5.0 (Macintosh; Intel …

我的 REST API 后端当前使用基于 cookie 的 CSRF 保护。

基本过程是后端设置一个可由客户端应用程序读取的 cookie，然后在后续的 HXR 请求（我的 CORS 设置允许）中，自定义标头与 cookie 一起传递，服务器检查两个值是否匹配。

本质上，这一切都是通过 Spring Security 中的一行非常简单的 Java 代码启用的。

.csrf().csrfTokenRepository(new CookieCsrfTokenRepository())

当 UI 从同一域提供服务时，这非常有效，因为客户端中的 JS 可以轻松访问（非 http-only）cookie 来读取值并发送自定义标头。

当我希望将我的客户端应用程序部署在不同的域上时，我面临的挑战就来了，例如

API: api.x.com
UI: ui.y.com

我解决这个问题的想法是

1. 令牌可以与 cookie 一起在自定义响应标头中发回，而不是仅在 cookie 中发回。
2. 然后，客户端读取自定义标头和本地存储（使用本地存储或者可能通过在客户端动态创建 cookie，但这次是在 UI 域上，以便稍后可以读取）。
3. 随后，客户端在自定义请求标头中发出 XHR 请求时将使用该值，并且步骤 1 中设置的 cookie 也将随之使用。
4. 服务器检查这两个值（cookie 和请求标头）是否已设置并且它们是否完全匹配。

这是一种众所周知/可接受的方法吗？任何人都可以从安全角度识别这种方法的任何明显缺陷吗？

显然，API 服务器需要允许 UI 域使用 CORS + 允许凭据并在 CORS 策略中公开自定义响应标头。

编辑

我将尝试使用我编写的自定义存储库在 Spring Security 中实现此目的：

import org.springframework.security.web.csrf.CookieCsrfTokenRepository;
import org.springframework.security.web.csrf.CsrfToken;
import org.springframework.security.web.csrf.CsrfTokenRepository;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; …

我正在通过热模块重新加载 - 开发服务器获得CORS问题.我在端口上使用dev-server 3000但是应用程序是从另一个端口提供的http://localhost:52024/.

这是我得到的错误(Chrome,Windows 10):

GET http://localhost:3000//sockjs-node/info?t=1502216500095 404 (Not Found)
XMLHttpRequest cannot load http://localhost:3000//sockjs-node/info?t=1502216500095. The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:52024' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
[WDS] Disconnected!

实际上我遇到两个错误:第一个是由//路径中的双斜线引起的,另一个是与CORS相关的错误.这是我的webpack.config.js:

const webpack = require('webpack'),
    path = require('path');

module.exports = {
    entry: …

我一直收到这个错误:

拒绝执行内联脚本,因为它违反了以下内容安全策略指令:"default-src'self'data:gap:http ://www.visitsingapore.com https : //ssl.gstatic.com'unsafe-eval'" .可以使用'unsafe-inline'关键字,散列('sha256-V +/U3qbjHKP0SaNQhMwYNm62gfWX4QHwPJ7We1PXokI =')或nonce('nonce -...')来启用内联执行.另请注意,'script-src'未显式设置,因此'default-src'用作后备.

任何人都可以告诉我如何解决这个问题,这是什么意思？我的代码是:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data:gap: http://www.visitsingapore.com   https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="lib/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="scripts/key.js"></script>
<script>$.ajax({
        url: ' http://www.visitsingapore.com/api.listing.en.json',
        type: 'GET',
        beforeSend: function (xhr) {
            xhr.setRequestHeader('email ID', '-------@gmail.com');
            xhr.setRequestHeader('token ID', '-------');
        },
        data: {},
        success: function (qwe12) {
            var TrueResult2 = JSON.stringify(qwe12);
            document.write(TrueResult2);
        },
        error: function () { },
    });</script>

以最简单的方式使用fetch-API时,Chrome无法正确收集垃圾.难道我做错了什么？

for (i = 0; i < 100; i++) {
  fetch('https://upload.wikimedia.org/wikipedia/commons/3/3d/LARGE_elevation.jpg')
    .then(response => {
      console.log('Memory-bloating')
    })
}

https://jsfiddle.net/dozrpcvj/12/

这个JSFiddle用1.4GB填充内存,直到手动垃圾收集或关闭选项卡才会释放.如果你将迭代次数增加到1000,它"下载"14GB(来自自己的磁盘)而不是垃圾收集,它开始填充磁盘上的交换文件.

我做错了什么或这是Chrome中的错误？在使用Safari进行测试时,它还会使用1.4GB的硬盘驱动器,但一旦完成就会开始进行垃圾回收.

PS.您不能使用内存分析器,因为它告诉您只使用几MB的数据,即使活动监视器或Chromes自己的任务管理器说1.4GB.

我在 Heroku 上遇到 CORS 问题。

这是我在服务器上的代码

import express from 'express';
import bodyParser from 'body-parser';
import mongoose from 'mongoose';
require('dotenv').config()

import filmRoutes from './api/routes/films'
import userRoutes from './api/routes/users'

const app = express()

const DBNAME = process.env.DB_USER 
const DBPASSWORD = process.env.DB_PASS


mongoose.connect(`mongodb://${DBNAME}:${DBPASSWORD}@ds157422.mlab.com:57422/filmbase`, {useNewUrlParser: true})

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", '*');
  res.header("Access-Control-Allow-Credentials", true);
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
  next();
});

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

app.use('/films', filmRoutes)
app.use('/users', userRoutes)


export default app;

这是我的帖子请求

  CheckLogin = () => {
    const data = {
      name: this.state.formInput.login.value,
      password: this.state.formInput.password.value …

Chrome更新之前，我的代码运行正常。

我向服务器发出ajax调用。我的服务器收到呼叫，将JSON返回给客户端，但是答案始终为空。当我查看Fiddler时，会从服务器得到答案。

我尝试使用JQuery，也尝试使用xmlhttp调用。总是一样的结果

是否有新的CORS政策规则适用？

有我的xmlHTTP调用

 var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
      var theUrl = "URL";
      xmlhttp.open("POST", theUrl);
      xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
      xmlhttp.send('{ "args" :{ "Obj":"my obj"}}');
      xmlhttp.onreadystatechange = function(state,xhh,aaa){
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
          alert(xmlhttp.responseText);
        }
      }

Ajax调用类似

$.ajax({
        url: "URL",
        data: '{ "args" :{ "Obj":"my obj"}}',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        type: "POST",
        async: false,       
        error: function (xhr, ajaxOptions, thrownError) {
          if (that.Fail != null) {
            that.Fail();
          }
        },
        success : function(data){

           alert(data);

        }
      })

我在我的应用程序中使用 Express、cors 和头盔。Vue3仅在客户端使用，库文件自托管在public文件夹中。我只是做

<script type="module" src="/public/lib/vue.esm-browser.js"></script>

将模块添加到客户端。问题是，当我使用它时，它总是给我一个Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'". 这个问题是昨天突然开始的，当我开始使用头盔和cors模块时，即使我注释掉这些模块，它仍然显示错误。我应该解决什么问题？