Question

我正在处理Chrome扩展程序，我在登录和注册按钮时遇到问题，当我按下它没有任何反应时，在控制台中它会写下我的下一条消息：

popup.html：26拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：“script-src 'self'https://ajax.googleapis.com“。'不安全内联' 关键字，哈希（'sha256 -...'）或nonce（'nonce -...'）是必需的启用内联执行。

我试图解决这个问题几个星期仍然没有找到解决方案，你能帮我解决这个问题吗？

popup.js：

//Function that appears if login button pressed
function validate1() {
    var attempt = 3;
    console.log("s");

    var username = document.getElementById("username").value;//Get username from user
    var password = document.getElementById("password").value;//Get password from user

    if (username == "SteveO" && password == "youshallpass"){
        alert ("Login successfully");
        window.location = "/success_login.html"; //If login was successful transfer to another page
    }
    else{
        attempt --;//Decrementing by one
        alert("You have left "+attempt+" attempt;");

        //If 3 attempts were unsuccessful disable login option
        if( attempt == 0){
            document.getElementById("username").disabled = true;
            document.getElementById("password").disabled = true;
            document.getElementById("submit").disabled = true;
        }
    }

}
function register1(){
    document.getElementById("Sing_up").onclick = function () {
        location.href = "/SignUp.html";
    };
}

的manifest.json：

{
  "name": "DoCrypt",
  "version": "1.0",
  "description": "A browser app that encrypts files",
  "content_security_policy": "script-src 'self' google.com; object-src 'self'",
  "permissions": [
    "cookies",
    "history",
    "notifications",
    "tabs"


  ],
  "browser_action": {
    "default_title": "DoCrypt",
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "popup_function": "popup.js"


  },
  "manifest_version": 2,
  "content_security_policy": "script-src 'self' ajax.googleapis.com; object-src 'self'"
}

的package.json：

{
  "name": "docrypt",
  "version": "1.0.0",
  "description": "chrome extension app ",
  "main": "popup.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Steven Goldes",
  "license": "ISC"
}

success_login.html：

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to Docrypt</title>
    <meta name="robots" content="noindex, nofollow">

    <!-- style of page-->
    <link rel="stylesheet" href="/style.css"/>


</head>
<body>
<center>You are Successfully Login.<a class="back" href="popup.html">Back</a></center>
</body>
</html>

SignUp.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

popup.html：

<html>
<head>
    <title>Javascript Login Form Validation</title>

    <!-- include css file here-->
    <link rel="stylesheet" href="/style.css"/>
    <!-- include javascript file here-->
    <script type="text/javascript" src="popup.js"></script>

    <script src=ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <div class="main">
        <h2>To use Docrypt please login</h2><hr/>

        <form id="form_id" method="post" name="myform">
            <label>User Name :</label></br>
            <input type="text" name="username" id="username"/></br>

            <label>Password :</label></br>
            <input type="password" name="password" id="password"/></br>

            <input type="button" value="Login" id="Login" onclick="window.validate1()"/>

            <input type="button" value="Sign up" id="Sing_up" onclick="window.register1()"/>
        </form>
        <span><b class="note"></b><b class="valid">User Name : SteveO<br/>Password : Youshallpass</b></span>
    </div>
</div>


</body>


</html>

的style.css：

/* Style of the project */
@import url(fonts.googleapis.com/css?family=Raleway);

h2{
    background-color: #FEFFED;
    padding: 30px 35px;
    margin: -10px -50px;
    text-align:center;
    border-radius: 10px 10px 0 0;
}

hr{
    margin: 10px -50px;
    border: 0;
    border-top: 1px solid #ccc;
    margin-bottom: 40px;
}

div.container{
    width: 900px;
    height: 610px;
    margin:35px auto;
    font-family: 'Raleway', sans-serif;
}

div.main{
    width: 300px;
    padding: 10px 50px 25px;
    border: 2px solid gray;
    border-radius: 10px;
    font-family: raleway;
    float:left;
    margin-top:50px;
}

input[type=text],input[type=password]{
    width: 100%;
    height: 40px;
    padding: 5px;
    margin-bottom: 25px;
    margin-top: 5px;
    border: 2px solid #ccc;
    color: #4f4f4f;
    font-size: 16px;
    border-radius: 5px;
}

label{
    color: #464646;
    text-shadow: 0 1px 0 #fff;
    font-size: 14px;
    font-weight: bold;
}

center{
    font-size:32px;
}

.note{
    color:red;
}

.valid{
    color:green;
}

.back{
    text-decoration: none;
    border: 1px solid rgb(0, 143, 255);
    background-color: rgb(0, 214, 255);
    padding: 3px 20px;
    border-radius: 2px;
    color: black;
}

input[type=button]{
    font-size: 16px;
    background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
    border: 1px solid #e5a900;
    color: #4E4D4B;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    border-radius: 5px;
    padding: 10px 0;
    outline:none;
}

input[type=button]:hover{
    background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}

.fugo{
    float:right;
}

Answer 1

只需将其添加到 popup.js 的末尾：

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('Login').addEventListener('click', validate1);
});


document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('Sign_up').addEventListener('click', validate1);
});

Chrome扩展程序违反了Google安全政策

1 个答案: