内容安全策略内联脚本已被阻止html表单js php

Question

我有困难实现CSP与nonce，我不明白我做错了什么。我能够执行本地脚本，我假设允许"自我"参数。然而，当我尝试提交一个联系表单，其中onsubmit执行返回的js函数发送一个post请求到一个php文件发送电子邮件，它显然有资格作为内联脚本执行，并被CSP阻止。我曾试图以各种方式实现nonce，但我只是不理解如何在不使用"不安全的内联"的情况下使其执行。任何帮助都会很感激。我使用下面的代码:

我特别从'script-src'策略中获得内联执行错误

. htaccess

Header set Content-Security-Policy "default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-12345678' https://example.com; style-src 'self' 'unsafe-inline'; base-uri 'self'; script-src-elem 'self'; img-src 'self' data:; form-action 'self'; report-to csp-endpoints"

contact.html

<form id="contact_form" onsubmit="return submitForm()" class="form_grid" nonce="12345678>
<script src="/js/contact.js" nonce="12345678"></script>

contact.js

function submitForm(e) { 

// do stuff

const request = new XMLHttpRequest();
request.open("POST", "php/email.php", true);
request.setRequestHeader("Content-type", "application/json");
request.onload = function () {
if (request.status >= 200 && request.status < 400) {
const resp = request.responseText;
const data = JSON.parse(resp);
alert(`Thank you ${data.name} for your message. We will get back to you at ${data.email} as soon as possible.`);
} else {
alert("Something went wrong. Please try again later.");
console.log(request.responseText);
}
};
request.onerror = function () {
alert("An error occured. Please try again later.");
};
const data = JSON.stringify({
name,
email,
goal,
itsatrap,
requirements,
integrations,
features,
guidelines
});
request.send(data);
return false;
}
}

email.php

<?php
// do stuff
header('Content-Type: application/json');
if (mail($recipient, $subject, $email_content, $email_headers)) {
http_response_code(200);
$json = array("success" => true, "message" => "Thank You! Your message has been sent.", "name" => $name, "email" => $email);
echo json_encode($json, JSON_PRETTY_PRINT);
exit;
} else {
http_response_code(500);
$json = array("success" => false, "message" => "Oops! Something went wrong and we couldn't send your message.", "reason" => error_get_last());
echo json_encode($json, JSON_PRETTY_PRINT);
exit;
}

Answer 1

谢谢@Sebastian Simon。我现在能够使用"严格动态"，我现在意识到为什么我得到的错误。为了避免内联执行，我做了以下更改:

. htaccess

Header set Content-Security-Policy "default-src 'self'; script-src 'self' 'strict-dynamic' https://example.com; style-src 'self' 'unsafe-inline'; base-uri 'self'; script-src-elem 'self'; img-src 'self' data:; form-action 'self'; report-to csp-endpoints"

html联系. .

<form id="contact_form" class="form_grid">
<script src="/js/contact.js"></script>

contact.js

async function submitForm() {
// do stuff 
const response = await fetch("php/email.php", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
});
if (response.ok) {
const data = await response.json();
alert(`Thank you ${data.name} for your message. We will get back to you at ${data.email} as soon as possible.`);
return true;
} else {
alert("Something went wrong. Please try again later.");
console.log(response);
return false;
}
}
document.getElementById('contact_form').addEventListener('submit', (e) => {
e.preventDefault();
const submitted = submitForm();
if (submitted) {
document.getElementById('contact_form').reset();
}
});