I am trying to setup a google sign in in my web application using Adding Google sign-in resource
I added the below code to the relevant html file
<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>
When I try to view the web app's page in a browser. I don't see the google sign-in button and when I inspect the page I see the following two errors
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”).
I tried looking at resources on Content Security Policy to solve this issue and found that adding a source allow-list is the solution. Please refer this resource for where I found this solution. Where do I add this allow list specifically? What exact code should I add? If I am going in the wrong direction please point me to resources or instructions that will help to resolve this matter.
My dev enviroment in ubuntu 20.04 and the browser I am using is Mozilla Firefox. I am actually buidling one of my first ruby on rails applications.
Thank you for your time and effort.
Juan Pablo Isaza
Content Security Policy is an additional layer of web application's security, which is supported by most of the modern web browsers. It's main goal is mitigating a whole range of the client-side attacks on modern web applications (check this doc for more information: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
There are two ways of including Content Security Policy in your application. First is a HTTP header included in the server's browser. Assuming you are using Ruby on Rails, there is probably a few ways for setting this header.
You can configure CSP on the code level. You have to modify file: 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)
}
end
I am not a Ruby developer, so I would recommend using that resource for further information: https://bauland42.com/ruby-on-rails-content-security-policy-csp/
You can also set CSP on the HTML's level, using the following meta tag:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src https://accounts.google.com; child-src 'none'; object-src 'none'">
The other way is setting a CSP header on the web server's level. For example, in nginx, you set it this way (in the server {} block of /etc/nginx/sites-enabled/your_conf (or other path - that depends on your nginx configuration):
add_header Content-Security-Policy "default-src 'self'; script-src https://accounts.google.com;" always;
Keep in mind that using default-src 'self' directive means, that you will also have to include all of the external resources in Content-Security-Policy - that includes fonts, images, styles etc.