Content Security Policy: The page’s settings blocked the loading of a resource at

user_4918117 0
Viewed 3110

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.

google-signin ruby-on-rails security javascript
1 Answers

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.

user_125081410
Related