html - 在 React 中包含内容安全策略

Question

我想在我的 React 网站中包含 Content-Security-Policy。这是我在 head 中添加到 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。我做错了什么还是应该添加更多“设置”以确保安全？

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"