arataki
December 21, 2024, 2:24am
1
Hi All,
Just trying to find the format for adding a site to a control attribute in CSP.
Want to add a site to the allow statement for img-src which current has as default some google sites already. I can edit the config.php file manually and add it and it works no probs but have been trying to workout how to add it via code using Config command but having no luck with the format for Config(“CSP”) and setting the allow .
Any pointers appreciated.
TIA
Steve.
arbei
December 21, 2024, 5:41am
2
You may post your code for discussion.
arataki
December 21, 2024, 6:41am
3
This is the var_dump of the array
{
["font-src"]=> array(3) {
["self"]=> bool(true)
["data"]=> bool(true)
["allow"]=> array(1) {
[0]=> string(25) "https://fonts.gstatic.com"
}
}
["form-action"]=> array(1) {
["self"]=> bool(true)
}
["object-src"]=> array(1) {
["self"]=> bool(true)
}
["frame-ancestors"]=> array(1) {
["self"]=> bool(true)
}
["frame-src"]=> array(2) {
["self"]=> bool(true)
["allow"]=> array(2) {
[0]=> string(12) "*.google.com"
[1]=> string(13) "*.youtube.com"
}
}
["script-src"]=> array(5) {
["self"]=> bool(true)
["unsafe-inline"]=> bool(true)
["unsafe-eval"]=> bool(true)
["blob"]=> bool(true)
["allow"]=> array(9) {
[0]=> string(32) "https://www.google-analytics.com"
[1]=> string(24) "https://*.googleapis.com"
[2]=> string(21) "https://*.gstatic.com"
[3]=> string(12) "*.google.com"
[4]=> string(19) "https://*.ggpht.com"
[5]=> string(23) "*.googleusercontent.com"
[6]=> string(21) "https://js.pusher.com"
[7]=> string(22) "https://cdn.tiny.cloud"
[8]=> string(21) "https://*.youtube.com"
}
}
["connect-src"]=> array(4) {
["self"]=> bool(true)
["blob"]=> bool(true)
["data"]=> bool(true)
["allow"]=> array(3) {
[0]=> string(24) "https://*.googleapis.com"
[1]=> string(21) "https://*.gstatic.com"
[2]=> string(12) "*.google.com"
}
}
["style-src"]=> array(3) {
["self"]=> bool(true)
["unsafe-inline"]=> bool(true)
["allow"]=> array(2) {
[0]=> string(21) "https://*.gstatic.com"
[1]=> string(24) "https://*.googleapis.com"
}
}
["style-src-attr"]=> array(1) {
["unsafe-inline"]=> bool(true)
}
["img-src"]=> array(4) {
["self"]=> bool(true)
["blob"]=> bool(true)
["data"]=> bool(true)
["allow"]=> array(6) {
[0]=> string(24) "https://*.googleapis.com"
[1]=> string(21) "https://*.gstatic.com"
[2]=> string(27) "https://*.openstreetmap.org"
[3]=> string(22) "https://api.mapbox.com"
[4]=> string(12) "*.google.com"
[5]=> string(23) "*.googleusercontent.com"
}
}
["worker-src"]=> array(2) {
["self"]=> bool(true)
["blob"]=> bool(true)
}
}
and this is my play code
var_sys_log(Config("CSP"));
Config("CSP")["img-src"]["allow"][6] = "https://1234.com";
var_sys_log(Config("CSP"));
function var_sys_log( $object=null ) {
ob_start(); // start buffer capture
var_dump( $object ); // dump the values
$contents = ob_get_contents(); // put the buffer into a variable
ob_end_clean(); // end capture
//error_log( $contents ); // log contents of the result of var_dump( $object );
//syslog( LOG_WARNING, $contents ); // log contents of the result of var_dump( $object );
LOG( $contents ); // log contents of the result of var_dump( $object )
}
The resulting array basically hasn’t changed anything. Basically still 6 array elements with no additions in “allow”
{
["font-src"]=> array(3) {
["self"]=> bool(true)
["data"]=> bool(true)
["allow"]=> array(1) {
[0]=> string(25) "https://fonts.gstatic.com"
}
}
["form-action"]=> array(1) {
["self"]=> bool(true)
}
["object-src"]=> array(1) {
["self"]=> bool(true)
}
["frame-ancestors"]=> array(1) {
["self"]=> bool(true)
}
["frame-src"]=> array(2) {
["self"]=> bool(true)
["allow"]=> array(2) {
[0]=> string(12) "*.google.com"
[1]=> string(13) "*.youtube.com"
}
}
["script-src"]=> array(5) {
["self"]=> bool(true)
["unsafe-inline"]=> bool(true)
["unsafe-eval"]=> bool(true)
["blob"]=> bool(true)
["allow"]=> array(9) {
[0]=> string(32) "https://www.google-analytics.com"
[1]=> string(24) "https://*.googleapis.com"
[2]=> string(21) "https://*.gstatic.com"
[3]=> string(12) "*.google.com"
[4]=> string(19) "https://*.ggpht.com"
[5]=> string(23) "*.googleusercontent.com"
[6]=> string(21) "https://js.pusher.com"
[7]=> string(22) "https://cdn.tiny.cloud"
[8]=> string(21) "https://*.youtube.com"
}
}
["connect-src"]=> array(4) {
["self"]=> bool(true)
["blob"]=> bool(true)
["data"]=> bool(true)
["allow"]=> array(3) {
[0]=> string(24) "https://*.googleapis.com"
[1]=> string(21) "https://*.gstatic.com"
[2]=> string(12) "*.google.com"
}
}
["style-src"]=> array(3) {
["self"]=> bool(true)
["unsafe-inline"]=> bool(true)
["allow"]=> array(2) {
[0]=> string(21) "https://*.gstatic.com"
[1]=> string(24) "https://*.googleapis.com"
}
}
["style-src-attr"]=> array(1) {
["unsafe-inline"]=> bool(true)
}
["img-src"]=> array(4) {
["self"]=> bool(true)
["blob"]=> bool(true)
["data"]=> bool(true)
["allow"]=> array(6) {
[0]=> string(24) "https://*.googleapis.com"
[1]=> string(21) "https://*.gstatic.com"
[2]=> string(27) "https://*.openstreetmap.org"
[3]=> string(22) "https://api.mapbox.com"
[4]=> string(12) "*.google.com"
[5]=> string(23) "*.googleusercontent.com"
}
}
["worker-src"]=> array(2) {
["self"]=> bool(true)
["blob"]=> bool(true)This is the var_dump of the array
{
["font-src"]=> array(3) {
["self"]=> bool(true)
["data"]=> bool(true)
["allow"]=> array(1) {
[0]=> string(25) "https://fonts.gstatic.com"
}
}
["form-action"]=> array(1) {
["self"]=> bool(true)
}
["object-src"]=> array(1) {
["self"]=> bool(true)
}
["frame-ancestors"]=> array(1) {
["self"]=> bool(true)
}
["frame-src"]=> array(2) {
["self"]=> bool(true)
["allow"]=> array(2) {
[0]=> string(12) "*.google.com"
[1]=> string(13) "*.youtube.com"
}
}
["script-src"]=> array(5) {
["self"]=> bool(true)
["unsafe-inline"]=> bool(true)
["unsafe-eval"]=> bool(true)
["blob"]=> bool(true)
["allow"]=> array(9) {
[0]=> string(32) "https://www.google-analytics.com"
[1]=> string(24) "https://*.googleapis.com"
[2]=> string(21) "https://*.gstatic.com"
[3]=> string(12) "*.google.com"
[4]=> string(19) "https://*.ggpht.com"
[5]=> string(23) "*.googleusercontent.com"
[6]=> string(21) "https://js.pusher.com"
[7]=> string(22) "https://cdn.tiny.cloud"
[8]=> string(21) "https://*.youtube.com"
}
}
["connect-src"]=> array(4) {
["self"]=> bool(true)
["blob"]=> bool(true)
["data"]=> bool(true)
["allow"]=> array(3) {
[0]=> string(24) "https://*.googleapis.com"
[1]=> string(21) "https://*.gstatic.com"
[2]=> string(12) "*.google.com"
}
}
["style-src"]=> array(3) {
["self"]=> bool(true)
["unsafe-inline"]=> bool(true)
["allow"]=> array(2) {
[0]=> string(21) "https://*.gstatic.com"
[1]=> string(24) "https://*.googleapis.com"
}
}
["style-src-attr"]=> array(1) {
["unsafe-inline"]=> bool(true)
}
["img-src"]=> array(4) {
["self"]=> bool(true)
["blob"]=> bool(true)
["data"]=> bool(true)
["allow"]=> array(6) {
[0]=> string(24) "https://*.googleapis.com"
[1]=> string(21) "https://*.gstatic.com"
[2]=> string(27) "https://*.openstreetmap.org"
[3]=> string(22) "https://api.mapbox.com"
[4]=> string(12) "*.google.com"
[5]=> string(23) "*.googleusercontent.com"
}
}
["worker-src"]=> array(2) {
["self"]=> bool(true)
["blob"]=> bool(true)
}
}
and this is my play code
var_sys_log(Config("CSP"));
Config("CSP")["img-src"]["allow"][6] = "https://1234.com";
var_sys_log(Config("CSP"));
function var_sys_log( $object=null ) {
ob_start(); // start buffer capture
var_dump( $object ); // dump the values
$contents = ob_get_contents(); // put the buffer into a variable
ob_end_clean(); // end capture
//error_log( $contents ); // log contents of the result of var_dump( $object );
//syslog( LOG_WARNING, $contents ); // log contents of the result of var_dump( $object );
LOG( $contents ); // log contents of the result of var_dump( $object )
}
The resulting array basically hasn't changed anything. Basically still 6 array elements with no additions in "allow"
{
["font-src"]=> array(3) {
["self"]=> bool(true)
["data"]=> bool(true)
["allow"]=> array(1) {
[0]=> string(25) "https://fonts.gstatic.com"
}
}
["form-action"]=> array(1) {
["self"]=> bool(true)
}
["object-src"]=> array(1) {
["self"]=> bool(true)
}
["frame-ancestors"]=> array(1) {
["self"]=> bool(true)
}
["frame-src"]=> array(2) {
["self"]=> bool(true)
["allow"]=> array(2) {
[0]=> string(12) "*.google.com"
[1]=> string(13) "*.youtube.com"
}
}
["script-src"]=> array(5) {
["self"]=> bool(true)
["unsafe-inline"]=> bool(true)
["unsafe-eval"]=> bool(true)
["blob"]=> bool(true)
["allow"]=> array(9) {
[0]=> string(32) "https://www.google-analytics.com"
[1]=> string(24) "https://*.googleapis.com"
[2]=> string(21) "https://*.gstatic.com"
[3]=> string(12) "*.google.com"
[4]=> string(19) "https://*.ggpht.com"
[5]=> string(23) "*.googleusercontent.com"
[6]=> string(21) "https://js.pusher.com"
[7]=> string(22) "https://cdn.tiny.cloud"
[8]=> string(21) "https://*.youtube.com"
}
}
["connect-src"]=> array(4) {
["self"]=> bool(true)
["blob"]=> bool(true)
["data"]=> bool(true)
["allow"]=> array(3) {
[0]=> string(24) "https://*.googleapis.com"
[1]=> string(21) "https://*.gstatic.com"
[2]=> string(12) "*.google.com"
}
}
["style-src"]=> array(3) {
["self"]=> bool(true)
["unsafe-inline"]=> bool(true)
["allow"]=> array(2) {
[0]=> string(21) "https://*.gstatic.com"
[1]=> string(24) "https://*.googleapis.com"
}
}
["style-src-attr"]=> array(1) {
["unsafe-inline"]=> bool(true)
}
["img-src"]=> array(4) {
["self"]=> bool(true)
["blob"]=> bool(true)
["data"]=> bool(true)
["allow"]=> array(6) {
[0]=> string(24) "https://*.googleapis.com"
[1]=> string(21) "https://*.gstatic.com"
[2]=> string(27) "https://*.openstreetmap.org"
[3]=> string(22) "https://api.mapbox.com"
[4]=> string(12) "*.google.com"
[5]=> string(23) "*.googleusercontent.com"
}
}
["worker-src"]=> array(2) {
["self"]=> bool(true)
["blob"]=> bool(true)
}
}
}
}
arbei
December 21, 2024, 1:08pm
4
If you change Config("CSP")
, you need to save it back, e.g.
$csp = Config("CSP"); // Get
$csp["img-src"]["allow"][] = "https://1234.com";
Config("CSP", $csp); // Set
You may use the simpler way, e.g.
Config()->append("CSP.img-src.allow", "https://1234.com");
arataki
December 21, 2024, 5:15pm
5
Thank you so much. Knew that the notation had to be something like
but missed the method append while scanning through the class. (or the doc online)
Now, that has changed the array and I had been banging my head on that one but am I missing something here?
Here is the resulting allow array and all looks great. Has added quickchart.io to the end of the allow for img-src
Config()->append("CSP.img-src.allow", "https://quickchart.io");
results in
["img-src"]=> array(4) {
["self"]=> bool(true)
["blob"]=> bool(true)
["data"]=> bool(true)
["allow"]=> array(7) {
[0]=> string(24) "https://*.googleapis.com"
[1]=> string(21) "https://*.gstatic.com"
[2]=> string(27) "https://*.openstreetmap.org"
[3]=> string(22) "https://api.mapbox.com"
[4]=> string(12) "*.google.com"
[5]=> string(23) "*.googleusercontent.com"
[6]=> string(21) "https://quickchart.io"
}
Looks great
But I still get the original error message
usersview:423 Refused to load the image 'https://quickchart.io/chart?chs=200x200&chld=M|0&cht=qr&chl=...' because it violates the following Content Security Policy directive: "img-src 'self' https://*.googleapis.com https://*.gstatic.com https://*.openstreetmap.org https://api.mapbox.com https://*.google.com *.google.com https://*.googleusercontent.com *.googleusercontent.com blob: data:".
In the browser console and seems to indicate the new config wasn’t used.
I test using incognito mode so that I don’t pick up any cache hits etc.
Do I need to reload something to pickup this new config? I have this code in Page_Head so it is hit before the page is built.
TIA
Steve.
arbei
December 22, 2024, 7:31am
6
Adding Config()->append("CSP.img-src.allow", "https://quickchart.io");
in Page_Head server event is too late, you should use Global Code.
arataki
December 22, 2024, 10:22am
7
Works great. Thanks. First time I’ve used the “Global Code” section.
I will write this up and add it into the Tips section as this will as I’m sure others will find this useful.