在 React 中包含 Content-Security-Policy答案

【问题标题】：Including Content-Security-Policy in React在 React 中包含 Content-Security-Policy
【发布时间】：2018-08-13 04:08:51
【问题描述】：

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

【问题讨论】：

标签： html reactjs meta content-security-policy

【解决方案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"

【讨论】：