CSP Image Base64 not loading with proper server configuration
Yes, another question about the CSP not loading a base64 image BUT I have researched a lot and can't find the solution. I have tried every configuration I've founded and still doesn't works.
So, what I'm trying is to load an Base64 image via Javascript.
var dataString = jQuery('#signature').jSignature('getData');
JQuery('#sig').append("<img class='imported' src='" + dataString + "'></img>");
As you can see it's not a big deal appending the base64 image (in localhost it works).
Then, searching about the CSP I found that the correct configuration to avoid the CSP with the Base64 Images is (and this is how I have the configuration):
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data:; font-src 'self' data:";
I have no problem with the font base64 but with the images it always throws this error:
Refused to load the image 'data:image/png;base64,...' because it violates the following Content Security Policy directive: "default-src *". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
Any ideas will be really appreciated, I really have no idea what is happening.
linux nginx server base64 content-security-policy
asked Nov 21 '18 at 19:24
RalphVBRalphVB
488
add a comment |
Yes, another question about the CSP not loading a base64 image BUT I have researched a lot and can't find the solution. I have tried every configuration I've founded and still doesn't works.
So, what I'm trying is to load an Base64 image via Javascript.
var dataString = jQuery('#signature').jSignature('getData');
JQuery('#sig').append("<img class='imported' src='" + dataString + "'></img>");
As you can see it's not a big deal appending the base64 image (in localhost it works).
Then, searching about the CSP I found that the correct configuration to avoid the CSP with the Base64 Images is (and this is how I have the configuration):
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data:; font-src 'self' data:";
I have no problem with the font base64 but with the images it always throws this error:
Refused to load the image 'data:image/png;base64,...' because it violates the following Content Security Policy directive: "default-src *". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
Any ideas will be really appreciated, I really have no idea what is happening.
linux nginx server base64 content-security-policy
asked Nov 21 '18 at 19:24
RalphVBRalphVB
488
Check to make sure the document doesn’t have 'meta http-equiv="content-security-policy"' with a different policy. Also use the Network pane in browser devtools to examine the Content-Security-Policy that the browser is receiving.
– sideshowbarker
Nov 21 '18 at 22:15
@sideshowbarker, I have already done that with curl, the network pane and it's the same as in my configuration file. Also I have checked if the isn't another csp meta tag and there isn't. And I moved the img-src to the begginig of the headers configuration with no result.
– RalphVB
Nov 21 '18 at 22:50
This is strange. Have you tried removingdefault-src 'self'from your CSP just to see if theimg-srcis being picked up then?
– Phonolog
Nov 23 '18 at 8:53
add a comment |
Yes, another question about the CSP not loading a base64 image BUT I have researched a lot and can't find the solution. I have tried every configuration I've founded and still doesn't works.
So, what I'm trying is to load an Base64 image via Javascript.
var dataString = jQuery('#signature').jSignature('getData');
JQuery('#sig').append("<img class='imported' src='" + dataString + "'></img>");
As you can see it's not a big deal appending the base64 image (in localhost it works).
Then, searching about the CSP I found that the correct configuration to avoid the CSP with the Base64 Images is (and this is how I have the configuration):
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data:; font-src 'self' data:";
I have no problem with the font base64 but with the images it always throws this error:
Refused to load the image 'data:image/png;base64,...' because it violates the following Content Security Policy directive: "default-src *". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
Any ideas will be really appreciated, I really have no idea what is happening.
linux nginx server base64 content-security-policy
asked Nov 21 '18 at 19:24
RalphVBRalphVB
488
Yes, another question about the CSP not loading a base64 image BUT I have researched a lot and can't find the solution. I have tried every configuration I've founded and still doesn't works.
So, what I'm trying is to load an Base64 image via Javascript.
var dataString = jQuery('#signature').jSignature('getData');
JQuery('#sig').append("<img class='imported' src='" + dataString + "'></img>");
As you can see it's not a big deal appending the base64 image (in localhost it works).
Then, searching about the CSP I found that the correct configuration to avoid the CSP with the Base64 Images is (and this is how I have the configuration):
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data:; font-src 'self' data:";
I have no problem with the font base64 but with the images it always throws this error:
Refused to load the image 'data:image/png;base64,...' because it violates the following Content Security Policy directive: "default-src *". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
Any ideas will be really appreciated, I really have no idea what is happening.
linux nginx server base64 content-security-policy
linux nginx server base64 content-security-policy
asked Nov 21 '18 at 19:24
RalphVBRalphVB
488
asked Nov 21 '18 at 19:24
RalphVBRalphVB
488
asked Nov 21 '18 at 19:24
RalphVBRalphVB
488
asked Nov 21 '18 at 19:24
RalphVBRalphVB
488
asked Nov 21 '18 at 19:24
RalphVBRalphVB
488
488
Check to make sure the document doesn’t have 'meta http-equiv="content-security-policy"' with a different policy. Also use the Network pane in browser devtools to examine the Content-Security-Policy that the browser is receiving.
– sideshowbarker
Nov 21 '18 at 22:15
@sideshowbarker, I have already done that with curl, the network pane and it's the same as in my configuration file. Also I have checked if the isn't another csp meta tag and there isn't. And I moved the img-src to the begginig of the headers configuration with no result.
– RalphVB
Nov 21 '18 at 22:50
This is strange. Have you tried removingdefault-src 'self'from your CSP just to see if theimg-srcis being picked up then?
– Phonolog
Nov 23 '18 at 8:53
add a comment |
Check to make sure the document doesn’t have 'meta http-equiv="content-security-policy"' with a different policy. Also use the Network pane in browser devtools to examine the Content-Security-Policy that the browser is receiving.
– sideshowbarker
Nov 21 '18 at 22:15
@sideshowbarker, I have already done that with curl, the network pane and it's the same as in my configuration file. Also I have checked if the isn't another csp meta tag and there isn't. And I moved the img-src to the begginig of the headers configuration with no result.
– RalphVB
Nov 21 '18 at 22:50
This is strange. Have you tried removingdefault-src 'self'from your CSP just to see if theimg-srcis being picked up then?
– Phonolog
Nov 23 '18 at 8:53
Check to make sure the document doesn’t have 'meta http-equiv="content-security-policy"' with a different policy. Also use the Network pane in browser devtools to examine the Content-Security-Policy that the browser is receiving.
– sideshowbarker
Nov 21 '18 at 22:15
Check to make sure the document doesn’t have 'meta http-equiv="content-security-policy"' with a different policy. Also use the Network pane in browser devtools to examine the Content-Security-Policy that the browser is receiving.
– sideshowbarker
Nov 21 '18 at 22:15
@sideshowbarker, I have already done that with curl, the network pane and it's the same as in my configuration file. Also I have checked if the isn't another csp meta tag and there isn't. And I moved the img-src to the begginig of the headers configuration with no result.
– RalphVB
Nov 21 '18 at 22:50
@sideshowbarker, I have already done that with curl, the network pane and it's the same as in my configuration file. Also I have checked if the isn't another csp meta tag and there isn't. And I moved the img-src to the begginig of the headers configuration with no result.
– RalphVB
Nov 21 '18 at 22:50
This is strange. Have you tried removing
default-src 'self' from your CSP just to see if the img-src is being picked up then?– Phonolog
Nov 23 '18 at 8:53
This is strange. Have you tried removing
default-src 'self' from your CSP just to see if the img-src is being picked up then?– Phonolog
Nov 23 '18 at 8:53
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419217%2fcsp-image-base64-not-loading-with-proper-server-configuration%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419217%2fcsp-image-base64-not-loading-with-proper-server-configuration%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Check to make sure the document doesn’t have 'meta http-equiv="content-security-policy"' with a different policy. Also use the Network pane in browser devtools to examine the Content-Security-Policy that the browser is receiving.
– sideshowbarker
Nov 21 '18 at 22:15
@sideshowbarker, I have already done that with curl, the network pane and it's the same as in my configuration file. Also I have checked if the isn't another csp meta tag and there isn't. And I moved the img-src to the begginig of the headers configuration with no result.
– RalphVB
Nov 21 '18 at 22:50
This is strange. Have you tried removing
default-src 'self'from your CSP just to see if theimg-srcis being picked up then?– Phonolog
Nov 23 '18 at 8:53