Estoy tratando de configurar un inicio de sesión de Google en mi aplicación web usando Agregar recurso de inicio de sesión de Google
Agregué el siguiente código al archivo html relevante
<html> <body> <script src="https://accounts.google.com/gsi/client" async defer></script> <div id="g_id_onload" data-client_id="YOUR_GOOGLE_CLIENT_ID" data-login_uri="https://your.domain/your_login_endpoint" data-auto_prompt="false"> </div> <div class="g_id_signin" data-type="standard" data-size="large" data-theme="outline" data-text="sign_in_with" data-shape="rectangular" data-logo_alignment="left"> </div> </body> </html>Cuando intento ver la página de la aplicación web en un navegador. No veo el botón de inicio de sesión de Google y cuando inspecciono la página veo los siguientes dos errores
Content Security Policy: The page's settings blocked the loading of a resource at https://accounts.google.com/gsi/client (“script-src”). Content Security Policy: The page's settings blocked the loading of a resource at http://localhost:3000/mini-profiler-resources/includes.js?v=35a79b300ab5afa978cb59af0b05e059 (“script-src”).Intenté buscar recursos en la Política de seguridad de contenido para resolver este problema y descubrí que agregar una lista de fuentes permitidas es la solución. Consulte este recurso para saber dónde encontré esta solución. ¿Dónde agrego esta lista de permitidos específicamente? ¿Qué código exacto debo agregar? Si voy en la dirección equivocada, indíqueme recursos o instrucciones que me ayuden a resolver este problema.
Mi entorno de desarrollo en ubuntu 20.04 y el navegador que estoy usando es Mozilla Firefox. De hecho, estoy construyendo una de mis primeras aplicaciones Ruby on Rails.
Gracias por tu tiempo y esfuerzo.
La política de seguridad de contenido es una capa adicional de seguridad de la aplicación web, que es compatible con la mayoría de los navegadores web modernos. Su objetivo principal es mitigar una amplia gama de ataques del lado del cliente en aplicaciones web modernas (consulte este documento para obtener más información: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP ).
Hay dos formas de incluir la Política de seguridad de contenido en su aplicación. El primero es un encabezado HTTP incluido en el navegador del servidor. Suponiendo que está utilizando Ruby on Rails, probablemente haya algunas formas de configurar este encabezado.
Puede configurar CSP en el nivel de código. Tienes que modificar el archivo: config/initializers/csp.rb :
SecureHeaders::Configuration.default do |config| config.csp = { default_src: %w('self'), # self-hosted resources allowed by default script_src: %w(https://accounts.google.com), #here you have to include origins of all of your scripts connect_src: %w('self'), img_src: %w('self'), font_src: %w('self'), base_uri: %w('self'), style_src: %w('unsafe-inline'), form_action: %w('self'), report_uri: %w(/mgmt/csp_reports) } endNo soy un desarrollador de Ruby, por lo que recomendaría usar ese recurso para obtener más información: https://bauland42.com/ruby-on-rails-content-security-policy-csp/
También puede configurar CSP en el nivel de HTML, utilizando la siguiente metaetiqueta:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src https://accounts.google.com; child-src 'none'; object-src 'none'"> La otra forma es establecer un encabezado CSP en el nivel del servidor web. Por ejemplo, en nginx, lo configura de esta manera (en el server {} bloque de /etc/nginx/sites-enabled/your_conf (u otra ruta, eso depende de su configuración de nginx):
add_header Content-Security-Policy "default-src 'self'; script-src https://accounts.google.com;" always; Tenga en cuenta que el uso de la directiva default-src 'self' significa que también tendrá que incluir todos los recursos externos en Content-Security-Policy, que incluye fuentes, imágenes, estilos, etc.