Here is my Content-Security-Policy
in index.html
<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://example.com">
Now i am dynamically setting img src of <img id="updateProfilePicPreview" class="profilPicPreview" src="" />
as
var smallImage = document.getElementById('updateProfilePicPreview'); smallImage.style.display = 'block'; smallImage.src = "data:image/jpeg;base64," + imageData;
It shows
Refused to load the image 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDACgcHiMeGSgjISMtKygw…p+tB/yaKKAIi2TSfjRRVCJFOyIk96rE5NFFDGgoooqBhRRRQA9elIDg5oopgIc+lFFFAH/2Q==' because it violates the following Content Security Policy directive: "default-src 'self' http://example.com". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
So how can i enable setting img
src dynamically ?
I was following this example from cordova page:
var pictureSource; // picture source var destinationType; // sets the format of returned value // Wait for device API libraries to load // document.addEventListener("deviceready",onDeviceReady,false); // device APIs are available // function onDeviceReady() { pictureSource=navigator.camera.PictureSourceType; destinationType=navigator.camera.DestinationType; } // Called when a photo is successfully retrieved // function onPhotoDataSuccess(imageData) { // Uncomment to view the base64-encoded image data // console.log(imageData); // Get image handle // var smallImage = document.getElementById('smallImage'); // Unhide image elements // smallImage.style.display = 'block'; // Show the captured photo // The in-line CSS rules are used to resize the image // smallImage.src = "data:image/jpeg;base64," + imageData; } // Called when a photo is successfully retrieved // function onPhotoURISuccess(imageURI) { // Uncomment to view the image file URI // console.log(imageURI); // Get image handle // var largeImage = document.getElementById('largeImage'); // Unhide image elements // largeImage.style.display = 'block'; // Show the captured photo // The in-line CSS rules are used to resize the image // largeImage.src = imageURI; } // A button will call this function // function capturePhoto() { // Take picture using device camera and retrieve image as base64-encoded string navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); } // A button will call this function // function capturePhotoEdit() { // Take picture using device camera, allow edit, and retrieve image as base64-encoded string navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); } // A button will call this function // function getPhoto(source) { // Retrieve image file location from specified source navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } // Called if something bad happens. // function onFail(message) { alert('Failed because: ' + message); }
The default-src Directive. The default-src Content Security Policy (CSP) directive allows you to specify the default or fallback resources that can be loaded (or fetched) on the page (such as script-src , or style-src , etc.)
The HTTP Content-Security-Policy img-src directive specifies valid sources of images and favicons.
So how can i enable setting img src dynamically ?
The problem is not setting the src, the problem is setting the src to a data: scheme URI.
Add data:
to the list of things allowed by the content security policy. Either for the default-src or you could define a separate img-src.
In the example below, I have added img-src 'self' data:;
to the start of the meta tag in the index.html file.
<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://XX.XX.XX.XX:8084/mypp/">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With