手风琴可折叠不适用于 Heroku（CSP 问题）

Question

我遇到了一个很奇怪的问题。我在 Heroku 中实现了一些嵌套的可折叠和简单的可折叠，它们在 localhost.But 上表现出色，但我仍然不明白为什么可折叠不起作用。欢迎任何帮助，如果没有可折叠的工作，我的网络应用程序将显得混乱:(

哈巴狗布局

doctype html
html(lang='en')
    head
        title= title
        meta(charset='utf-8')
        meta(name='viewport', content='width=device-width, initial-scale=1')
        script(src="https://code.jquery.com/jquery-3.5.1.slim.min.js", integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj", crossorigin="anonymous")
        link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css", integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z", crossorigin="anonymous")
        script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js", integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV", crossorigin="anonymous")
        link(rel='stylesheet', href='/stylesheets/style.css')
    body
    div(class='container-fluid')
      div(class='row')
        div(class='col-sm-2')
          block sidebar
            ul(class='sidebar-nav')
              li
                a(href='/catalog') Home
              li
                a(href='/catalog/resources') All Resources

              li
                a(href='/catalog/bookings') My Bookings
        div(class='col-sm-10')
          block content

可折叠 PUG

extends layout
block content
  -var i=0;
  -var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
        #accordion.panel-group
        each doc in object
           flex-container(style='background-color:#c7e7fa; justify-content:space-around; position:relative;flex-direction:row;margin-left:20px;margin-right:auto; margin-top:20px; width:45%; ')
            .three(style='text-align:center;margin-left:auto; margin-right:auto; flex: 0 0 40%;')
              h4='' + doc._id.year + '  ' + months[doc._id.month - 1]
              -i++;
            #accordion.panel-group
             .panel-heading
               h4.panel-title
                 a.accordion-toggle(data-toggle='collapse', href='#collapses' + i)
                   h6 See Total Cost
             .panel-collapse.collapse.in(id="collapses" + i)
                .three(style='width:100%; margin-left:auto; margin-right:auto; flex: 0 0 25%;')
                  h5= 'Total Montly Cost:  ' + doc.total_cost_month.toFixed(2)
                                .panel-heading
                                  h4.panel-title
                                    a.accordion-toggle(data-toggle='collapse', href='#collapse'+i)
                                      hr
                                      h6 See All Booking details
                                .panel-collapse.collapse.in(id="collapse"+i)
                                  each booking in doc.bookings_month
                                    flex-container(style='background-color:#a6f1a6; width:100%;')
                                                three.flex-container
                                                    | #[strong Start:] #{moment(booking.date_started).format('DD/MM/YYYY HH:mm')}
                                                three.flex-container
                                                    | #[strong  Finish:] #{moment(booking.date_finished).format('DD/MM/YYYY HH:mm')}
                                                three.flex-container
                                                    | #[strong  Cost:]  #{booking.total_cost.toFixed(2)}
                                                li
        else
            h1 No booking history found
            h3= 'Start booking now' + "  "
             a(href='/catalog/resources')
              | here:

Answer 1

这样就解决了。问题源于服务器端。特别是来自 helmetjs，app.use(helmet())。所以 helmet 默认情况下会阻止所有内容，如脚本样式表和多媒体 links 正在加载到 pug 视图中，以防止 XSS 攻击。所以我们要做的是告诉头盔我们想要将一些 link 引用列入白名单，这可能是样式表 link、脚本 link 和图像 link 等. 我们通过在我们的代码 (app.js) 中包含此代码片段来做到这一点。

app.use(helmet({
  contentSecurityPolicy:{
    directives:{
      "default-src":["'self'"],
      "script-src":["https://code.jquery.com/jquery-3.5.1.slim.min.js","'sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj'","https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js","'sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV'"],
      "style-src": ["'self'","https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css","'unsafe-inline'"],
      "object-src":["'none'"],


    },
  }
}
));

所以头盔是我们已经在我们的应用程序中导入的模块。这个模块有一些属性。在我们的问题中，我们关注属性 contentSecurityPolicy，因为我们需要解决 CSP 问题。为了放置一些异常，我们将它们添加到 directives property.These 异常是键值对，其中键是将在我们的网络应用程序中加载的内容类型，值是实际的 link 携带内容。所以现在我们将解决解决方案，注意属性的顺序，因为这非常重要。 "default-src":["'self'"] 默认为属性，我们告诉网络应用程序仅从其域 'self' 加载内容。接下来是 "script-src"，这是我们的 jquery 脚本，其中包含从我们上面的 layoyt 中获取的散列以及使用我们的 bootstrap 样式表的脚本，这也有它的散列。然后是 "style-src" 这是实际的 bootstrap 模板，我们添加 'self' （我不太确定 self 是否不是可选的）然后我们使用 "'unsafe-inline'" 这意味着我们的应用程序加载存在于每个特定哈巴狗模板中的散列。最后 "object-src" 是一个属性我们应该分配为 "'none'"。因此，请注意命令的顺序

手风琴可折叠不适用于 Heroku（CSP 问题）

Accordion Collapsible Does not work only in Heroku (CSP Issue)

jquery

express

content-security-policy

helmet.js

bootstrap-4