javascript - otra - imagenes de html

''img-src'' no se configuró explícitamente, por lo que ''default-src'' se usa como alternativa

Question

Aquí está mi Content-Security-Policy en index.html

<meta http-equiv="Content-Security-Policy" content="default-src ''self'' http://example.com">

Ahora estoy configurando dinámicamente img src de <img id="updateProfilePicPreview" class="profilPicPreview" src="" /> as

  var smallImage = document.getElementById(''updateProfilePicPreview'');
  smallImage.style.display = ''block'';
  smallImage.src = "data:image/jpeg;base64," + imageData;

Muestra

Se negó a cargar la imagen ''de datos: image / jpeg; base64, / 9J / 4AAQSkZJRgABAQAAAQABAAD / 2wBDACgcHiMeGSgjISMtKygw ... p + tB / yaKKAIi2TSfjRRVCJFOyIk96rE5NFFDGgoooqBhRRRQA9elIDg5oopgIc + lFFFAH / 2Q =='' porque no cumple con el siguiente contenido Directiva de Política de Seguridad: " ''auto'' default-src http://example.com ". Tenga en cuenta que ''img-src'' no se configuró explícitamente, por lo que ''default-src'' se utiliza como alternativa.

Entonces, ¿cómo puedo habilitar la configuración de img src dinámicamente?

Estaba siguiendo este ejemplo de la página de Córdoba:

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);
}

Answer 1

Entonces, ¿cómo puedo habilitar la configuración de img src dinámicamente?

El problema no es configurar el src, el problema es configurar el src en un URI de esquema de datos.

Agregar data: a la lista de cosas permitidas por la política de seguridad de contenido . Ya sea por defecto-src o podría definir un img-src separado.

En el siguiente ejemplo, agregué datos img-src ''self'' data:; al comienzo de la metaetiqueta en el archivo index.html.

<meta http-equiv="Content-Security-Policy" content="img-src ''self'' data:; default-src ''self'' http://XX.XX.XX.XX:8084/mypp/">