CSP 框架祖先自我指令阻止来自同一来源的页面

Question

我有一个nodejs应用程序可以提供服务

index.html

表示“/”路线

test.html

用于“/test”路线

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname + "/index.html"));
});

app.get("/test", (req, res) => {
  res.sendFile(path.join(__dirname + "/test.html"));
});

index.html 有一个嵌入 /test 的 iframe

   <iframe
        width="100%"
        height="500px"
        src="http://localhost:5500/test"
        sandbox
      ></iframe>

在server.js中，我应用CSP如下：

app.use(function (req, res, next) {
  res.setHeader("Content-Security-Policy", "frame-ancestors self");
  next();
});

来自

/test

路线的内容被 Chrome 阻止

根据 MDN 的框架祖先，

URL 方案和端口相同，即 http://localhost:5500

主持人：

iframe 中的内容可以独立访问：

与

http://localhost:5500/test

相比，为什么

http://localhost:5500

不被视为同源？

最小可重现示例 - https://github.com/phalgunv/csp-demo-same-origin

Answer 1

我相信这是一个错字。将“self”用单引号括起来：

res.setHeader("Content-Security-Policy", "frame-ancestors 'self'");