在表单中使用 POST 到路由时的严格原点时跨原点答案

【问题标题】：strict-origin-when-cross-origin when using POST in a form to a route在表单中使用 POST 到路由时的严格原点时跨原点
【发布时间】：2022-01-10 12:06:47
【问题描述】：

您好，我正在阅读 Greg Lims 的关于 Node.js、express 和 mongodb 的书，当使用表单将数据发送到路由时，我被困在了这一点上，然后路由将只是安慰身体。表格的标题。我得到状态 404 Not Found。推荐人 Policystrict-origin-when-cross-origin。我需要 CSP 和 CORS 方面的教育，但不知道从哪里开始？

我的 index.js 和 form.html ...

const express = require('express')
const bodyParser = require('body-parser');
const app = new express()
const cors = require('cors'); 
app.use(express.static('public'))
const path = require('path');
const { header } = require('express/lib/request');
app.use(express.static(__dirname + '/public'))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false })) 

app.use(cors({
  origin: "*",
  })
);



app.use((req, res, next) => {
  res.append('Access-Control-Allow-Origin', ['*']);
  res.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.append('Access-Control-Allow-Headers', 'Content-Type');
  next();
});









app.listen(4000,()=>{
  console.log('App listening on port 4000')
})

app.get('/',(req,res)=>{
  console.log('get root')
  res.sendFile(path.resolve(__dirname,('pages/index.html')))
})

app.get('/about.html',(req,res)=>{
  console.log('get about')
  res.sendFile(path.resolve(__dirname,('pages/about.html')))
}) 

app.get('/post.html',(req,res)=>{
  console.log('get post')
  res.sendFile(path.resolve(__dirname,('pages/post.html')))
})  

app.get('/store',(req,res)=>{

  res.set("Content-Security-Policy", "default-src 'self', form-action 'self',script-src 'self'");
  console.log('store post')
  console.log(req)
  console.log(req.body)
  console.log(req.body.title)
  res.redirect('/')
})

my form

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self', form-action 'self',script-src 'self'">
    
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Create</title>
    </head>
    <body>
        <H1>Create Page</H1>
         
      <form action="/store" method="POST"> 
        <div class="control-group"> 
          <div class="form-group floating-label-form-group controls"> 
            <label>Title</label> <input type="text" class="form-control" placeholder="Title" id="title" name=”title” >  
                  </div>
                 </div> 
    
            </div>
             <br>          
             <div class="form-group"> <button type="submit" class="btn btn-primary" id="sendMessageButton">Send</button>
             </div> 
            </form> 
        </div> 
    </div> 
    </div>
    <meta http-equiv="Content-Security-Policy" content="default-src 'http://localhost'">
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> -->
    <hr>
    </body>
    </html>

...

【问题讨论】：

Referrer-Policy、CORS、CSP 和 404 Not Found 错误是四个完全不同的东西。（如果您使用搜索引擎，它们都会得到很好的记录）。
您好 Quentin，感谢您抽出宝贵时间阅读我的帖子并回复。我确实研究了这些问题，并且确实修改了 Lim 先生的代码，但无济于事。关于使用 POST 的一些事情会使安全性恢复到默认值。

标签： javascript node.js express

【解决方案1】：

您的示例中没有 POST 端点，它们都是 GET。据我所知，您的<form />您真正想要的是 POST 到store。如果是这种情况，请替换此位

app.get('/store',(req,res)=>{

  res.set("Content-Security-Policy", "default-src 'self', form-action 'self',script-src 'self'");
  console.log('store post')
  console.log(req)
  console.log(req.body)
  console.log(req.body.title)
  res.redirect('/')
})

对于这一点。请注意，我只更改了 HTTP 动词。

app.post('/store',(req,res)=>{

  res.set("Content-Security-Policy", "default-src 'self', form-action 'self',script-src 'self'");
  console.log('store post')
  console.log(req)
  console.log(req.body)
  console.log(req.body.title)
  res.redirect('/')
})

请阅读 official docs 关于 Express 的基本路由。这应该会给你一些见解。

【讨论】：

哦，谢谢你，何塞。这更像是。
谢谢何塞·恩里克。就是这样。它需要设置为发布。