bootstrap4 的下拉列表不起作用

Posted 2023-05-08

【中文标题】bootstrap4 的下拉列表不起作用

【英文标题】：Dropdown list by bootstrap4 is not working

【发布时间】：2019-06-14 00:17:06

【问题描述】：

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

所以我检查了检查，发现 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>

应用程序.scss

@import 'bootstrap';

应用程序.js

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

我预计它与以下消息有关。

"拒绝加载脚本 '' 因为它违反了以下内容安全策略指令："script-src https:"。请注意，'script-src-elem' 没有明确设置，因此 'script-src' 是用作后备。”

所以我用谷歌搜索并将下面的行粘贴到 application.html.erb 中。

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

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

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

【参考方案1】：

我不确定您的问题是否真的与 CSP 有关，但无论如何设置一个总是一个好主意。请注意，通过元标记设置 CSP 的安全性较低，因此建议使用相应的 HTTP 标头。

Rails 已经包含一个 (undocumented) middleware 用于生成这些。

因为看起来您正在使用 Rails 应用程序中的脚本，所以我认为添加 script-src 'self' 确实可以解决问题。因为它没有：您是否有机会从外部源加载 JS 文件？尤其是供应商托管的 CDN 非常受欢迎。尝试检查您的浏览器网络请求选项卡，看看它是否向外部来源发出任何请求。

如果是这样，您需要将它们添加到 CSP。一开始，正确处理 CSP 的所有方面可能有点令人生畏，但一旦您对它更加熟悉，它就会成为保护您的应用程序的有用工具。

【讨论】：

我已经安装了secure_headers gem并在config/initializers下默认设置了secure_headers.rb。 SecureHeaders::Configuration.default 它阻止了加载外部 JS 文件。我尝试卸载secure_headers gem并重新加载页面，然后加载JS文件并且下拉列表工作正常。今天我第一次面对CSP，所以在了解之后我会尝试使用CSP和secure_headers gem。谢谢你的建议。