bootstrap4的下拉列表不起作用

时间:2019-01-20 11:15:59

标签: jquery ruby-on-rails twitter-bootstrap content-security-policy

我正在研究Rails和bootstrap4。我通过引导程序在navbar上创建了下拉菜单,但是它不起作用。

所以我检查了检查,发现chrome显示了错误消息。

“拒绝加载脚本”,因为它违反了以下内容安全策略指令:“ script-src https:”。请注意,未明确设置“ script-src-elem”,因此“ script-src”为用作备用。”

看来我的代码没问题。

_header.html.erb

<nav class="navbar bg-dark navbar-dark">
  <a class="navbar-brand" href="/">
    <%= ApplicationHelper::APP_NAME %>
  </a>
  <% if user_signed_in? %>
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <%= link_to("#", id: "navbarDropdownMenuLink", class: "nav-link dropdown-toggle", "data-toggle": "dropdown", "data-flip": "true", "aria-haspopup": "false", "aria-expanded": "false") do %>
          <%= image_tag current_user.avatar.url, class: "rounded-circle", style: "width: 50px;" %>
        <% end %>

        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink" style="position: absolute;right: 0;left: auto;">
          <%= link_to "Edit your profile", edit_user_registration_path, class: "dropdown-item" %>
          <%= link_to "Logout", destroy_user_session_path, method: :delete, class: "dropdown-item" %>
        </div>
      </li>
    </ul>
  <% end %>
</nav>

application.scss

@import 'bootstrap';

application.js

//= require jquery
//= require popper
//= require tether
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

我期望与以下消息相关。

“拒绝加载脚本”,因为它违反了以下内容安全策略指令:“ script-src https:”。请注意,未明确设置“ script-src-elem”,因此“ script-src”为用作备用。”

所以我用Google搜索并将以下行粘贴到application.html.erb中。

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; child-src 'none'; object-src 'none'">

但是下拉列表仍然不起作用,并且此消息仍然显示。

我想知道如何解决它以及此消息的含义。

1 个答案:

答案 0 :(得分:0)

我不确定您的问题是否真的与CSP有关,但是无论如何设置它始终是一个好主意。请注意,通过meta标签设置CSP的安全性较差,因此,建议改用相应的HTTP标头。

Rails已经包含一个(undocumented) middleware来生成它们。

由于看起来您正在使用Rails应用程序中的脚本,因此我认为添加script-src 'self'确实可以解决问题。既然没有:您是否有机会从外部源加载JS文件?特别是由供应商托管的CDN非常受欢迎。尝试检查您的浏览器的“网络请求”标签,以了解是否向外部来源发出了任何请求。

如果这样做,则需要将它们添加到CSP中。一开始正确实现CSP的各个方面可能有些艰巨,但是一旦您对它有了更深入的了解,它就可以成为保护应用程序安全的有用工具。