首页 > 解决方案 > Bootstrap,fontawesome CSP 无法正常工作

问题描述

尝试在烧瓶中为 Fontawesome css 创建 CSP,如下所示。但图标不显示。我做错了什么?

@posts.after_request
def add_security_headers(resp):
    resp.headers['Content-Security-Policy']=('style-src \'self\' https://maxcdn.bootstrapcdn.com; \
        font-src https://use.fontawesome.com/releases/v5.5.0/css/all.css;\
        script-src \'self\' https://ajax.googleapis.com  https://code.jquery.com  https://cdnjs.cloudflare.com https://maxcdn.bootstrapcdn.com;')
    return resp

标签: pythonflaskjinja2

解决方案


<script defer src="/assets/fa/js/brands.js"></script>
<script defer src="/assets/fa/js/solid.js"></script>
<script defer src="/assets/fa/js/fontawesome.js"></script>

使用 js 库 for fontawesome 5. 附加设置将是这样的

            <div class="col-lg-4 col-6 p-1 px-2">
                <i class="fab fa-instagram fa-2x"></i>
                <a href="https://www.instagram.com">instagram</a>  
            </div>

            <div class="col-lg-4 col-6 p-1 px-2">
                <i class="fab fa-whatsapp-square fa-2x"></i>
                <a href="whatsapp://">whatsapp</a>  
            </div>

请注意fab类,它代表字体真棒品牌,fas代表字体真棒...


推荐阅读