admin管理员组

文章数量:1394185

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="; async defer></script>
      <div id="g_id_onload"
         data-client_id="YOUR_GOOGLE_CLIENT_ID"
         data-login_uri="/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  (“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.

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./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./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.

  • javascript
  • ruby-on-rails
  • security
  • google-signin
Share Improve this question edited Jan 20, 2022 at 3:20 redd asked Jan 19, 2022 at 16:27 reddredd 1091 gold badge1 silver badge7 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 3

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/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.), #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 remend using that resource for further information: https://bauland42./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.; 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.;" 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.

本文标签： javascriptContent Security Policy The page’s settings blocked the loading of a resource atStack Overflow

版权声明：本文标题：javascript - Content Security Policy: The page’s settings blocked the loading of a resource at - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744684436a2619612.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。