javascript 和 css 的 CSP 问题 - 密码可见性切换

Question

我目前正在服务器上进行一些前端开发。但是，当我尝试为我的密码可见性切换添加内联 css 和 javascript 时，我不断在 google chrome.

中收到相同的 CSP 错误

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' ssl.google-analytics.com

我试过的代码：

<input id="password" type="password" name="password" class="block full-width mb2 field-light input-shadow">
    <span toggle="#password" class="hidden toggle-password icon-eye" id="togglePassword"></span>

<style $nonceAttr>
    .toggle-password {
        width: 20px;
        height: 20px;
        position: absolute;
        margin-top: -47px;
        right: 3.2rem;
        cursor:pointer;
        background-position: center;
    }
    .icon-eye {
        background-image: url(/images/eye-icon.svg);
        background-repeat: no-repeat;
    }
    .icon-eye-slash {
        background-image: url(/images/eye-slash-icon.svg);
        background-repeat: no-repeat;
    }
    form input::-ms-reveal, form input::-ms-clear {
        display: none;
    }
    input[type=password].password-form-field, input[type=text].password-form-field {
        padding-right: 46px !important;
    }
</style>

<script type="application/javascript" $nonceAttr>
        $("form input[type='password']").on("input", function(){
                    if($(this).val()) {
                            $(this).next(".toggle-password").removeClass("hidden");
                        } else {
                            $(this).next(".toggle-password").addClass("hidden");
                        }
                });
        $(".toggle-password").click(function() {
                    $(this).toggleClass("icon-eye icon-eye-slash");
                    var input = $($(this).attr("toggle"));
                    if (input.attr("type") == "password") {
                            input.attr("type", "text");
                        } else {
                            input.attr("type", "password");
                        }
                });

</script>

它在 Internet Explorer 和 Microsoft Edge 上运行良好，但拒绝在 google chrome 上运行。我需要帮助来解决这个问题。是 CSP 不支持 $(".toggle-password").click 吗？我还尝试将 js 和 css 移动到单独的外部文件中，但没有成功。

Answer 1

尝试将 'unsafe-inline' 添加到您的 CSP 列表中。

例如，

script-src 'self' 'unsafe-inline' 'unsafe-eval' ssl.google-analytics.com

Answer 2

您的 CSP："script-src 'self' 'unsafe-eval' ssl.google-analytics.com 不包含 'nonce-RandomValue' whish 应该对应于 <script>/[= 中使用的 $nonceAttr (nonce='RandomValue') 14=]

javascript 和 css 的 CSP 问题 - 密码可见性切换

CSP issues with javascript and css - password visibility toggle

html

javascript

css

jquery

content-security-policy