0

我面临一个非常奇怪的问题。我实现了一些嵌套的可折叠和简单的可折叠，它们在本地主机上工作得很好。但在 Heroku 中，我仍然无法理解为什么可折叠不起作用。欢迎任何帮助，如果没有可折叠的工作，我的网络应用程序将显得混乱:(

哈巴狗布局

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:
4

1 回答 1

0

所以解决了。问题来自服务器端。特别是来自helmetjs，app.use(helmet())。因此，默认情况下，头盔会阻止所有内容，例如在 pug 视图中加载的脚本样式表和多媒体链接，以防止 XSS 攻击。所以我们要做的就是告诉头盔我们想要将一些链接引用列入白名单，这可能是样式表链接、脚本链接和图像链接等。我们通过在我们的代码 (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'"],


    },
  }
}
));

因此，helmet 是我们已经在我们的应用程序中导入的模块。这个模块有一些属性。在我们的问题中，我们关注属性 contentSecurityPolicy，因为我们需要解决 CSP 问题。为了放置一些异常，我们将它们添加到directives属性中。这些异常是键值对，其中 key 是将在我们的 Web 应用程序中加载的内容的类型，而 value 是承载内容的实际链接。所以现在我们将解决解决方案，注意属性的顺序，因为这非常重要。"default-src":["'self'"]是默认属性，我们告诉 web 应用程序仅从其域加载内容'self'。接下来是"script-src"，这是我们的 jquery 脚本，其中的哈希取自上面的layoyt，也是使用我们的引导样式表的脚本，这也有它的哈希。然后它是"style-src"实际的引导模板，我们添加'self'（我不太确定 self 是否不是可选的），然后我们使用"'unsafe-inline'"这意味着我们的应用程序加载每个特定 pug 模板中存在的哈希。最后"object-src"是我们应该分配为的属性"'none'"。所以这就是小心命令的顺序

于 2021-04-15T19:46:44.800 回答