Блог

Я использую react js одну из форм, которую я использовал react-google-captcha, и она отлично работала при сборке, и я использую бэкэнд, который обеспечивает безопасность CSP, и возникли другие ошибки

после поиска на многих сайтах я добавляю следующий мета-тег

 <meta
  http-equiv="Content-Security-Policy"
  content="script-src 'self' https://www.google.com https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/;
  frame-src https://www.google.com https://www.google.com/recaptcha/ https://recaptcha.google.com/recaptcha/"
/>
 

все равно не везет. сталкивались ли вы с этой проблемой? можете поделиться со мной решением. Заранее спасибо

в конфигурации моего шлема

Сопровождающий шлема здесь.

Это происходит из-за так называемой Политики безопасности контента, которую Шлем устанавливает по умолчанию. Шлем устанавливает его в заголовке HTTP, который переопределяет то, что вы добавили в этот <meta> тег.

Чтобы решить вашу проблему, вам нужно будет настроить CSP шлема.

В MDN есть хорошая документация о CSP, которую я бы рекомендовал прочитать для справки. После этого взгляните на файл README шлема, чтобы узнать, как настроить его компонент CSP.

Чтобы дать некоторую помощь по этому вопросу, давайте взглянем на одну ошибку, которую вы видите:

 Refused to load the script 'https://google.com/recaptcha/...' because it violates the following Content Security Policy directive: "script-src 'self'". ...
 

Эта ошибка говорит вам о том , что script-src директива вашего CSP не позволяет загружать JavaScript google.com/recaptcha , и поэтому она была заблокирована.

Есть несколько способов исправить это:

1. Обновите свой CSP, чтобы разрешить загрузку JavaScript из Google. Ты бы сделал что-то подобное:

    app.use(
     helmet({
       contentSecurityPolicy: {
         useDefaults: true,
         directives: {
           "script-src": ["'self'", "google.com"],
         },
       },
     })
   );
    

2. Выполните рефакторинг вашего приложения, чтобы избежать загрузки капчи. Вероятно, это невозможно, но это доступное решение.
3. Отключите CSP. Это самый опасный вариант, поэтому я его не рекомендую.

    app.use(
     helmet({
       contentSecurityPolicy: false,
     })
   );
    

Вкратце: чтобы решить вашу проблему, вам нужно будет сообщить Шлему, как настроить CSP.

Большое спасибо @evanHahn за то, что мы сейчас работаем над решением проблемы, связанной с настройкой шлема в вашем бэкэнде ниже ss.

 app.use(
helmet({
  contentSecurityPolicy: {
    useDefaults: true,
    directives: {
      "script-src": ["'self'", "https://www.google.com/recaptcha/", "https://www.gstatic.com/recaptcha/"],
      "frame-src": ["'self'", "https://www.google.com/recaptcha/", "https://www.gstatic.com/recaptcha/"],
    },
  },
}));