如何在字体真棒脚本中使用随机数？

问题描述

如何在字体真棒脚本中使用随机数？

我已经通过我的服务器端生成了一个 base64 随机数，我还将它插入到我的字体真棒脚本中，以便我可以使用它提供的图标，但我收到了下面提到的错误：-基本上说明字体真棒正在尝试添加一些内联 css ，如何让它以这种方式插入以使其正常工作？

错误：- 拒绝应用内联样式，因为它违反了以下内容安全策略指令：“style-src 'self' cdn.jsdelivr.net kit.fontawesome.com 'nonce-somenoncevalue'”。启用内联执行需要“unsafe-inline”关键字、散列 ('sha256-...) 或随机数 ('nonce-...')。

我尝试了什么？我在服务器端生成了一个随机数并将其应用于字体真棒脚本，但它没有用，也研究了很多，但没有找到任何相关的内容

生成随机数

const crypto = require('crypto');
let nonce = crypto.randomBytes(16).toString('base64');
module.exports = nonce;

将 nonce 属性设置为 csp 标头

const nonce = require("../middleware/nonce");
app.use(helmet({
    contentSecurityPolicy:{
        useDefaults:true,directives:{
            "default-src":"'self'","script-src":["'self'","cdn.jsdelivr.net","kit.fontawesome.com","ka-f.fontawesome.com","js.stripe.com"],"style-src":["'self'",`'nonce-${nonce}'`],"connect-src":["'self'","ka-f.fontawesome.com"],"frame-src":["'self'","js.stripe.com"]
        }
    }
}));

将 nonce 添加到 fontawesome 脚本

<%- include("./layouts/head.ejs") %>

    <body>
        <%-include("./layouts/nav.ejs") %>
            <% if(editProd==true){ %>
                <div class="container w-100">
                    <div class="alert alert-success alert-dismissible fade show h-100 w-100" role="alert">
                        <strong>Success!</strong> Your product is successfully edited
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                </div>
                <% }%>
                    <div class="d-flex justify-content-around mainBox flex-wrap progress productBox">
                        <% prods.forEach((element)=> { %>
                            <div class="card position-relative">
                                <% if(loggedIn && userId.toString()==element.userId.toString()){%>
                                    <input type="hidden" name="_csrf" value="<%= csrftoken %>">
                                    <input type="hidden" name="prodId" value="<%= element._id %>">
                                    <div class="d-flex justify-content-center align-items-center deleteBtn">
                                        <i class="far fa-window-close fa-3x" nonce='<%= nonce %>'></i>
                                    </div>
                                    <% } %>
                                        <div class="card-body productCard">
                                            <div class="container d-flex flex-column justify-content-evenly align-items-center p-0 imgBox">
                                                <img src="/<%= element.imageurl %>" class="card-img-top displayProd" data-Id="<%=element._id %>" alt='<%=element._id %>'>
                                                <h5 class="card-title fs-4 text-capitalize">
                                                    <%=element.title %>
                                                </h5>
                                            </div>
                                            <div class="container d-flex justify-content-between w-100 p-0">
                                                <% if(loggedIn && userId.toString()==element.userId.toString()){%>
                                                    <a href="/edit-product/<%= element._id %>?edit=true"
                                                        class="btn btn-primary details d-flex justify-content-center align-items-center">Edit</a>
                                                    <% } %>
                                                        <%- include("./layouts/redirectToCart.ejs",{element:element,loggedIn
                                                            : loggedIn}) %>
                                            </div>
                                        </div>
                            </div>
                            <% }); %>
                    </div>
                    <%- include("./layouts/pagination.ejs",{currentPage: currentPage,totalPages:totalPages,nextPage:nextPage,prevPage:prevPage}) %>
                    <%- include("./layouts/end.ejs") %>
                    <script src="/mvcshop1/public/productDelete.js"></script>
                    <script src="/mvcshop1/public/productdisplay.js"></script>
// font awesome script 
                    <script nonce='<%= nonce %>' src="https://kit.fontawesome.com/bedf74ce64.js" crossorigin="anonymous"></script>
    </body>

    </html>

如果可以，还建议另一种解决错误的方法

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

content-security-policy font-awesome javascript nonce