在 React 中包含内容安全策略

Question

我想将 Content-Security-Policy 添加到我的 React 网站。这是我在头部 index.html 添加的内容：

<meta http-equiv="Content-Security-Policy" content="default-src 'none';
      script-src 'self' 'unsafe-inline'
      https://www.google-analytics.com/
      https://maps.googleapis.com/
      https://developers.google.com/;
      img-src 'self'
      https://www.google-analytics.com
      https://maps.googleapis.com/
      https://maps.gstatic.com/
      https://developers.google.com/ data:;
      style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
      font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com data:;
      frame-src 'self' https://www.slideshare.net;
      upgrade-insecure-requests; block-all-mixed-content;
      connect-src 'self'">

我使用这个网站- https://www.htbridge.com/websec/ 来检查我的网站是否安全，我仍然得到 'F'。问题是我有很多配置错误，例如：X-FRAME-OPTIONS、X-XSS-PROTECTION、X-CONTENT-TYPE-OPTIONS 以及 CONTENT-SECURITY-POLICY。我是做错了什么还是应该添加更多 'settings' 以确保安全？

Answer 1

Content-Security-Policy 只是避免某种攻击的安全措施之一，这可以在 React index.html.

中使用

但是，您提到的其他方法（X-Frame-Options、X-XSS-Protection、X-Content-Type-Options等）本质上是在服务器端接收http(s)请求时设置的。

例如，如果托管您的 React 网站的服务器是 Apache，那么您可以在“.htaccess”文件中添加这些行：

# Set Strict-Transport-Security
Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" env=HTTPS

# Set X-Frame-Options (Protect against page-framing and click-jacking)
Header always append X-Frame-Options SAMEORIGIN

# Set X-Content-Type-Options (Protect against content-sniffing)
Header set X-Content-Type-Options nosniff

# Set X-XSS-Protection (Protect against XSS attacks)
Header set X-XSS-Protection "1; mode=block"

# Set Referrer-Policy
Header set Referrer-Policy "same-origin"

在 React 中包含内容安全策略

Including Content-Security-Policy in React

html

meta

content-security-policy

reactjs