Question

我在元中有以下 CSP：

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
      <meta http-equiv="Content-Security-Policy" content="base-uri 'self'; object-src 'none'; script-src 'self'; style-src 'self'; default-src 'self'; connect-src http://localhost:3000/ https://localhost:5001/ https://localhost:6001/; frame-src https://localhost:6001/ http://localhost:3000/">
      <meta name="theme-color" content="#000000">
      <base href="/">
      <link rel="manifest" href="/manifest.json">
      <link rel="shortcut icon" href="/favicon.ico">
      <title>Stack Underflow</title>
      <link href="/static/css/2.67123b20.chunk.css" rel="stylesheet">
   </head>
   <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
      <script src="/static/js/runtime-main.ee376b76.js"></script><script src="/static/js/2.17f1251a.chunk.js"></script><script src="/static/js/main.69a64aff.chunk.js"></script>
   </body>
</html>

React 用于向页面添加内容。

const MyComponent = () => {
    return (
        <div style={{ borderStyle: "solid", borderColor: "green" }}>
        ...
        </div>
    );
};

但是，仍然接受以下行并且控制台中没有显示错误：

<div style="border-style: solid; border-color: red;">...</div>

当我在 <div> 中手动硬编码上述 index.html 时，CSP 工作正常。

测试：

Chrome 88.0.4324.150
Microsoft Edge 88.0.705.74
Firefox 69.0.3

Answer 1

只有当您将 <meta http-equiv="Content-Security-Policy" ...> 放在不在 <head> 部分时才有可能 - 在这种情况下它不起作用。

或者 <div style="border-style: solid; border-color: red;">...</div> 在 <iframe> 内 - 除了 sandbox 指令外，父页面的 CSP 不会在嵌套浏览上下文中起作用。

另一种选择是您确实在 <div style='...'> 已经插入到 DOM 之后通过 javascript 设置了元标记。 Еhe meta 没有追溯力。

更新
显示代码后，很明显 React 通过 Element.style.property = 'value';（即 div.style.borderStyle="solid"、div.style.borderColor="green"）插入样式。

这是 https://www.usenix.org/conference/osdi10/flexsc-flexible-system-call-scheduling-exception-less-system-calls 方法，它不会导致违反 CSP。使用 setAttrubute("style", ...) - 是不允许的，会引发违规。

内容安全策略 - style-src 不会阻止内联样式

1 个答案: